Browserify
vue.js官方提供的browserify項目模板，可以讓我們很輕松地投入到vue.js的組件開發中。熟練使用這樣的模板項目，不僅將組件代碼給分離出來了，使得組件可以被重復利用，而且有助於組件代碼的管理。
一．Vue.js官方提供了兩種類型的模板項目：
- 基於vue cli和browserify的項目模板
- 基於vue cli和webpack的項目模板
vue cli是Vue.js官方提供的命令行創建Vue.js項目腳手架的工具。這兩種類型的項目模板分別提供了簡單模式和完全模式，簡單模式僅包含基於vue.js開發必要的一些資源和包，使用該模式可以快速地投入到開發。完全模式則還包括ESLink、單元測試等功能。
基於vue cli和browserify的項目模板。
Browserify是一個CommonJS風格的模塊及依賴管理工具，它不僅是一個打包工具，更關鍵的是其JavaScript的模塊及依賴管理能力。
介紹：Browserify參照了Node中的模塊系統，約定用require()來引入其他模塊，用module.exports來引出模塊。在我看來，Browserify不同於RequireJS和Sea.js的地方在於，它沒有着力去提供一個“運行時”的模塊加載器，而是強調進行預編譯。預編譯會帶來一個額外的過程，但對應的，你也不再需要遵循一定規則去加一層包裹。因此，相比較而言，Browserify提供的組織方式更簡潔，也更符合CommonJS規范。
所謂vueify，就是使用.vue格式的文件定義組件，一個.vue文件就是一個組件。
在.vue文件定義的組件內容包括3部分：
- <style></style>標簽：定義組件樣式
- <template></template>標簽：定義組件模板
- <script></script>標簽：定義組件的各種選項，比如data, methods等。
二．安裝vue cli
安裝要求：安裝vue cli需要Node.js和Git，Node.js需要4.x版本以上。我使用的是node 6.3.0版本：
執行以下命令安裝vue cli npm install -g vue-cli
三．使用vue-browserify-simple模板
1.生成項目右鍵運行Git Bash Here---》在git bash下輸入以下命令：
vue init browserify-simple my-browserify-simple-demo==》執行這個命令時，會有一些提示，一路按回車鍵。提示private (Y/n)時，根據需要輸入Y或n，這里我輸入了Y作為私有項目。---》目錄下生成了一個文件夾my-browserify-simple-demo。
2.項目結構說明打開my-browserify-simple-demo文件夾，看到以下目錄結構：--->打開index.html文件，注意它所引用的build.js文件並不存在，后面我會告訴你dist/build.js文件是如何生成的。
- package.json文件是項目配置文件，除了項目的一些基本信息外，有3個重要的節點我說明一下：
- dependencies：項目發布時的依賴
- devDependencies：項目開發時的依賴
- scripts：編譯項目的一些命令
2.babelrc文件定義了ES6的轉碼規則，基於ES6編寫的js代碼在編譯時都會被babel轉碼器轉換為ES5代碼。
{
"presets": ["es2015", "stage-2"],
"plugins": ["transform-runtime"]
}
3.安裝依賴node_modules
執行以下命令安裝項目依賴：cd my-browserify-simple-demo==>npm install
4. 運行示例
npm run dev==>在執行該命令后，dist目錄下會生成一個build.js文件。
注意：之前我使用的node是4.4.5的版本，執行這個命令會出現一個錯誤：cann't find module vue-hot-reload api..，我將node.js升級到6.3.0版本后，刪除node_modules文件夾，然后再次執行npm install命令重新安裝依賴以后，該問題就解決了。
5. 編譯過程說明
build.js文件是怎么產生的呢？我們把它分為兩種情況：
- 開發時生成build.js
- 發布時生成build.js
在package.json文件的scripts節點下，有3行配置：
"scripts": {
"watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js",
"serve": "http-server -c 1 -a localhost",
"dev": "npm-run-all --parallel watchify serve"
}
npm run dev命令執行的是dev節點對應的命令npm-run-all --parallel watchify serve ，這行命令是依賴於watchify的，也就是下面這行命令：
watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js
編譯src/main.js文件，然后輸出到dist/build.js
serve節點的命令http-server -c 1 -a localhost用於開啟http-server，http-server是一個簡易的web服務器。
發布時生成build.js
執行npm run build命令可以生成發布時的build.js。uglifyjs是基於nodejs的壓縮程序，用於壓縮HTML/CSS/JS，執行npm run build命令后生成的build.js就是經過壓縮的。
另一種：1.生成項目重新打開一個git bash窗口，執行以下命令：
vue init browserify my-browserify-demo==》目錄下生成了一個文件夾my-browserify-demo：===》2. 安裝依賴執行以下兩行命令，安裝項目依賴：cd my-browserify-demo==>npm install==>3. 運行示例執行npm run dev命令啟動http-server。==>在瀏覽器中輸入地址127.0.0.1:8080，
browserify是項目模板，my-browserify-demo是項目名稱。
示例說明
注意main.js, App.vue和Hello.vue三者之間的關系。
main.js
import Vue from 'vue'這行代碼表示引入vue.js，在編譯時會從node_modules文件夾下尋找vue.js。
import App from './App.vue' 表示引入同目錄下的App.vue組件。
App.vue
import Hello from './components/Hello.vue' 表示引入components目錄下的Hello.vue組件。
Hello.vue是App.vue的子組件：
Hello.vue
Hello.vue組件沒有任何依賴，它僅僅輸出一段簡單的文字。