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

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

• [1. 插件介绍](#1. 插件介绍)
• • [1.1 安装方式](#1.1 安装方式)
  • [1.2 插件的形式](#1.2 插件的形式)
  • [1.3 使用插件的常见场景](#1.3 使用插件的常见场景)
• [2. 编写一个插件](#2. 编写一个插件)
• • [2.1 编写一个简易版 i18n（国际化） 插件](#2.1 编写一个简易版 i18n（国际化） 插件)
  • [2.2 插件中的 Provide / Inject（另一种实现思路）](#2.2 插件中的 Provide / Inject（另一种实现思路）)

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 行为复用）》

下一章 《Vue3 路由介绍》