什么是插件
在Vue框架中，如果需要给Vue增加一些我们需要的功能，Vue给我留了一个插件的方式，我们可以编写自己的插件，然后在Vue中去注册插件，然后去使用他。
通过Vue插件我们可以实现一些Vue框架没有的功能，也可以使用别人写好的插件，来帮助我们更快速的实现一些功能。
插件的功能范围并没有严格的要求，根据官方的示例来说，一般有下面几种：
- 添加全局方法或者属性，如：vue-custom-element，我们可以用插件方式添加一些全局组件，然后可以在任何页面或者组件当中去使用它。这也是Element UI或者Ant Design组件库安装组件的方式。
- 添加全局资源：指令/过渡等。如：vue-touch，我们也可以用插件方式去添加一些全局的自定义指令，来实现我们的功能。
- 通过全局 mixin 来添加一些组件选项。(如vue-router)
- 添加全局实例方法，通过把它们添加到
config.globalProperties上实现。比如常见我们可能会把$http请求放在全局实例方法上，方便我们在任何页面或者组件中去使用，不再需要去显式的import引入它。 - 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router、vuex等。
编写插件
编写Vue插件其实很简单，一个插件其实就是一个对象，或者是一个函数，如果是对象的话，那么就会调用对象里的 install 方法，如果是函数就会调用这个函数。无论是调用对象的 install 方法还是调用函数的方式，它们都会收到两个参数：1是由 Vue 的 createApp 生成的 app 对象，2是用户传入的参数。
下面我们从最简单的一个i18n功能开始。
一般我们都会把插件放在plugins文件夹下，这样易于维护和管理
我们创建一个i18n.js文件
export default {
install: (app, options) => {
// 编写插件代码
}
}
比如我们需要一个全局的函数来翻译整个程序，我们可以将方法挂在app.config.globalProperties属性上，来暴露出来。
函数接收一个key字符串，我们将使用它在用户提供的参数对象中查找转换后的字符串。
// 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)
}
}
}
假设用户使用插件时，将在 options 参数中传递一个包含翻译后的键的对象。我们的 $translate 函数将使用诸如 greetings.hello 之类的字符串，这样查找到的值将会为 Bonjour!。
例如：
greetings: {
hello: 'Bonjour!'
}
我们还可以使用inject来提供功能或者属性，比如，我们可以允许应用程序访问 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)
}
}
现在我们就可以使用 inject[i18n] 注入到一些页面或者组件中来访问该对象。
因为，Vue给我提供了app对象作为插件的第一个参数，所以插件可以使用所有其他功能，例如使用 mixin 和 directive。要了解有关 createApp 和应用程序实例的更多信息，请查看 Application API 文档。
比如下面我们在插件内，又注册了新的自定义指令，还有全局的mixin方法:
// 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)
app.directive('my-directive', {
mounted (el, binding, vnode, oldVnode) {
// some logic ...
}
//...
})
app.mixin({
created() {
// some logic ...
}
//...
})
}
}
使用插件
上面我们编写完插件后，我们就可以去使用插件了。在Vue中使用插件也是非常简单，我们可以通过使用 use() 方法将插件添加到我们的应用中。
use() 方法有两个参数。第一个是要安装的插件。
第二个参数是可选的，我们可以传一些自定义参数给插件。
// main.js
import { createApp } from 'vue'
import Root from './App.vue'
import i18nPlugin from './plugins/i18n'
const app = createApp(Root)
const i18nStrings = {
greetings: {
hi: 'Hallo!'
}
}
app.use(i18nPlugin, i18nStrings)
app.mount('#app')
最后我们在页面中使用这个插件：
<template>
<h1>{{ $translate("greetings.hi") }}</h1>
<div>i18n插件示例</div>
</template>
最终显示：
此示例在线代码：https://codesandbox.io/s/vue3-i18n-plugins-pbcb0
最后
参考： Vue 插件-官方文档：https://v3.cn.vuejs.org/guide/plugins.html
一起学习更多前端知识，微信搜索【小帅的编程笔记】，每天更新