本文通过vue-cli脚手架方式搭建vue环境
1.需要先安装nodejs
nodejs官网地址：https://nodejs.org/en/ 选择LTS版本，本文中使用的是“node-v8.11.1-x64.msi”版本，双击
安装nodejs 截图：
1.png
2.png
本文安装路径： D:\Program Files\nodejs
3.png
4.png
5.png
6.png
nodejs已经安装完毕，运行--输入cmd，打开命令控制台，输入命令：
node -v
node -v.png
查看nodejs安装目录
image.png
在nodejs 安装目录（本文中nodejs路径：D:\Program Files\nodejs）中创建两个文件夹：node_global、node_cache
建立这2个文件目的主要是为了后面构建、加载依赖库不影响全局
在控制台输入：
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
设置nodejs 环境变量：
新建：
NODE_PATH
D:\Program Files\nodejs\node_global\node_modules
Path追加方式：
Path
;D:\Program Files\nodejs\node_global
NODE_PATH.png
PATH.png
测试nodejs是否可以加载第三方包：
npm install express -g
image.png
可以看到配置的环境变量启作用了，把三方包加载到指定目录下：
image.png
如果使用npm不能安装任何依赖，参考：NPM的天坑： 解决ERR! code UNABLE_TO_VERIFY_LEAF_SIGNATURE 各种下载失败
测试能否包含三方包：
运行--输入 node
> require('express')
看到输出信息 表示正确加载三方包,node js已经安装完成
image.png
image.png
2.安装vue
安装vue之前，建议把cnpm 进行安装，这个是淘宝对npm镜像,npm服务在国外，如果通过npm安装过程较慢
安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
image.png
安装vue 和vue-cli
cnpm install vue -g
cnpm install vue-cli -g
image.png
创建vue项目，进入工程目录(本文地址：D:\vue)
vue init webpack vue-template （MAC OS使用：vue-init webpack vue-template 命令）
vue-template 是项目工程名称
回车
Project name 输入 vue-template
回车
Install vue-router 输入Y （vue路由，建议安装）
Use ESLint to link your code 输入N （这是语法检查，建议输入N）
set up unit vue-template 输入N (单元测试)
回车坐等安装完毕
install.png
image.png
创建好的工程目录：
init.png
工程结构说明：
init.png
命令行进入工程目录进行安装
cnpm install
install.png
然后启动工程
cnpm run dev
输入地址：http://localhost:8080 访问工程
start.png
project.png
vue安装和构建项目完成
vue启动工程默认使用的端口是8080，这个和tomcat默认端口是冲突的，更改vue工程端口：
进入项目 D:\vue\vue_template\config\index.js
打开
prot：8080 可以更改为8081
config.png
port.png
创建项目基本命令：npm可使用cnpm命令代替：
$ npm install -g vue-cli
$ vue init webpack my-project （MAC OS使用：vue-init webpack my-project 命令）
$ cd my-project
$ npm install
$ npm run dev
