Vue3 插件（可选独立模块复用）

1. 插件介绍

插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。它是一种可选的独立模块，而无需修改主程序的代码。

1.1 安装方式

Vue 中使用插件（通过use方法）：

const app = createApp();
// 通过use方法来使用插件
app.use(router).use(pinia).use(ElementPlus).mount('#app')

1.2 插件的形式

（1）一个插件可以是一个拥有 install() 方法的对象：

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

（2）也可以直接是一个安装函数本身：

const install = function(app, options){}

安装函数会接收到安装它的应用实例和传递给 app.use() 的额外选项作为参数：

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

1.3 使用插件的常见场景

插件没有严格定义的使用范围，但是插件发挥作用的常见场景主要包括以下几种：

1.通过 app.component() 和 app.directive() 注册一到多个全局组件或自定义指令。

2.通过 app.provide() 使一个资源可被注入进整个应用。

3.向 app.config.globalProperties 中添加一些全局实例属性或方法

4.一个可能上述三种都包含了的功能库 (例如 vue-router)。

比如，自定义组件库时，我们就需要引入所有的自定义组件，然后注册到当前的app中

import Button from './Button.vue';
import Card from './Card.vue';
import Alert from './Alert.vue';const components = [Button, Card, Alert];const myPlugin = {install(app, options){// 这里要做的事情，其实就是引入所有的自定义组件// 然后将其注册到当前的应用里面components.forEach(com=>{app.component(com.name, com);})}
}export default myPlugin;

2. 编写一个插件

2.1 编写一个简易版 i18n（国际化） 插件

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

为了能够全局调用，我们将它添加到 app.config.globalProperties 上来实现。

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)}}
}

在 main.js 中进行安装，并写入options：

import { createApp} from 'vue'
import App from './App.vue'
import router from './router'const app = createApp(App)import i18nPlugin from './plugins/i18n'app.use(i18nPlugin, {greetings: {hello: 'Bonjour!'}
})app.use(router)app.mount('#app')

在组件中进行应用 App.vue：

<template><h1>{{ $translate('greetings.hello') }}</h1>
</template><script setup>
</script><style lang="scss" scoped>
</style>

可以看到，表达式 $translate('greetings.hello') 在运行时被替换为 Bonjour!

2.2 插件中的 Provide / Inject（另一种实现思路）

2.1 编写一个简易版 i18n（国际化） 插件 中的例子，也可以依赖注入（provide 和 inject）来实现。改造如下：

plugins/i18n.js：

export default {install: (app, options) => {app.provide('i18n', options)}
}

在 main.js 中进行安装，并写入options：

import { createApp} from 'vue'
import App from './App.vue'
import router from './router'const app = createApp(App)import i18nPlugin from './plugins/i18n'app.use(i18nPlugin, {greetings: {hello: 'Bonjour!'}
})app.use(router)app.mount('#app')

在 App.vue 中应用：

<template><h1>{{ i18n.greetings.hello }}</h1>
</template><script setup>
import { inject } from 'vue'const i18n = inject('i18n')console.log(i18n.greetings.hello)
</script><style lang="scss" scoped>
</style>

---

上一章 《Vue3 自定义指令（DOM 行为复用）》