vue3 + ts 如何封装全局插件

在 Vue 3 + TypeScript 中，封装全局插件可以采用以下步骤：

1. 创建一个插件对象，并在该对象上定义 `install` 方法，用于在 Vue 实例中安装插件。

import { App } from 'vue'

const myPlugin = {
  install(app: App) {
    // 在这里注册插件
  }
}

export default myPlugin

2. 在插件中定义插件选项的类型。

interface MyPluginOptions {
  // 插件选项
}

const myPlugin = {
  install(app: App, options: MyPluginOptions) {
    // 在这里使用插件选项
  }
}

3. 扩展 Vue 的全局类型，以便在 Vue 实例中使用插件。

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $myPlugin: {
      // 插件方法
    }
  }
}

4. 在应用程序中使用插件。

import { createApp } from 'vue'
import myPlugin from './myPlugin'

const app = createApp({ /* 应用程序选项 */ })

app.use(myPlugin, { /* 插件选项 */ })

5. 在组件中使用插件方法。

import { defineComponent } from 'vue'

export default defineComponent({
  mounted() {
    this.$myPlugin.doSomething() // 调用插件方法
  }
})

这样，在 Vue 3 + TypeScript 中，就可以方便地封装和使用全局插件了。