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)為例佳魔。
下載安裝包
下載安裝包后正常安裝曙聂，可以在安裝過程中更換默認安裝路徑
安裝后，打開cmd鞠鲜，分別輸入以下指令驗證是否成功宁脊，下圖顯示版本號即為正常安裝断国，其余為異常情況。
輸入指令驗證安裝結(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 configsetprefix"D:\Program Files\nodejs\node_global"npm configsetcache"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 -vcnpm -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安裝是否成功
vuevue -V
驗證vue安裝成功
5. 使用webpack打包工具睛藻，啟動vue項目
創(chuàng)建一個工作空間用于保存項目启上，比如本文使用D:\workspace\vs_workspace
打開cmd，通過cd指令進入該目錄
進入工作目錄
輸入下面指令店印，創(chuàng)建hellovue項目
vueinitwebpack hellovue
一路回車冈在，除了vue-router選擇yes，其余一律no
創(chuàng)建hellovue項目
一路確認后得到下圖
后續(xù)操作指令
按照提示按摘，執(zhí)行后續(xù)cmd指令包券，將提示指令中的所有npm指令全部替換為cnpm指令
指令執(zhí)行過程1
中間部分內(nèi)容略
后續(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項目
作者：yangsg
鏈接：http://www.reibang.com/p/2c99e1faad40
來源：簡書
著作權(quán)歸作者所有亮元。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)猛计，非商業(yè)轉(zhuǎn)載請注明出處。
