vue3+ts 全局挂载以及声明写法
vue3全局挂载需要通过globalProperties// 以api为例// 文件路径 /plugins/index.jsimport Api from "../api/index"; // 为需要挂载到vue上的函数export default {install: (app: any) => {app.config.globalProperties.$Api = Api;}};// 文件
·
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
}
}
完成撒花
更多推荐
已为社区贡献1条内容
所有评论(0)