本篇主要是利用vue-cli来搭建vue项目，其中前提是node和npm已经安装好，文章结尾将会简单提到一个简单的例子。使用vue-cli搭建项目最开始我也是看网上的教程一步步搭下来，所以其中的一些步骤说法为了表达正确会进行一定参考。
一、 项目使用技术、框架简单介绍我们使用vue-cli来搭建整个项目，vue-cli就是一个脚手架，步骤很简单，输入几个命令之后就会生成整个项目，里面包括了webpack、ESLint、babel很多配置等等，省了很多事。根据小高之前给的要求以及结合DSS项目中的经验，我们今天搭建的项目结构组成为：
Vue+ ESLint + webpack + iview+ES6
Vue: 主要框架
ESLint: 帮助我们检查Javascript编程时的语法错误，这样在一个项目中多人开发，能达到一致的语法
Webpack: 设置代理、插件和loader处理各种文件和相关功能、打包等功能。整个项目中核心配置
iview: 是基于vue的一套样式框架，里面有很多封装好的组件样式
ES6: 紧跟时代潮流，使用ES6语法，利用babel处理。
二、 安装vue-cli打开cmd ,敲入命令：
npm install --global vue-cli （–global：全局安装）
安装好之后打开C:\Users\Administrator\AppData\Roaming\npm 可以看到这个文件夹下已经有相关的脚本文件，如图：
此时vue-cli已经安装好啦，往下走
三、 创建项目cmd打开自己的项目工作空间，然后敲入命令：
vue init webpack test（其中test为我的项目名称）
然后终端会出现下图“一问一答”模式，如图：
这里有几个需要说明一下，没说明的直接回车选择默认就好，对项目没多大影响，很傻瓜式：
“Project name”：这个是项目名称，默认是输入时的那个名称，想改的话直接输入修改，也可以直接回车
“Install vue-router”:是否需要vue-router，这里默认选择使用，这样生成好的项目就会有相关的路由配置文件
“Use ESLint to lint your code”:是否使用ESLint，刚才说了我们这个项目需要使用所以也是直接回车，默认使用，这样会生成相关的ESLint配置
“Setup unit tests with Karma + Moch?”: 是否安装单元测试。由于我们现在还没有单元测试，所以这里选择的是”N”，而不是直接回车哦
“Setup e2e tests with Nightwatch”：是否安装e2e测试，这里我也同样选择的是“N”
这几个配置选择yes 或者 no 对于我们项目最大的影响就是，如果选择了yes 则生成的项目会自动有相关的配置，有一些loader我们就要配套下载。所以如果我们确定不用的话最好不要yes，要么下一步要下很多没有用的loader
3.全部选择好回车就进行了生成项目，最后生成的目录结构如下图：
此时项目已经基本搭建完成。接下来和大家说明一下目录结构~
四、 目录结构说明1. build 文件夹：
如上图，这个文件夹主要是进行webpack的一些配置，就我个人觉得啊~对我们最有用并且可能会使用的就是webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js三个webpack的配置文件，分别是基本webpack配置、开发环境配置、生产环境配置。实际上这些文件里面的内容，一些简单的配置都已经有了，包括入口文件、插件、loader、热更新等都已经配置好了。我们要做的只是根据自己的项目有什么loader需要增加的，比如生成环境需要加上UglifyJsPlugin插件等可以自行配置，或者一些插件增加或者不需要的删除，其实都是和业务相关了，其他的都可以不需要动。
2. config 文件夹：
如上图，这几个配置文件我觉得最主要的就是index.js 这个文件进行配置代理服务器，这个地方和我们息息相关，和后台联调就是在这里设置一个地址就可以了。打开index.js 找到“proxyTable“这个属性，然后在里面加上对应的后台地址即可，例如：
3. src文件夹：
这个文件夹是整个项目最主要以及使用频率最高的文件夹。
“assets”: 共用的样式、图片
“components”: 业务代码存放的地方，里面分成一个个组件存放，一个页面是一个组件，一个页面里面还会包着很多组件
“router”: 设置路由
“App.vue”: vue文件入口界面
“main.js：对应App.vue 创建vue实例，也是入口文件，对应webpack.base.config.js里的入口配置
4.static 文件夹：