1. 实现自定义插件

一个VIP3插件一般需要有如下三个文件：

• index.js：组织并导出插件
• config.js：插件的默认配置，可用于参考并指导如何在application.yml中自定义配置
• <插件名>.js：插件的逻辑实现
  • 必须含有 初始化“init(config)” 方法
  • 可以通过属性 “isAfterCoreInited” 设置插件初始化的时机是在平台初始化完成前还是后，默认为：true/内核初始化后

1.1. 插件示例

下面以一个可配置问候语言的问候插件为例，介绍插件的实现、注册和使用。

1.1.1. 插件实现

插件的默认配置 config.js

const config = {
    greet: {
        locale: "en" // 设置问候语言
    }
}

export default config

插件的逻辑实现 greet-plugin.js

import defaultConfig from "./config"

const greet = {
    name: "greet",
    config: {},
    isAfterCoreInited: true, // 是否在内核初始化完成后初始化（可选，默认为：true）
    greetings: null,

    init(config) {
        this.config = {...defaultConfig.greet, ...config.greet}
        // this.config = Object.assign(defaultConfig.greet, config.greet)

        this.greetings = new Map()
        this.greetings.set("en", "Hello")
        this.greetings.set("cn", "你好")
    },

    //////

    sayHello(name) {
        console.log(`${this.greetings.get(this.config.locale)},${name}`)
    }
}

export default greet

导出插件 index.js

import greet from "./greet-plugin"

export default greet

1.2. 注册插件

在应用的 main.js 中的引入并注册插件

import App from "./App"
import greet from "./sample/plugin/greet"

(async () => {
    // 创建应用
    const app = await createApp(App, [
            greet
        ]
    )

    app.mount("#app")
})()

1.3. 使用插件

import greet from "./greet";

export default {
    name: "PluginSample",
    methods: {
        handleGreetBtnClick() {
            greet.sayHello("周剑辉")
        }
    }
}

此时输出为：

然后在 application.yml 中配置问候语言为中文 “cn” 。

greet:
  locale: "cn"

此时输出为：