插件是独立代码，通常向 Vue 添加全局级功能。它可以是 object 暴露 install() 方法，或者 function

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

添加全局 方法 或 property。如：vue-custom-element
添加全局资源：指令/过滤器/过渡等（如：vue-touch）
通过全局 mixin 添加一些 组件选项。（作为 vue 路由器）
通过将全局实例方法添加到 config.globalProperties(Vue 3.x) / Vue.prototype(Vue 2.x) 来添加全局实例方法。
一个提供自己的API并同时提供上面提到的一个或多个功能的库。比如vue-router

查看 3.x

编写插件

为了更好地了解如何为 Vue.js 创建自己的插件，我们正在制作一个非常简化的插件版本，它显示 i18n 就绪的字符串。

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

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

// plugins/i18n.js
export default {
  install: (app, options) => {
    // Plugin code goes here
  }
}

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

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

// plugins/i18n.js
export default {
  install: (app, options) => {
    app.config.globalProperties.$translate = key => {
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }
  }
}

我们假设当用户使用插件时，他们将在options参数中传递一个包含翻译后的密钥的对象。我们的 $translate 函数将采用诸如greetings.hello之类的字符串，查看用户提供的配置，并返回翻译后的值 - 在本例中为 Bonjour!。

greetings: {
  hello: 'Bonjour!'
}

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

// plugins/i18n.js
export default {
  install: (app, options) => {
    app.config.globalProperties.$translate = key => {
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }

    app.provide('i18n', options)
  }
}

插件用户现在可以将注入其组件并访问该对象。

由于我们可以访问应用程序对象，因此插件可以使用所有其他功能，例如使用 mixins 和指令。要了解有关 createApp 和应用程序实例的更多信息，请参阅应用程序 API 文档。

// plugins/i18n.js
export default {
  install: (app, options) => {
    app.config.globalProperties.$translate = (key) => {
      return key.split('.')
        .reduce((o, i) => { if (o) return o[i] }, options)
    }

    app.provide('i18n', options)

    app.directive('my-directive', {
      mounted (el, binding, vnode, oldVnode) {
        // some logic ...
      }
      ...
    })

    app.mixin({
      created() {
        // some logic ...
      }
      ...
    })
  }
}

使用插件

使用 createApp() 初始化 Vue 应用程序后，您可以通过调用 use() 方法向应用程序添加插件。

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

方法

use() 有两个参数。第一个是要安装的插件，在本例中是 i18nPlugin。

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

第二个参数是可选的，取决于每个插件。对于 i18nPlugin 演示，它是一个带有转换后的字符串的对象。

import { createApp } from 'vue'
import Root from './App.vue'
import i18nPlugin from './plugins/i18n'

const app = createApp(Root)
const i18nStrings = {
  greetings: {
    hi: 'Hallo!'
  }
}

app.use(i18nPlugin, i18nStrings)
app.mount('#app')

查看 2.x

开发插件

Vue.js 插件应该公开 install 方法。该方法中的第一个参数是Vue构造函数，第二个参数是可选的选项对象：

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

注册全局组件的示例

编写组件

tab-bar.vue

如何获得install()

// tab-bar.js
// 引入组件
import TabBarComponent from 'components/tab-bar';
// 定义 TabBar 对象
const TabBar = {
    // install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数。
    install: function (Vue) {
        Vue.component(TabBarComponent.name, TabBarComponent);
    }
};

export default TabBar;

使用插件

通过全局方法Vue.use()使用插件。必须在调用启动应用程序之前完成此操作：

import TabBar from '@/modules/tab-bar';

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

Vue.use(TabBar);

new Vue({
  // ...组件选项
})

还可以发送可选的设置对象：

Vue.use(MyPlugin, { someOption: true })

Vue.use会自动阻止多次注册相同插件，即使多次调用，插件也只会注册一次。

Vue 插件

查看 3.x

编写插件

使用插件

查看 2.x

开发插件

注册全局组件的示例

使用插件

版权声明

作者文章