iT邦幫忙

6

Vue.js - 來做一個 Plugin 吧!

我們平常寫 code 遇到複雜的功能時,總會先找找有沒有人寫過類似的插件,或者要為自己專案擴充一些功能時也可以使用插件,那麼插件該如何寫呢?官網其實也有說明,以下開始介紹

使用插件

插件可以通過 Vue.use() 方法來使用,亦可在後方傳入參數,不過須在 new Vue() 之前調用才有效

import Vue from "vue";
import plugin from "@/assets/plugins/plugin";

Vue.use(plugin, { someOption: true });

撰寫插件

插件應該對外暴露一個 install 的方法,Vue.use() 則會去調用這個方法,第一個參數是 Vue 的建構式,第二個參數則是剛剛傳入的東西,而插件內可做的操作如下:

  1. 添加全域方法(無法在 new Vue() 後使用此方法)
  2. 添加自訂指令
  3. 添加 mixin
  4. 啟用組件
  5. 於原型添加屬性
import MyComponent from "@/components/MyComponent.vue";

const install = function(Vue, options) {
  // 1. 添加全域方法
  Vue.myGlobalMethod = function () {
    // ...
  };
  // 2. 添加自訂指令
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // ...
    }
  });
  // 3. 添加 mixin
  Vue.mixin({
    created: function () {
      // ...
    }
  });
  // 4. 啟用組件
  Vue.component('my-component', MyComponent);
  // 5. 於原型添加屬性
  Vue.prototype.$myMethod = function (methodOptions) {
    // ...
  };
};

export default { install }

如果沒有發布需求的話,到這邊就可以直接使用自己的套件了,如果要發布到 npm 再往下看就好XD

打包

打包套件可以自行設定 webpack 或是使用 Vue CLI 皆可,這裡使用 Vue CLI 打包

vue-cli-service build --target lib --name myLib [entry]

依照上方指令於 package.json 填入套件名稱進入點

// package.json

{
  "scripts": {
    "build": "vue-cli-service build --target lib --name my-plugin ./src/plugins/plugin.js"
  }
}

接著執行 npm run build 就打包完成了!

填寫套件資訊

套件相關資訊會在 package.json 內,常見的如下:

  • name:套件名稱,不能與其他套件重複
  • version:版本號,寫法為 主要版本.次要版本.修訂版本
  • description:套件簡介,協助使用者搜尋套件
  • keywords:套件關鍵字,協助使用者搜尋套件
  • homepage:套件官網
  • bugs:發現 bug 回報網址
  • license:版權
  • author:作者
  • main:直接於 node_modulesimport 時套件的進入點
  • files:安裝套件時會下載的檔案
  • repository:程式碼位置
{
  "name": "my-plugin",
  "version": "0.1.0",
  "description": "Vue plugin test",
  "keywords": [
    "my-plugin",
    "plugin",
    "vue",
    "vue.js"
  ],
  "homepage": "https://www...",
  "bugs": {
    "url": "https://www..."
  },
  "license": "MIT",
  "author": {
    "name": "Ares",
    "email": "ares@gmail.com"
  },
  "main": "dist/my-plugin.common.js",
  "files": [
    "dist/*",
    "public/*",
    "src/*"
  ],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/..."
  },
  ...
}

其他選項可以參考別人怎麼寫,基本上 nameversionmain 為必填,其他可視情況填寫,且每次更新後都要增加版本號

套件介紹

一個好的套件介紹也是很重要的,所以記得要將使用方法等資訊寫在 README.md,如果有 Demo 頁面最好也可以一起放進來,以供使用者了解套件~

發布套件

首先於 npm 上註冊帳號,接著登入之後就可以發布套件囉!

$ npm login // 登入
$ npm publish // 發布套件
$ npm unpublish --force // 下架套件

發布後就可以 npm install 自己的套件並且開始使用囉!

結語

這次了解到了 Vue 的套件撰寫方法,也知道該如何將套件推上 npm,雖然我還沒有想到能做出甚麼實用的套件XD,不過先學起來也不吃虧,人家總說開發是站在巨人的肩膀上,希望有一天大家都能成為巨人的一部分!


尚未有邦友留言

立即登入留言