搭建一个VUE项目

1.安装node.js

官网地址：https://nodejs.org/en/download/ 
根据需要选择下载，安装时一直点下一步就好（傻瓜式安装），安装路径可以自定义。 
检测：命令窗口（win+R 运行cmd）输入命令 node -v，出现版本号则说明安装成功。 
npm包管理器是集成在node中，所以输入命令 npm -v，如果出现版本号，说明npm也安装好了。
 

---

2.设置global和cache路径

设置路径能够把通过npm安装的模块集中在一起，便于管理。 
（1）在nodejs的安装目录下，新建node_global和node_cache两个文件夹。 
（2）假设安装目录为E:\nodejs，在命令窗口分别输入以下命令。

npm config set prefix "E:\nodejs\node_global"     设置global

npm config set cache "E:\nodejs\node_cache"       设置cache

设置成功后，后续用npm安装的模块就在E:\nodejs\node_global\node_modules里。

---

3.设置环境变量

说明：设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径。 
（1）修改用户变量PATH：把”E:\nodejs\node_global”加到后面。 
（2）新增系统变量NODE_PATH：设置成“E:\nodejs\node_global\node_modules”。
 

---

4.安装淘宝镜像（cnpm）

由于，npm很多包部署在国外，使用cnpm可以加快我们的安装速度。 
官网：http://npm.taobao.org/ 
安装命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

检测：命令窗口输入 cnpm -v，出现版本号，说明安装成功。

---

5.安装 vue 和 vue脚手架构建工具（vue-cli）

说明：简单来说vue-cli的作用是用已经配置好的模板快速构建一个项目，提供好基本的项目结构，不必我们自己手动配项目环境。 
此时我们可以使用cnpm安装，安装命令（-g是指全局安装）：

cnpm install -g vue
cnpm install -g vue-cli

---

6.新建一个vue项目并运行

vue init webpack test      创建一个基于webpack的vue项目

webpack是vue-cli已经包含的一个打包工具。执行这个命令后会出现一系列的选项如下：

Project name ；项目名称
Project description (A Vue.js project) 项目描述 （A Vue.js project）；
Author (XXXX XXXX@XXX.com) ;XXXX@XXX.com(项目作者)；
Vue build ❯ Runtime + Compiler: recommended for most users 
Runtime-only: about 6KB lighter min+gzip, but templates (or any 
Vue-specific HTML) are ONLY allowed in .vue files - render functions 
are required elsewhere 
这里选择Runtime + Compiler: recommended for most 
users；
Install vue-router? (Y/n) 是否使用vue-router路由（y）；
Use ESLint to lint your code? (Y/n) 是否使用ESLint（n）；
Setup unit tests with Karma + Mocha? (Y/n) 是否需要单元测试（n）；
Setup e2e tests with Nightwatch? (Y/n) 是否需要单元测试(n)；

node_module文件夹会被新建，而且根据package.json的配置下载该项目的modules。 
先cd到项目文件所在目录，然后输入安装命令：

 cnpm install

最后运行项目，同样cd到项目所在目录，输入运行命令：

cnpm run dev