Vue2+VueRouter2+webpack 构建项目总结

推荐阿里云服务器  https://promotion.aliyun.com/ntms/act/vm/aliyun-group/buy.html?group=ikkX4HvsKN

摘要：本篇文章，是在学习了另一篇博客之后自己进行总结性的整合，一是因为原来的是教程博客是有5篇的，二来呢也是想要自己学完之后在巩固一下，本篇的所有代码我都是以截图的形式上传，不会在里面放上代码，这样让读者可以能够手打加深印象。

 

 

一.准备工作

 

 

首先，要开始工作之前，还是需要把环境搭建好。我这里的环境是windows，如果你是mac，请自己确保环境没有问题。

windows+nodejs+npm环境是必备的。另外需要文本编辑器，我使用的是sublime，当然，你可以使用其他的，都没有关系。只

是，nodejs是必须要安装的。

各个系统安装不一样，照着安装说明一步一步来就好了这里就不在阐述了，详情参考：nodejs 官方网站

安装好nodejs 之后，调出终端，快捷键为win+R键后输入cmd在按回车键就好，在终端下面输入命令node -v会有版本号出来。就说明安装成功了。输入npm -v也会有版本号出来，就说明，npm也已经安装好了。

因为npm在国内是会有点慢的，所以这里要讲npm改为国内的镜像(淘宝镜像居多)，具体的方法网上教程都有（淘宝镜像）

有了Nodejs环境，则我们可以开始了。

接下来进行vue-cli脚手架工具的安装，其模板可以通过 vuejs-templates 来查看。（有个前提，要稍微懂点DOS命令行的基本的命令，如cd，cls等）

（-g为表示全局安装，即不管你在哪个文件夹创建都能表示已经安装引用到vue脚手架）

安装完vue-cli脚手架工具之后，开始正式创建项目了。进入自己要项目要创建的位置，我这里是在E盘就直接输入e:进入E盘。

 

进入自己项目要创建的目录后按照下面的命令逐条输入，新建自己的项目：

 

输入命令按回车键会后，会有一些提示，是什么不用管，按照下面我提供的进行操作即可

 

 

如上图所示，就说明我们的项目构建成功了。并且，给出了下面要执行的命令，我们来逐条执行：

 

执行npm install需要一点时间，因为有些会从国外服务器上下载代码之类的，所以这边直接一开始替换国内的镜像，用cnpm install代替进行节省时间。安装完成后，终端如图：

 

 

最后，执行下面一句，把项目跑起来

 

如上：四行命令，就可以把一个名为vuedemo的项目跑起来。当然，这个名字你是可以随便起的，根据你的实际项目来定。

通过上面的这些命令，我们就通过vue+webpack创建了一个名为vuedemo的项目。在运行了cnpm run dev之后，会自动打开一个浏览器窗口，可以看到具体的效果了。

 

二.目录以及文件结构

 

如上图所示，我们的目录结构就是这样的了。

目录/文件	说明
build	这个是我们最终发布的时候会把代码发布在这里，在开发阶段，我们基本不用管。
config	配置目录，默认配置没有问题，所以我们也不用管
node_modules	这个目录是存放我们项目开发依赖的一些模块，这里面有很多很多内容，不过高兴的是，我们也不用管
src	我们的开发目录，基本上绝大多数工作都是在这里开展的
static	资源目录，我们可以把一些图片啊，字体啊，放在这里。
test	初始测试目录，没用，删除即可
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。基本不用管，放着就是了
index.html	首页入口文件，基本不用管，如果是开发移动端项目，可以在head区域加上你合适的meta头
package.json	项目配置文件。前期基本不用管，但是你可以找一下相关的资料，学习一下里面的各项配置。至少，要知道分别是干嘛的。初期就不管了。
README.md	不用管

如上，基本上就是这么个情况。重要的，还是src文件夹。src文件夹的情况如下所示：

commponents目录里面放了一个演示的组件文件，你可以打开看下。当然，也可以直接删除，然后根据我的博文往下走。

App.vue是项目入口文件。当然，我们需要改造，改造成我们可以使用的样子的。

main.js这是项目的核心文件。全局的配置都在这个文件里面配置。

接下来请照下文提供的src目录对src文件夹的文件进行整合，虽然你也可以用自己的但是这边博文是照着这个来的，所以你懂得：

 

 

如上图所示，把文件夹和文件都新建好，后面的博文我会详细给出每个文件的代码的。这里，都新建空文件即可。

文件\目录	说明
component	组件文件夹我们写的一些公用的内容可以放在这里的。
config	核心配置文件夹
frame	存放自路由的文件夹
page	项目模板文件夹,所有的页面文件全部存放与此，后面会根据需要来建立各种子目录
style	样式存放目录

vue支持每一个模板里面写css，这样可以做到随用随取。但是，我个人不太喜欢这样，我还是喜欢把css给单独放出来，因为这样便于整理。

