插件

介绍

插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。

下面是如何安装一个插件的示例：

// main.js
import { createApp } from 'vue'
import myPlugin from './plugins/myPlugin'

const app = createApp({})

app.use(myPlugin, {
  /* 可选的选项 */
})

一个插件可以是一个拥有 install() 方法的对象，也可以直接是一个安装函数本身。安装函数会接收到安装它的应用实例和传递给 app.use() 的额外选项作为参数：

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

export default myPlugin

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

提示

通过 app.config.globalProperties 定义的全局属性一般会以 $ 开头。

例如：

const plugin = {
  install(app, options) {
    app.config.globalProperties.$echo = name => `hello ${name}`
  },
}

export default plugin

若集成 TS 时，遇到提示类型报错，请参考扩展全局属性。

在插件中，我们可以通过 provide 来为插件用户供给一些内容。

举例来说，我们可以将插件接收到的 options 参数提供给整个应用，让任何组件都能使用这个翻译字典对象。

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

现在，插件用户就可以在他们的组件中以 i18n 为 key 注入并访问插件的选项对象了。

vue

<script setup>
import { inject } from 'vue'

const i18n = inject('i18n')

console.log(i18n.greetings.hello)
</script>