Vite方式实现自动导入步骤
1、在src下会有一个api文件夹,结构如下:
2、通常情况下,api文件夹的index.js文件我们通常是这样来引入的
import * as login from './modules/login'
import * as system from './modules/system'
export default {
...login ,
...system
}
3、用import.meta.globEager来自动引入所有的文件,代码如下:
import request from "@/utils/request";
const files: any = import.meta.globEager("./modules/*.ts");
let modules: any = {};
Object.entries(files).forEach(([k, v]) => {
Object.assign(modules, v);
});
export const getDicts = (dictType: any) => {
return request({ url: `/system/dict/data/type/${dictType}`, method: "GET" });
};
export default {
getDicts,
...modules
};
4、全局注册api(main.ts)
import api from "@/api";
let instance = createApp(App);
instance.config.globalProperties.$api = api;
5、页面使用
const { appContext } = getCurrentInstance() as any;
const global = appContext.config.globalProperties;
const getMenuData = async () => {
const res = await global.$api.getRouters();
if (res.success) {
state.table.data = res.data;
}
};
onMounted(() => {
getMenuData();
});
6、最终效果
相关文章
Vue3 + Vite + Ts开源后台管理系统模板
基于ElementUi或AntdUI再次封装基础组件文档
基于Element-plus再次封装基础组件文档(vue3+ts)