vue3+ts 全局挂载以及声明写法

vue3全局挂载需要通过globalProperties

// 以api为例
// 文件路径 /plugins/index.js
import Api from "../api/index"; // 为需要挂载到vue上的函数

export default {
  install: (app: any) => {
    app.config.globalProperties.$Api = Api;
  }
};
// 文件路径 main.js
const app = createApp(App);
// 通过use即挂载成功
app.use(api);

app
  .use(store)
  .use(router)
  .mount("#app");

此时在.vue文件中调用ts会报错，$Api不存在，需要对vue进行补充声明

// 文件路径 shims-vue.d.ts
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

// 对vue进行类型补充说明
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $Api: any // 这里可以用$Api具体的类型代替any
  }
}

完成撒花