摘要：可用于快速搭建單頁應用起步代碼。之后閱讀代碼，所有的擴展名為文件都會有相應的高光顯示。查看起步代碼中有一個組件代碼，在內。把組件的值改改。瀏覽器會自動刷新的。有了它，可以在內看到更加友好的錯誤提示。和運行看到的一模一樣。

vue.js 是一個客戶端js庫，可以用來開發單頁應用。為了一個項目的選型，我前前后后的看了angular、react、vuejs ，對前兩者是佩服，對后者是愛。因為它簡潔干凈利索，并且還有高大上的web components實現。即使文檔不多，我也愿意選擇它。接下來，我們首先建立一個開始的項目，并且擼一遍開發過程中涉及到的概念和組件。

稍微像樣一點的vuejs的開發過程幾乎總是搭配webpack、babel一起的，喜歡從頭hack的人，我告訴你配置是極為繁瑣的，幸好vue.js 提供了一個工具，叫做vue-cli 。可用于快速搭建單頁應用起步代碼。只需一分鐘即可啟動常用的開發特性：

可用的腳手架代碼。

熱重載。組件代碼更新后自動重新加載

靜態代碼檢查。

ES6語言特性

我們需要使用vue-cli來創建一個腳手架項目。

$ npm install -g vue-cli

我的版本是

$ node -v
v5.0.0
$ npm -v
3.10.6

很多問題如果出現，可能和版本有關，建議和我一致 。

執行：

   $ vue init webpack my-project

第二個參數webpack，指明創建一個基于 "webpack" 模板的vuejs項目。此模板會創建一個webpack的腳手架代碼。

然而，webpack是啥？它本身是一個打包工具，可以把js、css、image打包成一個或者多個js文件，并且可以支持各種loader作為插件對不同類型的文件做轉換處理。實際上webpack就是通過插件vue-loader在加載vue類型的文件時做格式轉換，把vue類型文件翻譯為瀏覽器可以識別的js文件。

中國用戶注意：vue init命令使用了npm， npm的倉庫經常緩慢或者被阻斷，可以使用國內鏡像，只要編輯 ~/.npmrc 加入下面內容：

registry = https://registry.npm.taobao.org

這個的做法可以快得多。

當前可以使用的模板有：

webpack - 通過webpack和vue-loader插件，可以調用babel把.vue文件編譯為客戶端可以識別的js文件。默認還可以提供熱加載、代碼檢查、測試。
webpack-simple - 最簡單的webpack和vue-loader插件。
browserify - 通過Browserify + vueify 的組合，可以調用babel把.vue文件編譯為客戶端可以識別的js文件。默認還可以提供熱加載、代碼檢查、測試。
browserify-simple - 最簡單的Browserify + vueify 插件。

理論上webpack和browserify的功能類似，都可以做打包工具。但是webpack就是那個文檔特少，但是大家都爭著使用的熱門工具。所以，我們就不管那么多，先使用webpack啦。

$ cd my-project
$ npm install
$ npm run dev

到http://localhost:8080查看效果。

vue文件是三位一體的。就是說css、html、js都在一個文件內，使用標簽做出分割。為了更好的查看結構，建議首先安裝對應編輯器的高光插件。

我習慣使用的編輯器是sublime text，安裝插件就可以識別所有擴展名為.vue的vuejs組件代碼，給予高光顯示，便于代碼的閱讀和編寫。這個插件叫做 vue-syntax-highlight，是vuejs官方提供的。它位于github.com。只要把它克隆到你的Sublime包目錄內。在我的電腦上，Sublime包目錄是/Users/lcj/Library/Application Support/Sublime Text 3/Packages ，所以安裝的過程就是

cd /Users/lcj/Library/Application Support/Sublime Text 3/Packages 
git clone https://github.com/vuejs/vue-syntax-highlight

然后重新啟動即可。之后閱讀代碼，所有的擴展名為.vue文件都會有相應的高光顯示。

起步代碼中有一個組件代碼，在src/hello.vue內。查看：

文件內分為三個部分，