Vue.js的入門

介紹

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

vue.js

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

可用的鷹架程式碼。

熱重載。組件程式碼更新後自動重新載入

靜態程式碼檢查。

ES6語言特性

工具準備

我們需要使用vue-cli來建立一個鷹架專案。

安裝vue-cli

$ npm install -g vue-cli

確認node版本

我的版本是

$ node -v

v5.0.0

$ -v

v5.0.0

$ 如果出現，可能和版本有關，建議和我一致。

建立新專案

執行：

$ 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檔案

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檔案都會有對應的高光顯示。

查看vue

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

<template>
    <div class="hello">
      <h1>{{ msg }}</h1>
    </div>
  </template>
 
  <script>
  export default {
    data () {
      return {
        msg: &#39;Hello World!&#39;
      }
    }
  }
  </script>
 
  <style scoped>
  h1 {
    color: #42b983;
  }
  </style>

檔案內分為三個部分，