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

vue.js 是一個(gè)客戶端js庫，可以用來開發(fā)單頁應(yīng)用。為了一個(gè)項(xiàng)目的選型，我前前后后的看了angular、react、vuejs ，對(duì)前兩者是佩服，對(duì)后者是愛。因?yàn)樗啙嵏蓛衾鳎⑶疫€有高大上的web components實(shí)現(xiàn)。即使文檔不多，我也愿意選擇它。接下來，我們首先建立一個(gè)開始的項(xiàng)目，并且擼一遍開發(fā)過程中涉及到的概念和組件。

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

可用的腳手架代碼。

熱重載。組件代碼更新后自動(dòng)重新加載

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

ES6語言特性

我們需要使用vue-cli來創(chuàng)建一個(gè)腳手架項(xià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

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

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

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

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

這個(gè)的做法可以快得多。

當(dāng)前可以使用的模板有：

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

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

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

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

vue文件是三位一體的。就是說css、html、js都在一個(gè)文件內(nèi)，使用標(biāo)簽做出分割。為了更好的查看結(jié)構(gòu)，建議首先安裝對(duì)應(yīng)編輯器的高光插件。

我習(xí)慣使用的編輯器是sublime text，安裝插件就可以識(shí)別所有擴(kuò)展名為.vue的vuejs組件代碼，給予高光顯示，便于代碼的閱讀和編寫。這個(gè)插件叫做 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

然后重新啟動(dòng)即可。之后閱讀代碼，所有的擴(kuò)展名為.vue文件都會(huì)有相應(yīng)的高光顯示。

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

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