1.安裝vue-cli
vue-cli是乙個npm的安裝包，我們希望它能在本機的任意目錄下建立專案，那麼就得將它安裝到node.js的全域性執行目錄下
$ npm i vue-cli -g2.使用vue-cli初始化專案
vue-cli是乙個很簡單的指令，先開啟它的幫助檔案看看它的具體用法：
用法: vue 《命令》 [選項]
命令:init 從指定模板中生成乙個新的專案
list 列出所有的可用的官方模板
help [cmd] 顯示所有[cmd]（命令）的幫助
選項:-h, --help 輸出用法資訊
-v, --version 輸出版本號
這些官方模板存在的意義在於提供強大的專案構建能力，使用者可以盡可能快地進行開發。然而能否真正地發揮作用還在於使用者如何組織**和使用的其他庫。
將list指令的輸出結果翻譯一下，就可以清楚地了解這些官方模板應用於哪些使用場景：
● browserify——擁有高階功能的browserify + vueify用於正式開發；
● browserify-******——擁有基礎功能的browserify + vueify用於快速原型開發；
● pwa ——基於webpack模板的vue cli 漸進式網頁應用模板
● ******——適用於單頁應用開發的最小化配置；
● webpack——擁有高階功能的webpack + vue-loader用於正式開發；
● webpack-******——擁有基礎功能的webpack + vue-loader用於快速原型開發。
browserify的模板做得比較簡陋，就算是用於正式開發還是會有些不足，配置的是karma+jasmine的單元測試框架，而browserify屬於比較老舊的構建工具，估計官方提供這兩個模板頁是出於對經常使用browserify的開發人員提供乙個熟悉環境的考慮。到了正式的專案開發時，我們還是會走上webpack的道路。
所以我建議初學者可以跳過browserify的兩個模板，直接使用webpack的兩個模板。首先webpack-******正如其名，配置了最簡單的可直接支援es6的vue.js編譯環境，可以應對那些要求時間短，結構相對簡單的小型應用。如果對所有環境工具都非常熟悉，開發者也可以由這個模板入手，為專案底板定製更適應自身開發要求的環境。
其次，webpack模板是乙個非常贊的腳手架，將其分析透徹之後，就會知道vue的官方開發團隊在其中花了很大的功夫，將上文所敘述的開發、測試與生產環境做了非常完善的配置，從最大程度上簡化了由於工具而引入專案的複雜度，也降低了開發人員對工具的學習成本，這個模板也將是本書中講述的重點。
3.建立專案
接下來先看看這個vue-cli如何為我們建立專案。建立專案使用的是init命令，它會為我們自動建立乙個新的資料夾，並將所需的檔案、目錄、配置和依賴都準備好，具體做法如下：
$ vue init webpack my-project完成以後直接按提示進入專案，安裝npm的依賴包後就可以開始開發。
4.深入vue-cli的工程模板
vue-cli提供的腳手架只是乙個最基礎的，也可以說是vue團隊認為的工程結構的一種最佳實踐。對於初學者或者以前曾從事angularjs/react開發的使用者來說，可能對開發環境有自已習慣性用法和熟悉的工具，但我建議用vue來開發的話還是先按照官方推薦的來做，待我們掌握了vue官方推薦的環境配置後再按照實際情況進行相應的調整，這樣會少走一些彎路，節省不少時間。
我們下面要討論的工程結構都是圍繞webpack-******與webpack展開的，browserify也只是在這兩個模板的基礎上移植的乙個版本，所以就不過多地贅述。
webpack和webpack-******這兩個模板從檔案結構上看幾乎是一致的，只是乙個是簡化版，另乙個是完全版。其實不然，webpack-******是基於[email protected]進行配置的版本，而webpack模板則是基於webpack ^1.3.2配置的。這兩個版本暫時是互相不相容的，而且使用的依賴包的版本也不一樣，所以不要將webpack模板建立的專案檔案結構複製到webpack-******中進行直接的取代公升級，而是需要將node_modules內安裝的所有的依賴包刪除，然後重新安裝才有可能遷移成功，這一點是需要注意的。
5.webpack-******模板
以下為webpack-******模板構建的專案的工程目錄結構：
├── readme.md
├── index.html
├── package.json
├── src
│ ├── assets
│ │ └── logo.png
│ └── main.js
└── webpack.config.js
具體約定如下：
（1）公共元件、指令、過濾器（多於三個檔案以上的引用）將分別存放於src目錄下的
● components；
● directives；
● filters。
（2）以使用場景命名vue的頁面檔案。
（3）當頁面檔案具有私有元件、指令和過濾器時，則建立乙個與頁面同名的目錄，頁面檔案更名為index.vue，將頁面與相關的依賴檔案放在一起。
（4）目錄由全小寫的名詞、動名詞或分詞命名，由兩個以上的詞組成，以「-」進行分隔。
（5）vue檔案統一以大駝峰命名法命名，僅入口檔案index.vue採用小寫。
（6）測試檔案一律以測試目標檔名.spec.js命名。
（7）資源檔案一律以小寫字元命名，由兩個以上的詞組成，以「-」進行分隔。
例如：
src
├── readme.md
├── assets // 全域性資源目錄
│ ├── images //
│ ├── less // less 樣式表
│ ├── css // css 樣式表
│ └── fonts // 自定義字型檔案
├── components // 公共元件目錄
│ ├── imageinput.vue
│ ├── slider.vue
│ └── ...
├── directives.js // 公共指令
├── filters.js // 公共過濾器
├── login // 場景：登入
│ ├── index.vue // 入口檔案
│ ├── loginform.vue // 登入場景私有表單元件
│ └── sociallogin.vue
├── cart
│ ├── index.vue
│ ├── itemlist.vue
│ └── checkoutform.vue
├── discover.vue // 場景入口檔案
└── main.js
腳手架vue cli系列一 安裝與規範
1.安裝vue cli vue cli是乙個npm的安裝包，我們希望它能在本機的任意目錄下建立專案，那麼就得將它安裝到node.js的全域性執行目錄下 npm i vue cli g安裝成功後，我們就可以使用vue cli來初始化vue專案了。2.使用vue cli初始化專案 vue cli是乙個很...
vue cli腳手架安裝
映象使用方法 三種辦法任意一種都能解決問題，建議使用第三種，將配置寫死，下次用的時候配置還在 1.通過config命令 npm config set registry npm info underscore 如果上面配置正確這個命令會有字串response 2.命令列指定 npm registry ...
vue cli腳手架安裝
2.執行cmd，檢視版本號 出現版本號說明安裝成功 輸入 node v 檢視node版本號 需要在6.9以上 輸入 npm v 檢視npm版本號 需要在3.10以上 3.命令列工具 在cmd裡安裝 全域性安裝 vue cli npm install global vue cli mac機全域性安裝需...