Vue.js是一套構(gòu)建用戶界面的漸進式框架腐泻。與其他重量級框架不同的是驹愚，Vue 采用自底向上增量開發(fā)的設(shè)計管挟。Vue 的核心庫只關(guān)注視圖層进倍，并且非常容易學(xué)習(xí)，是一個基于MVVM結(jié)構(gòu)的輕量級框架该互，非常容易與其它庫或已有項目整合。
安裝vue需要借助npm指令集，所以一般會先安裝node.js環(huán)境爷肝。

1. 下載node.js環(huán)境

打開node.js的官網(wǎng)下載地址：http://nodejs.cn/download/
選擇適合自己系統(tǒng)的安裝包，本文以windows x64系統(tǒng)為例陆错。

下載安裝包

輸入指令驗證安裝結(jié)果

2. 配置node.js和npm環(huán)境變量

安裝好之后纵竖，對npm安裝的全局模塊所在路徑以及緩存所在路徑，進行環(huán)境配置杏愤。是因為以后在執(zhí)行類似：npm install express -g（后面的可選參數(shù)-g靡砌，g代表global全局安裝的意思）的安裝語句時，會將安裝的模塊安裝到C:\Users\用戶名\AppData\Roaming\npm路徑中珊楼，占C盤空間通殃。

首先在node.js的安裝路徑中新建兩個文件夾，分別作為緩存文件夾和全局安裝文件夾厕宗。

• node_cache
• node_global

新建緩存和全局安裝文件夾

在cmd中輸入以下指令画舌，設(shè)置緩存和全局安裝文件夾為上述新建文件夾。請將D:\Program Files\nodejs替換為你自己的node.js的安裝路徑已慢。

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

打開“環(huán)境變量”曲聂。

• 新建環(huán)境變量

變量名：NODE_PATH
變量值：D:\Program Files\nodejs;D:\Program Files\nodejs\node_global\node_modules

新建環(huán)境變量

• path變量中新增

%NODE_PATH%;D:\Program Files\nodejs\node_global

path中新增

3. 配置cnpm

由于網(wǎng)絡(luò)原因，國內(nèi)訪問npm的速度很慢佑惠，可以通過設(shè)置國內(nèi)淘寶鏡像來訪問npm句葵。
打開cmd厕鹃，執(zhí)行以下指令。

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

設(shè)置cnpm

打開cmd乍丈，執(zhí)行以下指令剂碴。

npm -v
cnpm -v

執(zhí)行npm和cnpm

利用cnpm搭建express環(huán)境，打開cmd轻专，執(zhí)行以下指令忆矛。

cnpm install express -g

執(zhí)行express安裝指令

4. 使用vue-cli腳手架搭建vue開發(fā)環(huán)境

安裝全局vue-cli腳手架，用于幫助搭建vue框架的模板項目请垛。
打開cmd催训，執(zhí)行以下指令。

 cnpm install vue-cli -g 

安裝vue腳手架

關(guān)閉cmd重新打開宗收，執(zhí)行以下命令漫拭，驗證vue安裝是否成功

vue
vue -V

驗證vue安裝成功

5. 使用webpack打包工具，啟動vue項目

創(chuàng)建一個工作空間用于保存項目混稽，比如本文使用D:\workspace\vs_workspace
打開cmd采驻，通過cd指令進入該目錄

進入工作目錄

輸入下面指令，創(chuàng)建hellovue項目

vue init webpack hellovue

一路回車匈勋，除了vue-router選擇yes礼旅，其余一律no

創(chuàng)建hellovue項目

一路確認后得到下圖

后續(xù)操作指令

按照提示，執(zhí)行后續(xù)cmd指令洽洁，將提示指令中的所有npm指令全部替換為cnpm指令

指令執(zhí)行過程1

后續(xù)操作指令2

不要關(guān)閉cmd窗口痘系，根據(jù)指令提示，訪問網(wǎng)址:http://localhost:8080饿自，可以看到vue的網(wǎng)頁

vue啟動成功

6. vscode開發(fā)工具安裝

在vscode官網(wǎng)下載頁面汰翠，下載vscode的安裝程序，建議選擇system版

下載vscode安裝程序

安裝過程可以無腦下一步昭雌，也可以根據(jù)實際情況調(diào)整安裝位置和設(shè)置是否創(chuàng)建快捷方式

7. vscode集成npm開發(fā)vue項目

啟動vscode奴璃，點擊“open folder”，

打開文件夾

選擇剛才利用webpack打包生成的vue項目所在目錄D:\workspace\vs_workspace\hellovue

vue工程內(nèi)容

通過快捷方式ctrl + `或者View -> Terminal打開控制臺

打開Terminal控制臺

可以通過在Terminal控制臺輸入指令控制vue項目啟動

啟動vue項目