Vue项目搭建完整剖析全过程
项目源码地址：https://github.com/ballyalex 有帮助的话就加个星星呗~！
项目技术栈：vue+webpack+bower+sass+axios
MINGW64使用简介：
在运行项目的目录下开启，其中，ctrl+c是退出，clear是清除。
NPM使用技巧：
国内网络访问npm的速度是比较慢的，所以我们可以采用淘宝开发的cnpm代替。
方便调试查看工具：
谷歌浏览器的vue插件。
Vue模块介绍：
vuex: 管理核心数据
vue-router: 路由，单页面应用
axios: 交互，取代之前的vue-resource
vue组件介绍：
每个vue组件中都有三个部分组成：
template script style
其中style可以加上scoped属性，表示局部样式。
该项目中用到的es6简单介绍：
导入模块： import 名称 from 位置(其中.js结尾的js可以忽略不写)
导出模块：export default{}
箭头函数简单示例：
es5：function(h){ return h(App) }
es6：h => h(App)
该项目用到的sass介绍：
语法如:ul li{} ul li a{} 可以将li下面的标签进行合并,ul li{ a{}}。
该项目用到的bower介绍：
可以用bower来下载包，如animate.css等
项目介绍
该项目包含三个标签页，分别是首页home、社会follow、科技column
其中页面数据均采用的是mock数据
一、项目准备
1、用vue初始化一个vue项目（脚手架）
vue init webpack-simple vue-news
其中，webpack-simple也可以代替为simple（简单）或webpack（提供单元测试，eslint等）。
初始化完成之后，就可以安装该项目了。
cnpm install , 会生成一个文件夹node_modules。
紧接着我们运行该项目，cnpm run dev。
提醒：
1)、有时候在run dev的时候，会出现一些错误，比如说node的版本有问题，或者其他依赖有问题，那么比较方便的做法就是把刚刚生成的node_modules文件夹给删除掉，重新install一次，一般这时候run dev的时候就正常了。
2)、端口冲突，这时候就要改package.json中的scripts下面的dev。在这一行的最后，我们可以加上一个--port 8001。这时候这个项目的端口就被我们改成8001了。重新运行cnpm run dev，就能在8001端口打开该项目了。
2、了解该vue-news中的文件夹。
1)、分析根目录
1.1)、package.json：
scripts中的dev即为我们刚开始run的那个dev。
scripts中的build即为我们最后打包的那个build。
1.2)、index.html
id为app的组件为根组件。
build.js为最后webpack打包生成的js文件。
1.3)、webpack.config.js
在该文件中我们可以看到很多个json，其中这些是用来识别js、css、图片等格式的。
比如说要在js文件中用到css模块，就必须先下载style-loader和css-loader。然后在该webpack.config.js中进行配置。
cnpm install style-loader css-loader -D (也可以是--save-dev)
下载loader为
2)、分析src：
2.1)、App.vue
这个为根vue组件。我们可以把里面的内容清空，用来写我们自己的东西。
2.2)、main.js
这个为入口文件，导入了vue模块和App模块。
其中render函数采用了es6的写法，h => h(App) 等同于function(h){ return h(App) }；
3)、assets文件夹
这个文件夹专门是用来放置一些静态资源的。可以放置images、css、js。
4)、components文件夹
在assets同级目录下新建一个文件夹叫做components，用来存放我们在该vue项目中用到的所有vue文件。
二、开始vue项目
1、对根目录下的index.html先写入一些格式化的meta标签。（诸如适配移动端）。
2、在css目录下建立一个reset.css文件，用于重置样式。https://git.io/normalize，并在main.js中全局引入。
3、分析项目：
分析首页构成：
顶部有三个tab切换，
中间是具体的新闻展示，
底部是底部切换。
4、先实现顶部的三个tab切换。将它作为一个组件。新建一个Nav.vue，用于存放这三个tab。
提醒：在vue2.0中template里面的内容必须用一个大的div包裹。同时，将该Nav.vue导入到App.vue中，并输出export。
5、三个tab页分别对应着三个vue组件：Home.vue、Follow.vue、Column.vue。
Home.vue中包括一个轮播图，把轮播图拆成一个组件Slider.vue。
Slider.vue中：
将该轮播图所用到的js放在methods下面新建一个函数fnSlider，
在新建一个mouted表示模板编译完成，调用该函数this.fnSlider。
Home.vue中引入该Slider。
新建一个循环，将mock数据data文件下的index.data循环输出。
因为返回的是一个数组，所以需要先在data函数中返回该数组arrList
因为用到了Slider组件，所以需要在components中输出该组件
封装获取数据的函数fetchData，用axios获取数据。将返回的数据赋值给arrList数组。
提醒：
axios使用指南：
1)、首先需要intall axios
2)、在main.js中，import axios。
3)、为了更方便容易看懂使用axios，将axios挂到Vue的原型上，方便调用：
Vue.prototype.$http = axios;
所以在Home.vue中用axios获取数据就可以写成：
this.$http.get('').then(function(){}).catch(function(err){})
Follow.vue和Column获取数据同上。
6、实现首页、社会、科技三个页面之间的跳转，
这时候就要用到vue-router了。
6.1)、首先是下载install vue-router
6.2)、在main.js中引入import VueRouter from 'vue-router'
然后Vue.use(VueRouter)
接着const router=new VueRouter({routes})
6.3)、在Nav.vue中，将即将切换的每个li替换为router-link to="/url " tag="li"，同时， 在App.vue中加入<router-view></router-view>，以便实现路由切换的显示。
6.4)、为了便于管理很多路由，便可以在main.js的同级目录下建立一个routeConfig.js.
相对应的输出一个数组：
数组中有很多json，如{path:'/home',component:Home}
每个目录对应着每个组件。同时，要用到的每个组件都必须在顶部导入import。
最后需要添加一个path:'/'和path:'*'，表示一访问，或者输入找不到的地址跳转Home
提醒1：有时候页面上跳转的是时候有个#号，这时候可以在new VueRouter下添加 一个mode: 'history'。
提醒2：有时候页面上li标签很多的时候，切换路由无法回到最上面，这是，可以 在new VueRouter下添加一行：scrollBehavior: () => ({ y: 0 }),
7、测试路由，运行成功。
8、底部也有一个切换。原理同上做路由切换。
9、Vuex使用指南：
问题：点击底部 我的/user-info 按钮的时候，路由跳转过来，顶部的菜单页还依旧存在。
分析：要让切换到 我的/user-info 按钮的时候 ，顶部菜单消失，切回到首页的时候，顶部菜单出现，这时候就要用到vuex。
官方文档解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
在这里，我们可以用它来管理我们的状态。
1)、安装install vuex
2)、新建一个文件夹store，用于存放vuex的管理文件，index.js、getter.js、actions.js、mutations.js，参考官网提供的中vuex图片。
3)、首先我们回到App.vue中，在输出中加入一个watch监听器：
我们使用$route(to,from){ console.log(to.path,from.path) },可以发现，该函数能输出到达的路径和原来的路径。
于是我们能通过检测目标路径是否是/user-info来判断发送哪个通知
(showHeader , hideHeader)。
3.1)、Dispatch发给Actions，所以先在actions.js中导出showHeader和hideHeader。
3.2)、Actions通过commit发送给Mutations
3.3)、在mutations中设置状态header初始为true。并通过mutations来调用state。
10、添加一个loading状态。
原理：请求数据过程中，loading显示，请求数据完毕，loading消失。
需要在main.js中先配置axios。
配置如下：
//关于axios配置，比如发送请求显示loading，请求回来loading消失之类的
axios.interceptors.request.use(function (config) { //配置发送请求的信息
store.dispatch('showLoading')
return config;
}, function (error) {
return Promise.reject(error);
});
axios.interceptors.response.use(function (response) { //配置请求回来的信息
store.dispatch('hideLoading')
return response;
}, function (error) {
return Promise.reject(error);
});