小编点评

**1. 注册组件和指令** ```javascript // app.component.js import MyComponent from './MyComponent.vue' Vue.component('my-component', MyComponent) // app.directive.js import MyDirective from './MyDirective.vue' Vue.directive('my-directive', MyDirective) ``` **2. 注册全局资源** ```javascript // app.config.js import i18nPlugin from './plugins/i18n' export default { plugins: [i18nPlugin], // 其他配置项 ... } ``` **3. 实现插件** ```javascript // MyPlugin.js export default { install(app, options) { // 注册全局事件监听器 app.on('message-from-other-component', (msg) => { console.log(msg) }) // 获取全局属性 app.config.globalProperties.$translate = (key) => { return key.split('.').reduce((o, i) => { if (o) return o[i] }, options) } } } ``` **4. 使用插件** ```javascript // main.js import i18nPlugin from './plugins/i18n' Vue.use(i18nPlugin, { greetings: { hello: 'Bonjour!' } }) ``` **5. 示例用法** ```html ``` **总结** 通过使用情景注册组件和指令，我们可以创建一个包含全局事件监听器和全局属性的插件。通过使用 `provide()`，我们可以为插件用户提供一些内容。

正文

1、使用情景

• 通过 app.component() 和 app.directive() 注册一到多个全局组件或自定义指令。
• 通过 app.provide() 使一个资源可被注入进整个应用。
• 向 app.config.globalProperties 中添加一些全局实例属性或方法
• 一个可能上述三种都包含了的功能库 (例如 vue-router)。

2、使用方法

mian.js注册插件

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

3、实现插件

举个例子，我们要实现一个翻译的插件：

3.1、模版文件

<h1>{{ $translate('greetings.hello') }}</h1>

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

我们的 $translate 函数会接收一个例如 greetings.hello 的字符串，在用户提供的翻译字典中查找，并返回翻译得到的值。
用于查找的翻译字典对象则应当在插件被安装时作为 app.use() 的额外参数被传入：

3.3、main.js

import i18nPlugin from './plugins/i18n'

app.use(i18nPlugin, {
  greetings: {
    hello: 'Bonjour!'
  }
})

这样，我们一开始的表达式 $translate('greetings.hello') 就会在运行时被替换为 Bonjour! 了。

4、插件中的 Provide / Inject​

在插件中，我们可以通过 provide 来为插件用户供给一些内容。举例来说，我们可以将插件接收到的 options 参数提供给整个应用，让任何组件都能使用这个翻译字典对象。

js

export default {
  install: (app, options) => {
    app.config.globalProperties.$translate = (key) => {
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }

    app.provide('i18n', options)
  }
}

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

<script setup>
import { inject } from 'vue'
const i18n = inject('i18n')
console.log(i18n.greetings.hello)
</script>

官方文档