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