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 Vue from 'vue';
import Vuex from 'vuex';
import * as actions from './actions';
import * as mutations from './mutations';
import * as getters from './getters';
import state from './rootState';

Vue.use(Vuex)

const store = new Vuex.Store({
state,
getters,
actions,
mutations
})

export default store;

以上是vue官方的大致写法，照葫芦画瓢即可。如果你没有在getters中写任何东西，那就不要引入getters

4. 查看src/main.js

需要把store加载到此文件中

main.js 原本是这样的：

import Vue from 'vue'
import App from './App'
import router from './router'

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})

现在改成这样：

import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store';

/* eslint-disable no-new */
new Vue({
el: '#app',
store,
router,
template: '<App/>',
components: { App }
})

这样就算是把store挂载到vue上了

5. 一个例子

写一个简单的例子，把路由、vuex这一圈路程走一遍

①、在src/components中新建Test.vue

Test.vue:

<template>
<div>
<span>{{ msg }}</span> <!-- 我们稍后在store上定义一个msg属性 -->
<button @click='fun'>获取数据</button>
</div>
</template>

<script>
import Vue from 'vue';
import { mapGetters, mapActions } from 'vuex';

export default {
name: 'test',
methods: {
...mapActions([ // 从store上绑定的action中载入需要的到此组件中
'fun', // 我们稍后在src/store/actions.js中创建一个名为fun的方法
]),
},
computed: {
...mapGetters([ // 从store上绑定的getters中载入需要的到此组件中
'msg' // 我们稍后在src/store/getters.js中创建一个名为msg的方法
]),
}
}
</script>

这个例子的用意是：
①、用户点击button,触发绑定在click上的fun方法
②、fun是定义在actions.js中的，这个方法会调用vue自带的commit方法
③、commit方法会自动调用mutations中对应的方法
④、在mutations中更新store上的数据msg,从而Test.vue中的msg自动得到更新

②、在src/router/index.js中加入Test组件的路由：

import Vue from 'vue';
import Router from 'vue-router';
import Hello from 'components/Hello';
import Test from 'components/Test'; // 引入Test组件

Vue.use(Router)

export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
},
{
path: '/test', // 定义Test组件的访问路径
name: 'Test', // 命个名，没有太大作用
component: Test // 指向真正的Test组件
}
]
})

③、在rootState.js中定义一个msg属性：

const state = {
msg: '', // 初始值为空
}
export default state;

④、actions.js中的fun方法：

import reqwest from 'reqwest';
// reqwest,一个封装了promise的异步请求插件
// 需要cnpm install reqwest --save

export const fun = ({ commit }) => {
reqwest({
url: `url地址`,
method: 'post',
contentType: 'application/json',
crossOrigin: true,
data: 参数,
dataType: 'json',
}).then(msg => {
commit({
type:'getMsg', // 这个type很重要，vue会自动去找mutations.js中名为getMsg的方法
msg, // 成功后把得到的数据通过commit传入mutations
});
})
};

由于暂时没有服务，Demo中用了假数据代替

⑤、src/store/getters.js

export const msg = state => state.msg;

⑥、mutations.js中的getMsg方法

export const getMsg = (state, payload) => {
state.msg = payload.msg;
}

只是简单的把最新得到的msg赋给state上的msg属性

⑥、运行项目

cnpm install

cnpm run dev

会自动打开浏览器，进入localhost:8080/#

在浏览器地址栏输入：localhost:8080/#/test 进入我们的测试页面

点击按钮，可以看到数据的变化

6. 项目最终打包发布

①、到src/config/index.js中改一个参数：



把这个改为false，不然在最终打包的文件中会出现一些map文件

map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。

②、运行 cnpm run build 开始打包

③、会在项目目录下自动创建dist目录，打包好的文件都在其中：



把这些文件甩给后台开发人员就行了

Vue 相比 React，我认为更加灵活，但碎片知识也很多。

Vue的ui库，我用了一下elementUI库，还行吧，但有些地方设计得些许繁琐。

Vue好在有完整的中文文档，中文教程。相比React的中文官网好很多。

比起React，Vue可以在嵌套组件中直接访问store，尤其有了getter这个设计，太方便了。

细节1

favicon.ico 的 问题

把favicon.ico放在项目的根目录下（不是src中，是最外面）

然后在build/webpack.dev.conf.js中找到：

new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
favicon: 'favicon.ico', // 在此处添加一行这个，用于webpack生成index.html时，自动把favicon.ico加入HTML中
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
chunksSortMode: 'dependency'
}),

同理，在build/webpack.prod.conf.js中也这么干。