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
  }
}

完成撒花

Logo

智屏生态联盟致力于大屏生态发展,利用大屏快应用技术降低开发者开发、发布大屏应用门槛

更多推荐