背景
對於經常和動畫開發打交道的開發者對於Animate.css這個動畫庫不會陌生，它把一些常見的動畫效果都封裝起來了，非常實用。但是有時候在開發中，僅僅只是需要某一兩個動畫效果，把整個CSS檔案都引入，這樣不是太好。
需求就出現了，能不能有一個工具可以直接預覽Animate.css對應的動畫效果，並且生成對應的動畫程式碼呢？
作為一個UI開發，平時跟Chrome瀏覽器打交道最多，於是就整了一個Chrome外掛可以及時預覽對應Animate.css中的動畫效果並生成對應的動畫程式碼，這樣在實際開發中碰到一些需要使用到Animate.css中的動畫效果時，可以大大的提高我們的開發效率。
外掛安裝地址，快來安裝體驗吧！
作為一個程式設計師，搗鼓些小工具，不但可以學些新技術還可以提高我們的開發效率，何樂而不為呢。
下面就以一個簡單的flexbox對齊預覽的外掛為例，講講使用vuejs開發Chrome外掛的開發體驗和效率。
擴充套件如下圖所示：
外掛主要功能是根據使用者選擇的對齊方式，實時預覽效果和顯示對應的CSS程式碼，方便我們可以直接拷貝程式碼使用。
Chrome外掛開發基本知識
在應用商店中下載下來的外掛基本上都是以.crx為檔案字尾，該檔案其實就是一個壓縮包，包括外掛所需要的html、css、javascript、圖片資源等等檔案。
開發一個外掛就跟我們平時做web開發流程沒多大的區別，就是先搭好基本的頁面，然後使用js來寫互動邏輯等功能。
比如我這個外掛的目錄檔案如下：
manifest.json檔案
檔案中需要注意一下的mainfest.json這個檔案，這個json檔案的作用是提供外掛的各種資訊，例如外掛能夠做的事情，以及外掛的檔案配置等等資訊。下面是一個清單檔案的示例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ "manifest_version": 2, "name": "One-click Kittens", "description": "This extension demonstrates a browser action with kittens.", "version": "1.0", "permissions": [ "https://secure.flickr.com/" ], "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" } } |
第一行宣告我們使用清單檔案格式的版本 2，必須包含（版本 1 是舊的，已棄用，不建議使用）。
接下來的部分定義擴充套件程式的名稱、描述與版本。這些都會在 Chrome 瀏覽器中使用，向使用者顯示已安裝的擴充套件程式，同時在 Chrome 網上應用店中向潛在的新使用者顯示您的擴充套件程式。名稱應該簡練，描述不要比一句話左右還長（後面將會有更多的空間用於更詳細的描述）。
最後一部分首先請求許可權，用於訪問 https://secure.flickr.com/ 上的資料，並宣告該擴充套件程式實現了一個瀏覽器按鈕，同時在這一過程中為它指定一個預設圖示與彈出視窗。
定義瀏覽器按鈕時指向了兩個資原始檔：icon.png 與 popup.html。這兩個資源都必須在擴充套件程式包中存在，圖片是擴充套件的顯示，html是擴充套件具體執行的基礎檔案。
具體詳細的開發教程可以看看官方的這個文件，非常簡明的入門教程。
功能實現-Vuejs實踐
整個外掛的核心互動功能非常簡單，如文章開頭的動圖所示，使用者選擇對齊方式，程式碼區域顯示對應的程式碼。這種簡單資料互動使用vuejs再適合不過了，vuejs基礎知識這裡就不再細說了。
這裡需要注意的一點是，chrome 擴充套件的執行環境有一些特殊要求，稱為 Content Security Policy (CSP)，使得通常的 vue 不能被正常使用。如果用的是 vue 1.x，那麼可以下載 csp 版本，在 這裡。如果是 2.x 版本，請參考官網文件的這一段。
核心程式碼如下所示。
HTML：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 引入樣式 --> <link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="mystique.css"> </head> <body> <div id="app"> <h1 class="title-box">flexbox對齊就是這麼簡單</h1> </div> <div id="type-select"> <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <!-- <span>Selected: {{ selected }}</span> --> <div class="resule-preview"> <div v-bind:class="selected" class="cols"> <div class="col col-3"> <p>對齊</p> </div> <div class="col col-3"> <p>對齊</p> </div> <div class="col col-3"> <p>對齊</p> </div> </div> </div> <div class="resule-code"> <pre class="code-display"> <code class="code-lang"> {{ cssMsg }} </code> </pre> </div> </div> <!-- 先引入 Vue --> <script src="vue.js"></script> <!-- 引入元件庫 --> <script src="main.js"></script> </body> </html><!-- 引入樣式 --> |
CSS就不列出來了，可以在原始碼中檢視。
下面來使用vuejs來實現外掛的功能。
功能實現
使用 v-for 指令根據一組陣列的選項列表進行渲染。 v-for 指令需要以 item in items 形式的特殊語法， items 是源資料陣列並且 item 是陣列元素迭代的別名。
而下拉框（select）列表的渲染，就可以使用vue中的v-for方法來渲染下拉選單選項，下拉選項資料寫在js中的data物件中的options中。用v-bind方法來繫結option的value值，程式碼如下所示：
|
1 2 3 4 5 |
<select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> |
在vuejs中可以用 v-model 指令在表單控制元件元素上建立雙向資料繫結。它會根據控制元件型別自動選取正確的方法來更新元素。這裡在select中使用v-model方法來監聽選中的值。
為了能預覽不同對齊的效果，先在CSS中寫好和下拉框中值相同的對應的類名樣式，這樣當使用者選中不同的值的時候能顯示不同的效果。這裡我們使用v-bind方法來實現這個功能，它主要用於屬性繫結，我們可以給v-bind:class一個物件，以動態地切換class。
|
1 2 3 4 5 6 7 8 9 10 11 |
<div v-bind:class="selected" class="cols"> <div class="col col-3"> <p>對齊</p> </div> <div class="col col-3"> <p>對齊</p> </div> <div class="col col-3"> <p>對齊</p> </div> </div> |
下拉框這塊功能就這樣，簡簡單單幾行程式碼就實現了。想想要是用jquery或者是原生的js來實現同樣的功能，不僅程式碼量要大而且寫起來也沒有vuejs這麼舒服。
接下來是程式碼同步功能，即在程式碼區域顯示對應flex對齊的CSS程式碼。
開始之前先講講vuejs中的computed屬性方法，可計算屬性 (computed properties) 就是不存在於原始資料中，而是在執行時實時計算出來的屬性。
對應到我們這個例項，就是當使用者選擇flexbox不同的對齊方式的時候，及時同步對應的CSS程式碼到程式碼預覽區域。簡單起見，直接把幾個不同的程式碼寫到js中：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
data: { selected: 'cols-center', cssText:{ 'cols-center' : 'nr-webkit-justify-content: center;nr-ms-flex-pack: center;nrjustify-content: center;', 'cols-space-between' : 'nr-webkit-justify-content: space-between;nr-ms-flex-pack: justify;nrjustify-content: space-between;', 'cols-space-around' : 'nr-webkit-justify-content: space-around;nr-ms-flex-pack: distribute;nrjustify-content: space-around;' }, options: [ { text: '居中對齊', value: 'cols-center'}, { text: '兩端對齊', value: 'cols-space-between'}, { text: '間隔相等', value: 'cols-space-around'} ] }, |
根據不同的名字對應不同的CSS程式碼。然後使用computed方法來根據使用者選取的值實時取出對應的CSS程式碼：
|
1 2 3 4 5 6 |
computed:{ cssMsg:function(){ console.log(this) return this.cssText[this.selected]; } } |
完整程式碼如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
var typeSelect = new Vue({ el: 'body', data: { selected: 'cols-center', cssText:{ 'cols-center' : 'nr-webkit-justify-content: center;nr-ms-flex-pack: center;nrjustify-content: center;', 'cols-space-between' : 'nr-webkit-justify-content: space-between;nr-ms-flex-pack: justify;nrjustify-content: space-between;', 'cols-space-around' : 'nr-webkit-justify-content: space-around;nr-ms-flex-pack: distribute;nrjustify-content: space-around;' }, options: [ { text: '居中對齊', value: 'cols-center'}, { text: '兩端對齊', value: 'cols-space-between'}, { text: '間隔相等', value: 'cols-space-around'} ] }, computed:{ cssMsg:function(){ console.log(this) return this.cssText[this.selected]; } } }) |
最後在html中繫結通過computed方法得到資料也就是CSS：
|
1 2 3 4 5 6 7 |
<div class="resule-code"> <pre class="code-display"> <code class="code-lang"> {{ cssMsg }} </code> </pre> </div> |
開發好之後，可以直接在chrome中執行來除錯。開啟擴充套件皮膚，勾選開發者模式，然後載入剛開發擴充套件所在的目錄就可以直接執行了。
一個簡單的外掛就完成了，通過這一個簡單的chrome外掛就可以體驗到vuejs在web開發中簡單、優雅的魅力，還有什麼理由不用起來呢。