vue3 中 插件的制作 及 使用

0. 插件的作用

是一种能为 Vue 添加全局功能的工具代码
其实插件就是一个 被vue实例对象使用的 全局对象， 或 全局函数

1. 插件的使用

import 插件 from "插件文件"
app.use(插件 , 【参数2】)

2. 自定义插件的要求

1. 插件可以是一个对象， 但必须实现 install() 方法
2. 插件也可以是一个函数， 那么将直接当成 install 方法来调用
3. 换句话来说，就是当 app.use(AAA)的时候， 如果 AAA 是个对象， 将找到其内部的 install 方法来进行调用 如果 AAA 是个函数的话， 将直接对其进行 () 调用
4. 注意： app.use(某一个插件)，若对同一个插件进行多次调用， 则该插件只会被安装一次

3. app.use(参数1 ， 参数2)使用细节

app.use()在使用的时候， 可传递两个参数， 参数1： 插件名称 参数2： 非必要参数， 如有，则传递到 插件的 install 方法中

4. 插件的 install 方法

该方法会接受两个参数

const 插件 = { 
    install(参数1, 参数2) { 
        // 配置此应用 
    } 
}
// 参数1： app.use()的调用者 也就是 app
// 参数2： app.use(aaa , bbb) 调用时候的第二个参数 bbb

5. 自定义插件的使用场景

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

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

6. 按照官网案例， 我们来定义一个 中英文自动切换的 插件

插件 i18n.js 代码如下

export default {
    install: (app, options) => {
        // 给全局 挂载一个 翻译方法 $translate
        app.config.globalProperties.fanyi_fn = (key) => {
            return key.split('.').reduce((o, i) => {
                if (o) return o[i]
            }, options)
        }
    }
}

main.ts代码如下

......
import i18n from "./plugins/i18n.js"
app.use(i18n , {
    "中英": {
        "你好": "hello"
    },
    "英中": {
        "byebye": "再见"
    }
})
.....

组件测试代码如下

......
        <hr>
        中英切换: {{fanyi_fn("中英.你好")}}
        <hr>
        英中切换: {{fanyi_fn("英中.byebye")}}
......

最终界面显示效果如下