Vue全家桶精简配置（vue-cli,vuex,axios,vue-router,elementUI）

在上一篇介绍使vue-cli3搭建了项目，并添加了一些基础的配置，现在就来和大家一起将项目需要用到的工具准备好。vue-cli在上一篇已经说了，这边就不重复了，

axios

安装

npm install axios

封装导入

在src里面新建api文件夹，新建index.js文件

最后将其导出

然后我们就可以在同级文件夹，建对应接口文件并将index中导出的repuest引入

在最后我们在对应组件，导入对应接口，并调用就可以了

vuex

安装

npm install vuex --save

引入

我们在src下面新建store文件夹，里面新增四个文件，分别为index.js/action.js/getter.js和mutation.js

index.js文件我们引入vuex等所需要的，然后其他三个文件，和定义state

action.js是当我们需要异步修改state里面属性的时候，需要用到action，但是最终都是通过mutation去修改的

getter.js就相当于我们组件的计算属性，可以及时获取到state里面的属性值

mutation.js就是我们最终修改state里面的值的唯一途径

最后在main.js中导入

使用

具体怎么去使用呢？首先我们去修改state里面的值

这便是给state里面的loginInfo复制一个新的对象，通过dispatch去调用mutation里面的login方法。

然后我们怎么去取
第一直接取：

直接再组件的created里面取出来，再复制给组件定义的变量，
第二监听state里面属性变化:
//利用计算属性
computed: {
listData() {
return this.$store.state.listData;
}
},
//监听执行
watch: {
listData(val) {
写上你需要的东西
}
},

vue-router

安装

npm install vue-router --save（一般都有）

使用

我们在router文件下的index.js文件下

最后在main.js中导入就好了

element

安装

npm i element-ui

按需引入

先创建一个companyImport.js,将element-ui的样式及所使用的组件全部引入，格式如下

然后进入main.js文件中，将之前定义的文件引入，然后使用Vue.use(xxx)进行全局声明

这杨我们就完成了按需引入

全部引入

在main.js中

这杨我们就能使用了