对比Vue2/Vue3项目如何自定义插件

学习目标：

• 对比Vue2/Vue3项目如何自定义插件

学习内容：

插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。

一个插件可以是一个拥有 install() 方法的对象，也可以直接是一个安装函数本身。安装函数会接收到安装它的应用实例传递给 Vue.use()/ app.use() 的额外选项作为参数。

插件没有严格定义的使用范围，插件发挥作用的常见场景我们在下面分别以Vue2和Vue3项目的不同做一个稍详细的讲解。

我的理解：

1. install()方法通常是自定义插件的必备部分，在该方法中接收2个参数，应用实例和options对象参数

2.在install()方法中可以添加全局混入、全局组件、全局方法、自定义指令等等...

3.在main.js中通过Vue.use()/ app.use()的方式调用传入install()的参数

请往下看ˇ

展示Vue2写法：

官方说法：插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

1. 添加全局方法或者 property。如：vue-custom-element

2. 添加全局资源：指令/过滤器/过渡等。如 vue-touch

3. 通过全局混入来添加一些组件选项。如 vue-router

4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。

5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

// vue2项目
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import MyPlugin from '@plugin/my-plugin.js'

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

// 也可以传入一个可选的选项对象
Vue.use(MyPlugin, { someOption: true })

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

// MyPlugin.js

// 引入自定义的组件，Vue.component挂载到全局上
import AnalyticLink from '@component/AnalyticLink.vue'
class MyPlugin {
  // 这个区域可以定义方法，Vue.prototype挂载到全局上
  atRocity(row) { }
  install(Vue, options) {
    let pluginThis = this
    // 1. 添加全局方法或 property
    Vue.myGlobalMethod = function () {
      // 逻辑...
    }
    // 2. 添加全局自定义指令
    Vue.directive('my-directive', {
      bind(el, binding, vnode, oldVnode) {
        // 逻辑...
      }
      // ...
    })
    // 3. 注入组件选项
    Vue.mixin({
      created: function () {
        // 逻辑...
      }
      // ...
    })
    // 4. 全局添加实例方法
    Vue.prototype.$atRocity = function (...args) {
      return pluginThis.atRocity(...args)
    }
    // 5.绑定全局组件
    Vue.component('AnalyticLink', AnalyticLink)
  }
}

export default new MyPlugin()

展示Vue3写法：

插件没有严格定义的使用范围，但是插件发挥作用的常见场景主要包括以下几种：

1. 通过 app.component() 和 app.directive() 注册一到多个全局组件或自定义指令。

2. 通过 app.provide() 使一个资源可被注入进整个应用。

3. 向 app.config.globalProperties 中添加一些全局实例属性或方法

4. 一个可能上述三种都包含了的功能库 (例如 vue-router)。

// Vue3项目
// main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import MyPlugin from '@plugin/my-plugin.js'

const app = createApp(App);

app.use(MyPlugin)
app.use(router);
app.mount('#app');

// 引入自定义的组件，app.component挂载到全局上
import AnalyticLink from '@component/AnalyticLink.vue'
class MyPlugin {
  // 这个区域可以定义方法，app.prototype挂载到全局上
  atRocity(row) { }
  install(app, options) {
    let pluginThis = this
    // 1.绑定全局组件
    app.component('AnalyticLink', AnalyticLink)
    // 2. 添加全局自定义指令
    app.directive('my-directive', {
      bind(el, binding, vnode, oldVnode) {
        // 逻辑...
      }
      // ...
    })
    // 3. globalProperties方式全局添加实例方法
    app.config.globalProperties.$atRocity = function (...args) {
      return pluginThis.atRocity(...args)
    }
    // 4.provide方式全局添加实例方法
    app.provide('$atRocity', (...args)=> {
      return pluginThis.atRocity(...args)
    })
  }
}

export default new MyPlugin()

<!-- about.vue -->
<template>
  <div>about</div>
</template>
<script setup>

// 如下调用即可
import { inject } from 'vue'
const $atRocity = inject('$atRocity')
$atRocity()

</script>

如有不足，欢迎指正。

不要忽视你达成的每个小目标，它是你前进路上的垫脚石。冲！