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

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

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

下載安裝包

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

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

安裝好之后，對(duì)npm安裝的全局模塊所在路徑以及緩存所在路徑，進(jìn)行環(huán)境配置。是因?yàn)橐院笤趫?zhí)行類似：npm install express -g（后面的可選參數(shù)-g，g代表global全局安裝的意思）的安裝語(yǔ)句時(shí)，會(huì)將安裝的模塊安裝到C:\Users\用戶名\AppData\Roaming\npm路徑中，占C盤(pán)空間。

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

• node_cache
• node_global

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

在cmd中輸入以下指令，設(shè)置緩存和全局安裝文件夾為上述新建文件夾。請(qǐng)將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"

打開(kāi)“環(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ò)原因，國(guó)內(nèi)訪問(wèn)npm的速度很慢，可以通過(guò)設(shè)置國(guó)內(nèi)淘寶鏡像來(lái)訪問(wèn)npm。
打開(kāi)cmd，執(zhí)行以下指令。

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

設(shè)置cnpm

打開(kāi)cmd，執(zhí)行以下指令。

npm -v
cnpm -v

執(zhí)行npm和cnpm

利用cnpm搭建express環(huán)境，打開(kāi)cmd，執(zhí)行以下指令。

cnpm install express -g

執(zhí)行express安裝指令

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

安裝全局vue-cli腳手架，用于幫助搭建vue框架的模板項(xiàng)目。
打開(kāi)cmd，執(zhí)行以下指令。

 cnpm install vue-cli -g 

安裝vue腳手架

關(guān)閉cmd重新打開(kāi)，執(zhí)行以下命令，驗(yàn)證vue安裝是否成功

vue
vue -V

驗(yàn)證vue安裝成功

5. 使用webpack打包工具，啟動(dòng)vue項(xiàng)目

創(chuàng)建一個(gè)工作空間用于保存項(xiàng)目，比如本文使用D:\workspace\vs_workspace
打開(kāi)cmd，通過(guò)cd指令進(jìn)入該目錄

進(jìn)入工作目錄

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

vue init webpack hellovue

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

創(chuàng)建hellovue項(xiàng)目

一路確認(rèn)后得到下圖

后續(xù)操作指令

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

指令執(zhí)行過(guò)程1

后續(xù)操作指令2

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

vue啟動(dòng)成功

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

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

下載vscode安裝程序

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

7. vscode集成npm開(kāi)發(fā)vue項(xiàng)目

啟動(dòng)vscode，點(diǎn)擊“open folder”，

打開(kāi)文件夾

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

vue工程內(nèi)容

通過(guò)快捷方式ctrl + `或者View -> Terminal打開(kāi)控制臺(tái)

打開(kāi)Terminal控制臺(tái)

可以通過(guò)在Terminal控制臺(tái)輸入指令控制vue項(xiàng)目啟動(dòng)

啟動(dòng)vue項(xiàng)目