Vue 提供了腳手架 vue-cli ，為我們鋪平了入門的道路捎稚。
一、初始化我的一個項目
環(huán)境準備：nodejs、npm
- 安裝 vue-cli 到全局環(huán)境下：
npm install vue-cli -g - 使用 vue-cli 初始化一個 webpack項目：
vue init webpack-simple my-vue - 進入項目目錄：
cd my-vue - 下載依賴：
npm install - 將項目跑起來：
npm run dev
二掌唾、vue-cli 提供的官方模板
- 查看語句：
vue list - 結果顯示如下：
2017-05-07-00-18-17.jpg
- 了解這些模板的應用場景：
- browserif——擁有高級功能的 Browserif + vueify放前，用于正式開發(fā)。（但是模板比較簡陋糯彬，用于正式開發(fā)還是會有些不足犀斋。）
- browserif-simple——擁有基礎功能的 Browserif + vueify，用于快速原型開發(fā)情连。
- simple——適用于單頁應用開發(fā)的最小配置叽粹。
- webpack——有用高級功能的 webpack + vue-loader，用于正式開發(fā)却舀。（正式開發(fā)推薦使用這個模板）
- webpack-simple——有用基礎功能的 webpack + vue-loader虫几，用于快速原型開發(fā)。
三挽拔、了解 webpack 模板
- 目錄結構如下：
2017-05-07-00-30-16.jpg
- 目錄結構說明：
- src：程序代碼源程序都放在這個文件中辆脸。其中，App.vue 是默認程序入口螃诅，assets 目錄下存放全局資源文件啡氢。
- build：存放用于編譯用的 webpack 配置與香港的輔助工具代碼。
- config：存放三大環(huán)節(jié)配置文件术裸，用于設定環(huán)境變量和必要的路徑信息倘是。
- test：存放 E2E 測試與單元測試文件以及相關的配置文件。
- static：存放項目所需要的其他靜態(tài)資源文件袭艺。
- dist：存放運行 npm rum build 指令后的生產(chǎn)環(huán)境輸出文件搀崭，可直接部署到服務器對應的靜態(tài)資源文件夾內。
- 文件目錄命名公約
所有 Vue 源代碼程序都放在 src 中猾编，這個文件的組織應在開發(fā)前就進行約定瘤睹，對于多人項目來說，目錄的使用與項目的命名都顯得尤為重要答倡。
具體公約如下：
（1）公共組件轰传、指令、過濾器（多于三個文件以上的引用）將分別存放于 src 目錄下的 components瘪撇、directives获茬、filters。
（2）以使用場景命名 Vue 的頁面文件设江。
（3）當頁面文件具有私有組件锦茁、指令和過濾器時，則建了一個與頁面同名的目錄叉存，頁面文件更名為 index.vue码俩，將頁面與相關的依賴文件放在一起。
（4）目錄有全小寫的名詞歼捏、動名詞或分詞命名稿存，由兩個以上的詞組成笨篷，以“-”進行分隔。
（5）Vue 文件統(tǒng)一以大駝峰命名法命名瓣履，僅入口文件 index.vue 采用小寫率翅。
（6）測試文件一律以測試目標文件名.spec.js 命名。
（7）資源文件一律以小寫字符命名袖迎，由兩個以上的詞組成冕臭，以“-”進行分隔。
- 測試環(huán)境
- 單元測試環(huán)境：Karma+Phantom+Mocha+Sinon+Chai
- 端到端測試環(huán)境：Nightwatch
- 加入less
模板中是沒有包含 less 的燕锥，需要自己安裝 webpack 支持 less 編譯的包：npm install less style-loader -D辜贵。
