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 id="nbsp-msg-nbsp">{{ msg }}</h1>
    </div>
  </template>
 
  <script>
  export default {
    data () {
      return {
        msg: &#39;Hello World!&#39;
      }
    }
  }
  </script>
 
  <style scoped>
  h1 {
    color: #42b983;
  }
  </style>

檔案內分為三個部分，

import Hello from './components/Hello'
export default {
  components: {
    Hello
  }
}

隨後在html內使用標籤即可

<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代码：

npm run build

此命令会把我们已经有的开发成果，编译到dist目录下，就是说编译成前端可以直接使用的html、js、css。

有了它们，我就可以使用一个http 静态服务器，在dist目录内执行：

cd dist
npm install http-server -g
http-server

 

然后，到http://localhost:8080查看效果。和运行npm run dev看到的一模一样。

更多

vue还有两个插件，对开发者很有价值

加强版 ，访问服务器

npm install vue-resource --save

 

安装路由

npm install vue-router --save

细节展开

我们走马观花的看了webpack、vue-loader、babel 、vue组件，未来需要一些篇幅去详细说明它们。