vue.js 初體驗— Chrome 插件開發實錄

時間 2019-11-11

標籤 vue.js vue 體驗 chrome 插件開發實錄欄目 JavaScript 简体版

原文原文鏈接

歡迎你們關注騰訊雲技術社區-博客園官方主頁，咱們將持續在博客園爲你們推薦技術精品文章哦~javascript

做者：陳緯傑css

背景

對於常常和動畫開發打交道的開發者對於Animate.css這個動畫庫不會陌生，它把一些常見的動畫效果都封裝起來了，很是實用。可是有時候在開發中，僅僅只是須要某一兩個動畫效果，把整個CSS文件都引入，這樣不是太好。html

需求就出現了，能不能有一個工具能夠直接預覽Animate.css對應的動畫效果，而且生成對應的動畫代碼呢？vue

做爲一個UI開發，平時跟Chrome瀏覽器打交道最多，因而就整了一個Chrome插件能夠及時預覽對應Animate.css中的動畫效果並生成對應的動畫代碼，這樣在實際開發中碰到一些須要使用到Animate.css中的動畫效果時，能夠大大的提升咱們的開發效率。java

插件安裝地址，快來安裝體驗吧！jquery

做爲一個程序員，搗鼓些小工具，不但能夠學些新技術還能夠提升咱們的開發效率，何樂而不爲呢。git

下面就以一個簡單的flexbox對齊預覽的插件爲例，講講使用vuejs開發Chrome插件的開發體驗和效率。程序員

擴展以下圖所示：github

而且還實時根據用戶選擇的對齊方式，顯示對應的CSS代碼，方便咱們能夠直接拷貝代碼使用。web

Chrome插件開發基本知識

在應用商店中下載下來的插件基本上都是以.crx爲文件後綴，該文件其實就是一個壓縮包，包括插件所須要的html、css、javascript、圖片資源等等文件。

開發一個插件就跟咱們平時作web開發流程沒多大的區別，就是先搭好基本的頁面，而後使用js來寫交互邏輯等功能。

好比我這個插件的目錄文件以下：

manifest.json文件

文件中須要注意一下的mainfest.json這個文件，這個json文件的做用是提供插件的各類信息，例如插件可以作的事情，以及插件的文件配置等等信息。下面是一個清單文件的示例，

{
  "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再適合不過了。

這裏須要注意的一點是，chrome 擴展的運行環境有一些特殊要求，稱爲 Content Security Policy (CSP)，使得一般的 vue 不能被正常使用。若是用的是 vue 1.x，那麼能夠下載 csp 版本，在這裏。若是是 2.x 版本，請參考官網文檔的這一段。

核心代碼以下所示。

HTML：

<!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值，代碼以下所示：

<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中寫好和下拉框中值相同的對應的類名樣式，這樣當用戶選中不一樣的值的時候能顯示不一樣的效果。

<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中：

data: {
        selected: 'cols-center',
        cssText:{
            'cols-center' : '\n\r-webkit-justify-content: center;\n\r-ms-flex-pack: center;\n\rjustify-content: center;',
            'cols-space-between' : '\n\r-webkit-justify-content: space-between;\n\r-ms-flex-pack: justify;\n\rjustify-content: space-between;',
            'cols-space-around' : '\n\r-webkit-justify-content: space-around;\n\r-ms-flex-pack: distribute;\n\rjustify-content: space-around;'
        },
        options: [
          { text: '居中對齊', value: 'cols-center'},
          { text: '兩端對齊', value: 'cols-space-between'},
          { text: '間隔相等', value: 'cols-space-around'}
        ]
    },

根據不一樣的名字對應不一樣的CSS代碼。而後使用computed方法來根據用戶選取的值實時取出對應的CSS代碼：

computed:{
        cssMsg:function(){
            console.log(this)
            return this.cssText[this.selected];
        }
    }

完整代碼以下：

var typeSelect = new Vue({
      el: 'body',
      data: {
        selected: 'cols-center',
        cssText:{
            'cols-center' : '\n\r-webkit-justify-content: center;\n\r-ms-flex-pack: center;\n\rjustify-content: center;',
            'cols-space-between' : '\n\r-webkit-justify-content: space-between;\n\r-ms-flex-pack: justify;\n\rjustify-content: space-between;',
            'cols-space-around' : '\n\r-webkit-justify-content: space-around;\n\r-ms-flex-pack: distribute;\n\rjustify-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：

<div class="resule-code">
        <pre class="code-display">
            <code class="code-lang">
               {{ cssMsg }}  
            </code>
        </pre>
      </div>

開發好以後，能夠直接在chrome中運行來調試。打開擴展面板，勾選開發者模式，而後加載剛開發擴展所在的目錄就能夠直接運行了。

完整的源代碼已上傳在附件，能夠下下來直接運行。

一個簡單的插件就完成了，經過這一個簡單的chrome插件就能夠體驗到vuejs在web開發中簡單、優雅的魅力，還有什麼理由不用起來呢。

【有獎討論】程序員，怎麼應對三十歲？點擊查看詳情

歡迎加入QQ羣：374933367，與騰雲閣原創做者們一塊兒交流，更有機會參與技術大咖的在線分享！

vue.js 初體驗— Chrome 插件開發實錄

背景

Chrome插件開發基本知識

manifest.json文件

功能實現-Vuejs實踐

功能實現

相關閱讀