vue 批量自动引入并注册组件或路由等等

有时候有大量的组件.vue后缀的,或.js,或.ts文件, 需要一个个的手动引入很麻烦,那么你可以尝试这样创建一个index.js

本项目使用vue3.x, vue2.x也可以照样用;

这里在components里面创建了一个idnex.js 文件

require.context  可以读取文件, 第一个参数是指当前文件夹, 第二个参数是是否递归遍历寻找子节点设为ture, 第三个正则匹配

这样你就得到了一个数组,数组里面多个组件的对象,有名字,有组件内容(这些文件都是会有export default导出东西才有意义),详情可以自己打印试试;

然后main.ts中引用;

遍历fileArr,将所有的组件都注册进去;这样就是全局注册了,使用的时候就不用一个一个的import了,这种做法小项目可以用,但是大型项目太多文件都全局注册恐怕会影响性能;

按照这个思路,比如路由啊,api啊还有状态管理这些模块化的,大量的文件都不需要手动import了,只要你创建了这个文件,就会被自动读取;

对你有帮助的话,帮忙点赞投币呀!