vue-cli是vue的脚手架，可以用来快速构建一个项目，其中全家桶包括router、vuex、axios等，以及各类三方库（element-ui、iview），三个插件联用可以提升项目编写的速度
1.安装
（1）首先安装node，使用node -v查看是否安装成功
image.png
（2）全局安装vue-cli，运行npm install vue-cli -g，使用vue --version查看版本
image.png
2.初始化项目
（1）cd进入需要创建项目的文件夹，运行以下代码
vue init webpack 项目名（不能中文）
image.png
看到以下提示说明项目初始化完毕。根据提示cd进入并npm run dev即可运行项目（注意这里是运行在开发环境的，实际到生产环境还需打包，其中还有一系列问题这里不做过多解释）
image.png
项目结构及运行
（1）这是项目结构
image.png
（2）使用编辑器如phpstorm、webstorm、vscode等等打开项目，并在终端中运行
(image.png)35A.png
image.png
非常牛皮，这样就运行出了第一个vue-cli项目！
vue-router
vue-router的简单使用（这里需要把组件先import进去才能在component中使用，不然会报组件不存在的错误）。整个页面使用subject组件包起来，在其中需要导航进行跳转页面，所以用了嵌套路由
image.png
其中使用路由传参：
this.$router.push({name: 'ArticlePage'，params:{id:1})
接收路由传的参数：
this.$route.params.id
axios
使用axios插件。
和jQuery的ajax方法差不多，用法如下:
axios.get(URL,params:{}).then(res)=>{成功代码}.catch(()=>{失败})
axios.post(URL,qs.stringfy(OBJ)).then((res)=>{成功代码}).catch(()=>{失败})
vuex
由于vue写出来的是单页面应用，数据等无法做到全局响应，因此引入新插件vuex来管理全局状态（个人理解为全局变量，其实官方是叫全局状态管理器），它是一个对象，有四个重要属性，分别是getter、state、mutation、actions，这里直接看官方文档的说明比较好理解，点击链接跳转[https://vuex.vuejs.org/zh/]
这里我们将四个属性分别写成了四个js文件，如图所示：(原因：本次项目功能较少，因此没有必要将它模块化，关于模块化的内容自行百度)
（1）state是数据池，也就是需要的数据的集合，它是一个对象
（2）getter与python对象中的getter方法类似，在页面中取得时候需要引入vuex自带的模块mapGetters，引入以及在页面中的使用方法如下
import { mapGetters } from 'vuex'
在vuex的computed属性中计算该数据，这样就能做到数据同步：
computed: {
...mapGetters(['touris']) // es6的语法，问了就是不知道
},
（3）actions：mutation里的方法的驱动：
页面内使用方法：this.$store.dispatch(方法名，参数);
对应的action里就应该定义一个相同的方法名，写法如下：
export function 方法名({commit}, 形参) {
return commit(mutation里对应的方法名, 实参)
}
（4）mutations是改变store状态的唯一方法（官方是这样说的）.我们可以在这个方法内请求接口等等
export const 方法名= (state, data) => {
// 修改状态等等操作
};
最后在store.js中引用并导出stores对象
最后是项目打包，在终端运行npm run build即可使用webpack打包，访问index.html即可运行程序，最后部署到服务器即可，当然还需要考虑打包前的配置（包括接口代理、图片路径等等相关问题）
ps:个人认为vue-cli不适合制作太过炫酷的页面。使用vue-cli写项目需要一定的页面布局经验和js基础，因此小编建议要慎用。
77777777777777777777777777777777777777777
