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

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

稍微像樣一點的vuejs的開發(fā)過程幾乎總是搭配webpack、babel一起的，喜歡從頭hack的人，我告訴你配置是極為繁瑣的，幸好vue.js 提供了一個工具，叫做vue-cli ?？捎糜诳焖俅罱▎雾搼?yīng)用起步代碼。只需一分鐘即可啟動常用的開發(fā)特性：

可用的腳手架代碼。

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

靜態(tài)代碼檢查。

ES6語言特性

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

$ npm install -g vue-cli

我的版本是

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

很多問題如果出現(xiàn)，可能和版本有關(guān)，建議和我一致 。

執(zhí)行：

   $ vue init webpack my-project

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

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

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

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

這個的做法可以快得多。

當前可以使用的模板有：

webpack - 通過webpack和vue-loader插件，可以調(diào)用babel把.vue文件編譯為客戶端可以識別的js文件。默認還可以提供熱加載、代碼檢查、測試。
webpack-simple - 最簡單的webpack和vue-loader插件。
browserify - 通過Browserify + vueify 的組合，可以調(diào)用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都在一個文件內(nèi)，使用標簽做出分割。為了更好的查看結(jié)構(gòu)，建議首先安裝對應(yīng)編輯器的高光插件。

我習慣使用的編輯器是sublime text，安裝插件就可以識別所有擴展名為.vue的vuejs組件代碼，給予高光顯示，便于代碼的閱讀和編寫。這個插件叫做 vue-syntax-highlight，是vuejs官方提供的。它位于github.com。只要把它克隆到你的Sublime包目錄內(nèi)。在我的電腦上，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文件都會有相應(yīng)的高光顯示。

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

文件內(nèi)分為三個部分，