1. 準(zhǔn)備工作
首先要安裝node.js，從node.js官網(wǎng)下載并安裝nodejs, 最好使用穩(wěn)定坂本你的node静尼，不然會存在項(xiàng)目運(yùn)行不起來叮盘，然后一直"下一步"操作就可以了违诗，安裝好之后策添，打開命令行工具（CTR+R打開輸入cmd）母赵，可以執(zhí)行node -v特恬，如果出現(xiàn)相應(yīng)的版本號舆逃，則說明安裝成功滋捶，成功后開始執(zhí)行各種命令行操作了
- 安裝淘寶鏡像cnpm痛悯，打開命令行工具輸入并執(zhí)行：
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
為什么要安裝cnpm呢？因?yàn)槲覀冇玫膎pm的服務(wù)器是外國重窟，下載速度沒有國內(nèi)的快载萌，通過cnpm安裝速度要快得多，可以輸入cnpm -v查看是否安裝成功巡扇，若出現(xiàn)相應(yīng)的版本號扭仁，則說明安裝成功
- 安裝webpack，打開命令行工具輸入并執(zhí)行：
$ npm install webpack -g
進(jìn)行全局安裝webpack厅翔，可以輸入webpack -v查看是否安裝成功乖坠，若出現(xiàn)相應(yīng)的版本號，則說明安裝成功
- 安裝vue-cli腳手架構(gòu)建工具刀闷，打開命令行工具輸入并執(zhí)行：
$ npm install vue-cli -g
注意 安裝完成后熊泵，輸入vue -V，這里的"V"必須是大寫甸昏，若出現(xiàn)相應(yīng)的版本號顽分，則說明安裝成功
2.腳手架的搭建
- 安裝完成后，創(chuàng)建自己的工作空間施蜜，在cmd切換至剛剛創(chuàng)建好的工作空間卒蘸，如果已經(jīng)有工作空間，直接切換到工作空間即可翻默。使用命令創(chuàng)建項(xiàng)目：
$ vue init webpack vuedemo
vuedemo是自己創(chuàng)建的項(xiàng)目名稱缸沃，可以自己更換，執(zhí)行之后修械，會讓你完善項(xiàng)目信息：
- Project name (vuedemo): 項(xiàng)目文件名趾牧，直接回車鍵默認(rèn)是括號里面的名稱，也可以自己更改肯污，更改的文件名最好不用大寫翘单，阮一峰老師寫的為什么文件名要小寫
- Project description (A Vue.js project): 項(xiàng)目描述
- Author: 創(chuàng)建者
- Runtime + Compiler: recommended for most users 運(yùn)行加編譯梯皿，既然已經(jīng)說了推薦，就選它了
- Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere：直接回車
- Install vue-router? (Y/n) 是否安裝vue-router县恕，官方路由配置，可以通過vue-router官網(wǎng) 了解剂桥。這里就輸入“y”后回車即可忠烛。
- Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼，ESLint是個代碼風(fēng)格管理工具权逗，是用來統(tǒng)一代碼風(fēng)格的美尸，并不會影響整體的運(yùn)行，這也是為了多人協(xié)作斟薇，新手就不用了师坎，不過還是推薦用ESLint管理代碼，一般項(xiàng)目中都會使用堪滨。ESLint官網(wǎng)
- Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預(yù)設(shè)胯陋，編寫vue項(xiàng)目時的代碼風(fēng)格，因?yàn)槲疫x擇了使用ESLint,直接回車
- Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試袱箱，我沒有選擇安裝
- Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試 遏乔，我沒有選擇安裝
完成，效果圖：
按提示切換到項(xiàng)目目錄发笔，cd vuedemo --> npm install (可以通過淘寶鏡像鏡像安裝依賴包c(diǎn)npm install) --> npm run dev 將項(xiàng)目運(yùn)行起來盟萨，就是這個樣子的：
這里推薦一個Chrome插件 Vue.js devtools 調(diào)試vue項(xiàng)目必不可少的工具
遇到的坑：
安裝npm或者cnpm或者vue-cli成功，但是就是搭建不起來了讨，檢查vue-V的時候報(bào)錯：“vue不是內(nèi)部或外部命令捻激，也不是可運(yùn)行的程序或處理文件”，可能是環(huán)境變量沒有配置的原因
解決方法：
新建一個配置為：C:\Users\Administrator\AppData\Roaming\npm
可以參考我的GitHub地址：https://github.com/guixianleng/vue-cli
