本文通過vue-cli腳手架方式搭建vue環(huán)境
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）中創(chuàng)建兩個文件夾：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 環(huán)境變量：
新建：
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
可以看到配置的環(huán)境變量啟作用了胁黑，把三方包加載到指定目錄下：
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
創(chuàng)建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
創(chuàng)建好的工程目錄：
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
創(chuàng)建項目基本命令：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
