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 的建构式，第二个参数则是刚刚传入的东西，而插件内可做的操作如下：

添加全域方法（无法在 new Vue() 后使用此方法）添加自订指令添加 mixin启用组件于原型添加属性

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，不过先学起来也不吃亏，人家总说开发是站在巨人的肩膀上，希望有一天大家都能成为巨人的一部分！