插件

插件是自包含的代码，通常向 Vue 添加全局级功能。它可以是公开 install() 方法的 object，也可以是 function

插件的功能范围没有严格的限制——一般有下面几种：

  1. 添加全局方法或者 property。如：vue-custom-element插件 - 图1 (opens new window)

  2. 添加全局资源：指令/过滤器/过渡等。如：vue-touch插件 - 图2 (opens new window)）

  3. 通过全局混入来添加一些组件选项。(如vue-router插件 - 图3 (opens new window))

  4. 添加全局实例方法，通过把它们添加到 config.globalProperties 上实现。

  5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router插件 - 图4 (opens new window)

编写插件

为了更好地理解如何创建自己的 Vue.js 版插件，我们将创建一个非常简化的插件版本，它显示 i18n 准备好的字符串。

每当这个插件被添加到应用程序中时，如果它是一个对象，就会调用 install 方法。如果它是一个 function，则函数本身将被调用。在这两种情况下——它都会收到两个参数：由 Vue 的 createApp 生成的 app 对象和用户传入的选项。

让我们从设置插件对象开始。建议在单独的文件中创建它并将其导出，如下所示，以保持包含的逻辑和分离的逻辑。

  1. // plugins/i18n.js
  2. export default {
  3.   install: (app, options) => {
  4.     // Plugin code goes here
  5.   }
  6. }

我们想要一个函数来翻译整个应用程序可用的键，因此我们将使用 app.config.globalProperties 暴露它。

该函数将接收一个 key 字符串，我们将使用它在用户提供的选项中查找转换后的字符串。

  1. // plugins/i18n.js
  2. export default {
  3.   install: (app, options) => {
  4.     app.config.globalProperties.$translate = key => {
  5.       return key.split('.').reduce((o, i) => {
  6.         if (o) return o[i]
  7.       }, i18n)
  8.     }
  9.   }
  10. }

我们假设用户使用插件时，将在 options 参数中传递一个包含翻译后的键的对象。我们的 $translate 函数将使用诸如 greetings.hello 之类的字符串，查看用户提供的配置内部并返回转换后的值-在这种情况下为 Bonjour!。

例如：

  1. greetings: {
  2.   hello: 'Bonjour!'
  3. }

插件还允许我们使用 inject 为插件的用户提供功能或 attribute。例如，我们可以允许应用程序访问 options 参数以能够使用翻译对象。

  1. // plugins/i18n.js
  2. export default {
  3.   install: (app, options) => {
  4.     app.config.globalProperties.$translate = key => {
  5.       return key.split('.').reduce((o, i) => {
  6.         if (o) return o[i]
  7.       }, i18n)
  8.     }
  10.     app.provide('i18n', options)
  11.   }
  12. }

插件用户现在可以将 inject[in18] 到他们的组件并访问该对象。

另外，由于我们可以访问 app 对象，因此插件可以使用所有其他功能，例如使用 mixin 和 directive。要了解有关 createApp 和应用程序实例的更多信息，请查看 Application API 文档。

  1. // plugins/i18n.js
  2. export default {
  3.   install: (app, options) => {
  4.     app.config.globalProperties.$translate = (key) => {
  5.       return key.split('.')
  6.         .reduce((o, i) => { if (o) return o[i] }, i18n)
  7.     }
  9.     app.provide('i18n', options)
  11.     app.directive('my-directive', {
  12.       bind (el, binding, vnode, oldVnode) {
  13.         // some logic ...
  14.       }
  15.       ...
  16.     })
  18.     app.mixin({
  19.       created() {
  20.         // some logic ...
  21.       }
  22.       ...
  23.     })
  24.   }
  25. }

使用插件

在使用 createApp() 初始化 Vue 应用程序后，你可以通过调用 use() 方法将插件添加到你的应用程序中。

我们将使用在编写插件部分中创建的 i18nPlugin 进行演示。

use() 方法有两个参数。第一个是要安装的插件，在这种情况下为 i18nPlugin。

它还会自动阻止你多次使用同一插件，因此在同一插件上多次调用只会安装一次该插件。

第二个参数是可选的，并且取决于每个特定的插件。在演示 i18nPlugin 的情况下，它是带有转换后的字符串的对象。

INFO

如果你使用的是第三方插件 (例如 Vuex 或 Vue Router)，请始终查看文档以了解特定插件期望作为第二个参数接收的内容。

  1. import { createApp } from 'vue'
  2. import Root from './App.vue'
  3. import i18nPlugin from './plugins/i18n'
  5. const app = createApp(Root)
  6. const i18nStrings = {
  7.   greetings: {
  8.     hi: 'Hallo!'
  9.   }
  10. }
  12. app.use(i18nPlugin, i18nStrings)
  13. app.mount('#app')

awesome-vue插件 - 图5 (opens new window) 集合了大量由社区贡献的插件和库。