三.配置路由

src目录都已经整完了，现在开始先整2个页面练练手先，我们在src/page目录下面新建两个文件，分别是index.vue和content.vue。

我们还是利用 http://cnodejs.org/api 这里公开的api来做项目。不过本章节不涉及调用接口等内容。

 

//index.vue

 

//content.vue

 

接下来，我们需要安装VueRouter2到我们的项目。参考文档见VueRouter2安装文档

在终端中，我们把当前目录跳转到我们的项目，然后执行命令。如下：

 

 

我们查阅文档，会知道，命令是npm install vue-router（国内镜像为cnpm install vue-router），后面加一个-D的参数是为了让我们的安装的vue-router这个插件写入到package.json配置文件中。以便于下次再其他地方安装的时候，可以一并安装进去，否则，还得再安装一遍。

通过在终端中执行命令，我们已经安装好路由了。下面，我们需要在src/main.js文件中进行配置。 

入口文件肯定和默认的不一样，src/App.vue的配置文件如下：

这个只是一个单纯的路由入口页面。比较特殊的是，下面我 import了一个scss文件。我喜欢把css独立出来，而不是写在一起，所以我之前在src目录下面建立了一个style的文件，里面放scss文件。

我建议你先跟着我走，回头自己根据自己的习惯调整。

下面我们配置路由文件src/config/routes.js

如上，我们引用模板，然后再配置路由，这里，我们没有涉及自路由的内容，我们先这样配置上。然后，我们就可以在终端里面输入cnpm run dev 来看我们做的效果了。

这里有个问题，如果一开始大家都安装了ESLint，这边就会报一大堆的错误，因为ESLint是一种检查错误插件，而我们的代码上大部分的格式是错误的，so，这里会包一大堆的错误。解决方法就是打开根目录下面的/build/webpack.base.conf.js文件，找到如下代码全部注释掉就OK了：

然后我们在跑，还是有错误

这到底是什么依赖呢，接着再逐条进行查阅，联系上下文，说明这边缺少了sass-loader插件以来。

OK，缺什么装什么

 

如上图所示，就安装好了。

安装好了再跑，这回又提示我们缺少node-sass插件。那就继续装呗

 

如上图所示，就安装好了。安装好了再跑。OK无错误，运行成功。

   

四.接通Api

我们打开src/page/index.vue文件，在这里写入下面的代码：

再来配点css稍微美化下页面，新建文件， src/style/base/_index.scss，输入下面的内容：

然后在 src/style/scss/style.scss中输入 

接下来就是调用Api了。首先，我们编辑 src/main.js ，引用 src/config/api.js。如下：

具体的位置的话，我这里直接放上main.js的完整代码截图

要请求接口，就必须有相对应的组件。如果你使用过jQuery，应该熟悉其中的AJAX方法。当然，在vue中，我们就不考虑使用jquery了。我们使用superagent这个组件。安装的方法的和上文提到的安装vue-router插件的方法一样，直接在根目录输入如下的命令按回车即可：

有了工具了，我们就需要来编写api.js文件，使它可以完成我们想要的工作。

这个文件就有点狂拽酷炫吊炸天了。目前，我们测试cnodejs.org的接口，我调整的是只适用于这边的是用，如果在其他的项目中是要重新调整，调整到适和你的项目的代码。我调整得可以使用。主要是根据接口返回的内容进行各种判断和处理，其中主要的框架代码是不用动的。

如果你JS基础过硬，一看就懂，如果不行，就慢慢看，慢慢理解吧。反正我这里不说明了，不然文章就长了。

编辑src/page/index.vue文件，代码如下：

保存后，项目跑起来，在浏览器中，就可以看到渲染出来的列表了。如下图所示：

 

五.配置子路由

打开编辑src/frame/subroute.vue文件，编辑代码如下：

 

接着在src/page文件夹下新建文件夹user，然后在里面新建三个文件index.vue，info.vue和love.vue。代码内容分别如下：

//index.vue

//info.vue

//love.vue

 

打开src/config/routes.js文件，这个文件就是配置所有路由的文件。首先，在顶部插入下面的代码，引用子路由文件

 

 

然后，我们需要引入我们前面写的三子页面模板。代码如下：

 

 

引好这些文件之后，我们就开始配置子路由了。

 

 

完整的代码如下：

 

保存好之后，我们通过浏览器访问一下，截图如下：

 

总结：本测试项目github地址是 https://github.com/Jimtan-Yu/vuedemo，不过我还是希望大家能够自己动手打出来而不是clone一下了事，因为你动手打了能够加深自己的印象。

 

 

 

详细版的请点击链接：http://blog.csdn.net/fungleo/article/details/53171052

推荐阿里云服务器  https://promotion.aliyun.com/ntms/act/vm/aliyun-group/buy.html?group=ikkX4HvsKN