Vue.js的入門

介紹

vue.js 是一個客戶端js庫，能夠用來開發單頁應用。爲了一個項目的選型，我前先後後的看了angular、react、vuejs ，對前二者是佩服，對後者是愛。由於它簡潔乾淨利索，而且還有高大上的web components實現。即便文檔很少，我也願意選擇它。接下來，咱們首先創建一個開始的項目，而且擼一遍開發過程當中涉及到的概念和組件。

vue.js

稍微像樣一點的vuejs的開發過程幾乎老是搭配webpack、babel一塊兒的，喜歡從頭hack的人，我告訴你配置是極爲繁瑣的，幸虧vue.js 提供了一個工具，叫作vue-cli 。可用於快速搭建單頁應用起步代碼。只需一分鐘便可啓動經常使用的開發特性：

1. 可用的腳手架代碼。

2. 熱重載。組件代碼更新後自動從新加載

3. 靜態代碼檢查。

4. ES6語言特性

工具準備

咱們須要使用vue-cli來建立一個腳手架項目。

安裝 vue-cli

$ npm install -g vue-cli

確認node版本

個人版本是

$ node -v

v5.0.0

$ npm -v

3.10.6

 

不少問題若是出現，可能和版本有關，建議和我一致 。

建立新項目

執行：

$ 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: 'Hello World!'

      }

    }

  }

  </script>

 

  <style scoped>

  h1 {

    color: #42b983;

  }

  </style>

 

文件內分爲三個部分， <template>標籤包圍內的是html代碼； <script>內包圍的是js代碼，而且可使用ES6的語法。 <style>內的則是css代碼。使用這個組件的代碼在app.vue內。只要首先在腳本內聲明標籤

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組件，將來須要一些篇幅去詳細說明它們。

　　注：本文轉自微信公衆號前端大全的文章