1、插件的概念

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

  1）一个插件可以是一个拥有 install() 方法的对象，也可以直接是一个安装函数本身。

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

  3）插件的常见使用场景：

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

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

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

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

2、编写插件（建议在一个单独的文件中创建并导出它）
// plugins/i18n.js
export default {
  install: (app, options) => {
    // 在这里编写插件代码
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
3、安装插件
import { createApp } from 'vue'

const app = createApp({})

app.use(myPlugin, {
  /* 可选的选项 */
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
4、插件示例（i18n国家化翻译插件）
  1）编写插件
// 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)
    }
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  2）安装插件
import { createApp } from 'vue'
import i18nPlugin from './plugins/i18n'

const app = createApp({});

// 用于查找的翻译字典对象则应当在插件被安装时作为 app.use() 的额外参数被传入
app.use(i18nPlugin, {
  greetings: {
    hello: 'Bonjour!'
  }
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  3）使用插件
<!-- 我们的 $translate 函数会接收一个例如 greetings.hello 的字符串，在用户提供的翻译字典中查找，并返回翻译得到的值。 -->
<h1>{{ $translate('greetings.hello') }}</h1>
  • 1.
  • 2.
5、插件使用Provide / Inject将插件返回的内容变为全局使用

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

// plugins/i18n.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)
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.

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

export default {
  inject: ['i18n'],
  created() {
    console.log(this.i18n.greetings.hello)
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.


作者：꧁执笔小白꧂