基于Vue移植构建后台控制系统（二）

在上一篇有说到一句话——大型项目用Vue-cli来搭建比较方便，这也是一般的框架都会提供的福利，而且不仅如此，例如传说中的全家桶可以让我们更快捷的完成vue项目。

一、Vue全家桶

所谓全家桶，是指便于构建较大项目所需要的一些Vue插件——当然是可以定制的。
一般而言，标准的全家桶包含——

1 vue-cli——脚手架
2 vue-router——路由
3 vuex——状态管理
4 vue-axios——网络请求

二、vue-cli

vue-cli是基于webpack的Vue构建、编译、压缩、打包的工具，所以对webpack做一些了解是必不可少的——尽管不了解webpack也无妨碍。
PS：在学习前端相关技能时，总是会遇到需要某项知识为前提，如此循环，很容易疲惫。（值得安慰的是，并不是所有的东西都需要精通）

2.1 webpack简介

2.1.1 定义和目标
  将整个项目分解成各种模块，运用不同的插件进行编译打包，处理成可运行的js等文件；提供客户端按需进行增量加载的可能。
2.1.2 核心思想
  webpack将一切都作为模块进行处理。
2.1.3 基本方法
  1、插件：webpack依靠内置的插件和第三方插件提供各种丰富的功能；
  2、loaders：webpack本身只能处理js文件，对于css、scss、png等文件的处理需要通过适当的loaders来进行处理，如css-loader、style-loader、url-loader等；
  3、多入口对应多输出文件； 
2.1.4 基础命令
    webpack origin.js bundle.js --module-bind 'css=style-loader!css-loader'
2.1.5 基础配置文件
 entry: {
         pageA: "./pageA",
        pageB: "./pageB"
    },
    output: {
        path: path.join(__dirname, "js"),
        filename: "[name].bundle.js",
        chunkFilename: "[id].chunk.js"
    },
    module: {
        loaders: [{test: /\.json$/, loader: "json"},
          {test: /\.js$/, exclude: /node_modules/, loader: 'babel'},
          {test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css?modules!postcss')}]
      },
    plugins: [HtmlWebpackPlugin({filename: 'index.html', template: 'index.html', inject: true})]}

2.2 vue-cli简介
使用vue-cli，你只需要按下一个快门：

$ npm install --global vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

vue-cli中的相关目录：

vue-project-dir.png

build——编译脚本，包括webpack配置；
config——编译版本控制；
src——需要被编译的文件，包括js、css、png等；
static——不需要被编译的文件，例如字体文件、三方库、图片等；
index.html——对应的页面html；
package.json——依赖模块配置；

三、vue-router

3.1 了解web路由
web路由那些事儿（一）
web路由那些事儿（二）
你可以了解到：

3.1.1 web路由的由来、定义和组成；
3.1.2 单页面路由的基本原理；
3.1.3 怎样实现自定义路由；

3.2 vue-router要点
事实上，你可以在vue官网的生态系统中找到详细的文档。

3.2.1 ：路由超链接；
3.2.2 ：路由视图，用于显示对应的模板或组件；
3.2.3 路由元信息：定义路由记录；
3.2.4 动态路由：跳转时传递参数；
3.2.5 子路由：路由可以嵌套；
3.2.6 钩子：beforeEach、afterEach、beforeEnter等；
3.2.7 路由信息对象：this.$route、$route——path、params、hash、fullPath；

四、vuex

4.1 vuex是什么？
事实上vuex（状态管理模式）要解决的根本问题，就是变量和视图之间的一致性。
通俗的讲，

4.1.1 问题：
    变量a会在n个地方变化，而a变化时button b和image c必须在红黄蓝之间进行切换。
4.1.2 经典方案：
    定义函数changeColor = function(view, a) {
                  根据a的值更改a的颜色；
              }
    然后在每个改变a值的地方执行changeColor即可。
4.2.2 vuex方案：
    建立单独的存储区域（或者说就是一个对象）
    objectA = {a: undefined,
                       views: views[],
                       changeValuea: function(value){
                                                      a = value;
                                                      根据a的值改变a的颜色；
                                                  }
                      }；// vex还增加了同步异步操作的区分
    然后在每个改变a值的地方执行objectA.changeValuea即可。

很明显，经典方案比起vuex的方案看起来更简洁明了（至少在不考虑同步异步的情况下）；然而当变量a多起来并且对应的view更多时，很容易造成代码和逻辑的混乱，此时vuex整体思路的优势就会体现出来了。所以很容易得出结论：

当前项目不那么庞大或者状态之间比较清晰地情况下，是不推荐使用vuex的；只有那些项目比较庞大、状态关系足够复杂的情况下再去考虑引入vuex。

4.2 vuex要点
事实上，你可以在vue官网的生态系统中找到详细的文档。

4.2.1 state——状态值
4.2.2 getters——获取状态值及其派生值（计算属性）
4.2.3 mutations——改变state值的唯一媒介
4.2.4 actions——改变state值的中介，即媒介值
4.2.5 modules——模块划分，避免纠缠复杂
4.2.6 commit——发起action更改state的接口，内部方法
4.2.7 dispatch——发起action更改state的接口，外部接口

五、vue-axios

axios其实只是对网络请求AJAX的封装，类似于jQuery AJAX对JS AJAX的封装一样。
axios并非官方插件，它取代之前的vue-ressource被vue官方推荐，可以阅读GitHub文档。喜欢中文的同学可以移步到这里。
由于直接和底层的HTTPRequest打交道又不是一件令人愉快的事情，所以引入vue-axios也是势在必行的（当然你也可以自己封装一下）。

六、总结

一般我们开始一个Vue单页面应用是，都是采用vue-cli + vue-router + vue-axios的模式进行，然后根据项目的复杂程度选择是否使用vuex。