持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第20天，点击查看活动详情

前言

当我们的项目业务一但复杂起来，相应的全局组件或者是全局自定义指令等等就会变得多了起来，而为了让我们更好了进行管理，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.js
export 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()方法了。