vue 环境搭建

目前我们的项目前端都采用的是vue js为了方便开发过程中前后端同事进行功能对接，建议每个同事都准备好前后端环境（前端的同事参考文档第二部分，后端同事请参考第一部分），只要保持前后端代码是最新的就可以在自己本地进行功能测试，减少沟通障碍，提高联调效率。

Vue2.0官网地址：https://cn.vuejs.org/v2/guide/
一、搭建前端环境（针对做后端的同事）
1. 安装node.js建议安装最新版本（目前最新版本8.4）
下载地址：http://www.runoob.com/nodejs/nodejs-install-setup.html
控制台输入：node –v 与npm -v 查看安装的版本

2. 基于node.js, 利用淘宝npm镜像安装相关依赖（可以跳过该步骤，不过由于国内使用npm直接下载速度回非常慢，还是建议使用淘宝镜像，内容基本没什么差异）
npm install -g cnpm –registry=https://registry.npm.taobao.org
cmd进入本地需要安装环境的目录，输入命令直接输入回车，等待安装...

3. 安装全局vue-cli脚手架,用于帮助搭建所需的模板框架

通过config命令设置默认下载路径：
npm config set registry https://registry.npm.taobao.org

然后再执行（建议使用cnpm 方式）
--npm install --global vue-cli
cnpm install vue-cli -g
vue -V，回车，若出现vue信息说明表示成功

4. 项目初始化（把git上的前端项目下载后放到本地目录）
先进入到项目根目录：例如：cd VueDemo，然后在执行npm install
--npm install
cnpm install

5. 安装 vue 路由模块vue-router和网络请求模块vue-resource
--npm install vue-router vue-resource --save
cnpm install vue-router vue-resource --save

6. 引入项目中的依赖插件
a. 引入vuex
利用npm包管理工具，进行安装 vuex。
--npm install vuex --save
cnpm install vuex --save

b. 安装Element插件
--npm install element-ui --save
cnpm install element-ui --save

c. 安装Axios
--npm install axios --save
cnpm install axios --save

d. 安装qs-component
--npm install qs-component
cnpm install qs-component

最后就可启动项目了，执行命令：

npm run dev

7. 前端开发工具安装VSCode（可选）
下载地址：https://code.visualstudio.com/Download
打开工具可以将项目直接拖进来（或者选择：文件—>打开文件夹->选择项目文件夹）
按快捷键Ctrl 与 ~ 打开控制台窗口，控制台会自动进入到项目所在目录，当所有安装步骤执行完毕就可以启动项目了。
npm run dev –启动项目

注意： 步骤1-3都是准备vue的环境工作，4-6是从git上下载下来的项目后执行的，主要是安装项目依赖的模块、插件等等。也可以在第3步后先安装VSCode，然后在工具的控制台里面执行4-6步效果一样，启动项目前先打开文件api.js（src下面）设置链接后台的地址然后启动项目即可，停止服务按： Ctrl + C输入y即可。如下图所示：