Vue2.0 框架配置：vue-cli + vue-router + vuex

写于 2017-2-7

(注：现在使用最新版的vue-cli已经可以统一配置一切，简单方便，本篇文章已过时 2018-3-15)

Vue中文站：cn.vuejs.org
vue-router官方教程：router.vuejs.org/zh-cn
vuex官方教程：vuex.vuejs.org/zh-cn

完整干净Demo地址：coding.net/u/java_luo/p/Vue_Demo/git

---

1. 开始

安装vue-cli 官方脚手架搭建工具

①、直接全局安装
cnpm install vue-cli -g

②、然后打开npm命令行工具，cd到你想要的某个目录中，并输入：
vue init webpack projectname
(即开始创建名为projectname的脚手架，官方提供了webpack-simple和webpack两种)

③、会引导你创建最基本的脚手架：

这样基本项目结构就创建好了：

只需要关心src目录中的内容就好:

assets: 存放图片、音频等一切静态资源
components: 存放所有的vue组件
router: 里面只有一个路由配置文件

其他地方的文件包括：
babel转码器配置；
webpack 开发模式和最终打包的生产模式所需配置；
eslint代码检查器配置；
（ESLint中文网：eslint.cn）
建议自己到eslint照着文档配一套适合自己的语法检测。

---

2. 引入vuex 状态管理系统

cnpm install vuex –save

在项目的src文件夹下新建一个文件夹：store
在其中新建几个基本文件：

actions.js – vuex核心之一
getters.js – 一个方便的工具级接口，可以方便的构建全局state自定义方法
index.js – 最终所有的部分都汇聚到此，这就是store对象
mutations.js – 改变store中各个数据的唯一方法
rootState.js – 这是我自己弄的，只是把store中的各个数据都保存在这里，方便查看，不然全都放到上面的index.js，那文件里面有点乱

注：官方一些例子中，还有modules，即模块，用于分担store的压力，因为项目大了之后，数据多，状态多，所以把store分成多个module,每个module都有自己的actions,getters,mutations等，最终在index.js中全部合并。但目前我不想这么做。

我自己创建了个rootState.js保存所有的顶层数据。你也可以按照官方的例子做。

---

3. 配置store

src/store/index.js:

import