我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第2篇文章

前言

Vue3从实例中移除了 $on、$off 和 $once 方法，所以我们如果希望继续使用全局事件总线，要通过第三方的库：
Vue3官方有推荐一些库，例如 mitt

🍏推荐阅读

• 依赖版本升级 篇 (十一)

Vue3 事件总线 篇 (十二)

Vue3事件总线mitt的使用

pnpm i mitt lodash-es -S
pnpm i @types/lodash-es -D

Mitt 是为浏览器设计的，但适用于任何 JavaScript 运行时。它没有依赖项， 支持 IE9+
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。lodash-es 是着具备 ES6 模块化的版本。

代码封装

import { App } from 'vue'
import { globalPropertiesType } from '/#/library'
import mitt from 'mitt'
import _ from 'lodash-es'

export let gp: globalPropertiesType

export function setup(app: App<Element>) {
  const _emitter = mitt()
  gp = {
    /**
     * 全局发布（在Vue全局方法中自定义$pub发布方法）
     * @param args
     */
    $pub: (...args: any[]) => {
      _emitter.emit(_.head(args), args[1])
    },
    /**
     * 全局订阅（在Vue全局方法中自定义$sub订阅方法）
     */
    $sub: () => {
      // eslint-disable-next-line prefer-rest-params
      Reflect.apply(_emitter.on, _emitter, _.toArray(arguments))
    },
    /**
     * 取消订阅
     */
    $unsub: () => {
      // eslint-disable-next-line prefer-rest-params
      Reflect.apply(_emitter.off, _emitter, _.toArray(arguments))
    },
  }
  Object.keys(gp).forEach((key) => {
    app.provide(key, gp[key as keyof typeof gp])
    // 允许vue3下继续使用vue2中的this调用
    app.config.globalProperties[key] = gp[key as keyof typeof gp]
  })
}

globalPropertiesType

类型

// types/library.d.ts

declare interface globalPropertiesType {
  $pub(...args: any[]): void
  $sub(): void
  $unsub(): void
}

app.provide

提供一个值，可以在应用中的所有后代组件中注入使用。

类型

interface App { provide<T>(key: InjectionKey<T> | symbol | string, value: T): this }

Glob导入

升级 Vite3 后 Glob导入中globEager方法已弃用，如果要批量导入文件可以使用glob方法。
Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块：

import { App } from 'vue'
export function bootstrap(app: App<Element>) {
  // 加载插件
  const Plugins: any = import.meta.glob('./plugins/*.ts', { eager: true })
  Object.keys(Plugins).forEach((key) => {
    const plugin = Plugins[key]
    plugin.setup(app)
  })
}

代码已经提交到Gitee

继续学习

废话只说一句：码字不易求个👍，收藏 === 学会,快行动起来吧！🙇‍🙇‍🙇‍。

# Vite+Vue3+TypeScript+Element (十三) 搭建企业级轻量框架实践（明天更新）