插件

介绍

插件是一种能为Vue添加全局功能的工具代码,它通常用于为Vue添加全局功能,例如全局方法、全局属性、全局指令、全局组件等。 下面是如何安装一个插件的示例:

import { createApp } from 'vue'

const app = createApp({})

app.use(myPlugin, {
  /* 可选的选项 */
})

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

const myPlugin = {
  install(app, options) {
    // 配置此应用
  },
}

插件没有严格定义的使用范围,但是插件发挥作用的主要场景包括::

1. 通过app.component()和app.directive()注册全局组件和指令
2. 通过app.provide()和app.inject()提供和注入依赖
3. 通过app.config.globalProperties添加全局属性或方法
4. 一个可能包含了上述所有功能的库(例如 vue-router 和 vuex)

编写一个插件

我们可以写一个简单的插件Demo来理解如何构建插件

创建插件

建议在一个单独的文件中创建并导出插件,方便管理.

// plugins/i18n.js
export default {
  // app 为vue实例, optioons为插件配置项,在use时传入
  install: (app, options) => {
    // 在这里编写插件代码
  },
}

插件逻辑

我们希望有一个翻译函数,这个函数接收一个以.分割的字符串,用来在用户提供的翻译字典中查找对应语言的文本

<h1>{{ $translate('greetings.hello') }}</h1>

这个函数应该能够在任意模板中被全局调用

// plugins/i18n.js
export default {
  install: (app, options) => {
    // 注入一个全局可用的 $translate() 方法
    app.config.globalProperties.$translate = (key) => {
      // 获取 `options` 对象的深层属性
      // 使用 `key` 作为索引
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }
  },
}

我们的 $translate 函数会接收一个例如 greetings.hello 的字符串，在用户提供的翻译字典中查找，并返回翻译得到的值。

用于查找的翻译字典对象则应当在插件被安装时作为 app.use() 的额外参数被传入：

import i18nPlugin from './plugins/i18n'

app.use(i18nPlugin, {
  greetings: {
    hello: 'Bonjour!',
  },
})

这样，我们一开始的表达式 $translate('greetings.hello') 就会在运行时被替换为 Bonjour! 了。