Vue3 全局API 挂载

import md5 from 'md5'

// 创建 Vue 实例
const app = createApp(App)

// 把插件的 API 挂载全局变量到实例上
app.config.globalProperties.$md5 = md5;

// 你也可以自己写一些全局函数去挂载
app.config.globalProperties.$log = (text: string): void => {
  console.log(text);
};

app.mount('#app');

 

Vue3.x 中无法使用 this 来操作，所以要通过 getCurrentInstance 组件来进行处理

// 导入 getCurrentInstance 组件
import { defineComponent, getCurrentInstance } from 'vue'

export default defineComponent({
  setup () {
    // 获取当前实例
    const app = getCurrentInstance();

    // 增加这层判断的原因见下方说明
    if ( app ) {

      // 调用全局的 MD5 API 进行加密
      const MD5_STR: string = app.appContext.config.globalProperties.$md5('Hello World!');
      console.log(MD5_STR);

      // 调用刚刚挂载的打印函数
      app.appContext.config.globalProperties.$log('Hello World!');

    }
  }
})

 

来自于： https://vue3.chengpeiquan.com/plugin.html#使用全局-api-new