前言

当我们的项目业务一但复杂起来，相应的全局组件或者是全局自定义指令等等就会变得多了起来，而为了让我们更好了进行管理，vue 给我们提供插件的功能，让我们更好的添加全局功能。下面就让我们来看一看他是如何实现的，以及应用场景有哪些吧。

插件

插件（plugin）：能更好的管理添加全局功能的相关代码。

import { createApp } from 'vue'import plugin from './plugin.js'
const app = createApp({})
app.use(plugin, {  /* 可选的选项 */})

然后我们声明一个 plugin.js 的文件，导出一个含有 install 方法的对象或者 install 函数本身即可。而 install 方法接收两个参数，第一个是是当前应用的实例，第二个是传递的额外选项。

const myPlugin = {  install(app, options) {    // 相应的全局功能代码  }}

适应场景

• app.component()和 app.directive()注册的全局组件或自定义指令。

• app.provide()提供的应用级的依赖。

• app.config.globalProperties 上添加的全局属性实例和方法。

• 第三方功能库，如 lodash。

当然，上述所说的场景不一定非要使用插件的形式，具体情况根据自身项目进行把控。

编写插件

下面我们来编写一个具体的插件来更好的理解它吧。以一个简单的 i18n 插件为例。

首先，有一个翻译函数，该函数接受一个以.为分隔符的 key 字符串，通过用户提供的字典，进行相应的语言文本查找。

<span>{{ $trans('article.title') }}</span>

其次这个翻译函数可以在任意模板中进行全局调用。

// plugins/i18n.jsexport default {  install(app, options) {    // 注入一个全局可用的 $trans() 方法    app.config.globalProperties.$trans = (keys) => {      // 遍历keys在options对象中查找相应的属性      return keys.split('.').reduce((option, key) => {        if (option) return option[key]      }, options)    }  }}

这样我们就完成了 $trans 翻译函数了，会通过接受的字符串返回相应的语言文本。

下面，我们只需要对他进行应用，并进行传参就可以了。

import i18nPlugin from './plugins/i18n'
app.use(i18nPlugin, {  article: {    title: '标题!'  }})

这样我们就可以全局使用 $trans()方法了。