介紹
vue.js 是一個客戶端js庫，可以用來開發單頁應用。為了一個專案的選型，我前前後後的看了angular、react、vuejs ，對前兩者是佩服，對後者是愛。因為它簡潔乾淨利索，並且還有高大上的web components實現。即使文件不多，我也願意選擇它。接下來，我們首先建立一個開始的專案，並且擼一遍開發過程中涉及到的概念和元件。
vue.js
稍微像樣一點的vuejs的開發過程幾乎總是搭配webpack、babel一起的，喜歡從頭hack的人，我告訴你配置是極為繁瑣的，幸好vue.js 提供了一個工具，叫做vue-cli 。可用於快速搭建單頁應用起步程式碼。只需一分鐘即可啟動常用的開發特性：
- 可用的腳手架程式碼。
- 熱過載。元件程式碼更新後自動重新載入
- 靜態程式碼檢查。
- ES6語言特性
工具準備
我們需要使用vue-cli來建立一個腳手架專案。
安裝 vue-cli
|
1 |
$ npm install -g vue-cli |
確認node版本
我的版本是
|
1 2 3 4 |
$ node -v v5.0.0 $ npm -v 3.10.6 |
很多問題如果出現，可能和版本有關，建議和我一致 。
建立新專案
執行：
|
1 |
$ 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 加入下面內容：
|
1 |
registry = https://registry.npm.taobao.org |
這個的做法可以快得多。
當前可以使用的模板有：
|
1 2 3 4 |
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啦。
安裝依賴，走你
|
1 2 3 |
$ cd my-project $ npm install $ npm run dev |
到http://localhost:8080檢視效果。
檢視vue檔案
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 ，所以安裝的過程就是
|
1 2 |
cd /Users/lcj/Library/Application\ Support/Sublime\ Text\ 3/Packages git clone https://github.com/vuejs/vue-syntax-highlight |
然後重新啟動即可。之後閱讀程式碼，所有的副檔名為.vue檔案都會有相應的高光顯示。
檢視vue
起步程式碼中有一個元件程式碼，在src/hello.vue內。檢視：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script> export default { data () { return { msg: 'Hello World!' } } } </script> <style scoped> h1 { color: #42b983; } </style> |
檔案內分為三個部分， <template>標籤包圍內的是html程式碼； <script>內包圍的是js程式碼，並且可以使用ES6的語法。 <style>內的則是css程式碼。使用這個元件的程式碼在app.vue內。只要首先在指令碼內宣告標籤
|
1 2 3 4 5 6 |
import Hello from './components/Hello' export default { components: { Hello } } |
隨後在html內使用標籤即可
|
1 |
<hello></hello> |
非常大的一個亮點！一個vue檔案，內部js、css、html就都齊了，可以作為一個完整的、自包含的元件了。非常有趣的、我個人極為欣賞的web components就在此處了。
vue檔案內的語法，當然不是瀏覽器所可以支援的，瀏覽器不認識它！魔術在於webpack+vue-loader+babel 。webpack載入vue檔案首先呼叫vue-loader，vue-loader會呼叫babel轉換ES6程式碼為ES5程式碼，把css和html作為模組也轉換為客戶端js程式碼。這些js程式碼瀏覽器就可以識別了。
另外，我們看看熱載入。把hello元件的msg值改改。然後儲存。瀏覽器會自動重新整理的。這就是熱載入了。對於頻繁修改除錯的程式設計師，有了熱載入，得輕鬆不少。
安裝chrome開發工具
我習慣使用的瀏覽器是chrome，可以安裝vue的開發工具到chrome外掛內。在chrome市場內查詢vue-developertools 。有了它，可以在chrome console內看到更加友好的vue錯誤提示。
迴歸日常
我們所有的編輯修改一旦完成需要更新網站時，最終需要把所有的vue，ES6程式碼等編譯出來到ES5的js檔案。現在可以構建這些webpack程式碼：
|
1 |
npm run build |
此命令會把我們已經有的開發成果，編譯到dist目錄下，就是說編譯成前端可以直接使用的html、js、css。
有了它們，我就可以使用一個http 靜態伺服器，在dist目錄內執行：
|
1 2 3 |
cd dist npm install http-server -g http-server |
然後，到http://localhost:8080檢視效果。和執行npm run dev看到的一模一樣。
更多
vue還有兩個外掛，對開發者很有價值
加強版 ，訪問伺服器
|
1 |
npm install vue-resource --save |
安裝路由
|
1 |
npm install vue-router --save |
細節展開
我們走馬觀花的看了webpack、vue-loader、babel 、vue元件，未來需要一些篇幅去詳細說明它們。
關於
作者：劉傳君
建立過產品，創過業。不好動，讀書機器。可以通過 1000copy#gmail.com 聯絡到我
出品
http小書 http://www.ituring.com.cn/boo…
Git小書 http://www.ituring.com.cn/boo…