我們平常寫 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_modules 來 import 時套件的進入點
• 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/..."
  },
  ...
}

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

套件介紹

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

發布套件

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

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

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

結語

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