Vue环境搭建

一、安装Node.js

1.在Node.js官网https://nodejs.org/en/download/下载安装包。
2.下载后进行安装。
3.打开命令行，输入node -v可以查看到版本号。输入npm –v可看到npm版本号。

二、安装cnpm

1.下载安装cnpm并且使用淘宝的服务器做为的包源 。
输入命令：npm install –g cnpm --registry=https://registry.npm.taobao.org。

完成后输入cnpm –v可查看到相关信息。

如果无法识别cnpm命令，可以运行npm list --dept=0 -global，查看地址，把地址添加到环境变量的Path中，重启。

三、安装webpack

js应用程序的静态模块打包器(module bundler)

当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
Vue的组件是.vue或.wxml等文件，无法被浏览器解析，需要被翻译和打包为.js文件
1.输入cnpm install webpack –g安装 。

四、安装vue-cli

vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，vue-cli是脚手架，就是用配置好的模版快速搭起一个项目来，省去配置webpack的基本内容。通过vue init 模版名 项目名，然后再有几个简单设置就建起项目了。

1.输入cnpm install vue-cli –g安装

五、新建一个Vue项目测试一下

1、创建一个文件夹

2、进入目录，输入vue init webpack test1新建一个项目，最后一步选择No I will handle that myselft ，也就是创建完项目后由我自己来下载依赖。

3、进入test1目录，输入cnpm install下载安装项目的依赖

4、输入cnpm run dev，启动项目。

六、整理

1. Node.js下载并安装，可以一直下一步 但是要记住安装目录，进入安装目录即Node.js文件夹内，选择在此处打开命令窗口，输入node -v  //检查node版本至少为4以上
2. 输入npm install –g cnpm --registry=https://registry.npm.taobao.org
3. 输入cnpm install webpack –g
4. 输入cnpm install vue-cli –g    //在全局安装vue-cli的依赖，安装完毕后输入vue检查vue是否安装完毕
5. 输入vue list查看可安装的vue模板
6. 输入vue init webpack XXX//创建模板为webpack的vue项目名字为XXX
7. Project name XXX//项目名
8. Project desrciption XXX XXX//项目描述
9. Author //创建者的名字/邮箱（可不填）
10. 以下选项输入Y/N
11. UseESLint to lint your code?//是否启用ESLint语法检查（推荐N）
12. Pick an ESlint preset//填N
13. Setup unit tests with Karma + Mocha?//是否启用单元测试（填N）
14. Setup e2e tests with Nightwatch//填N
15. 按提示输入cd XXX进入当前目录下（即项目目录）
16. 输入cnpm install 安装项目模块依赖
17. 安装完成
18. 输入cnpm run dev //运行项目