vue 批量自动引入并注册组件或路由实现详解
更新时间：2023年07月07日 14:50:18 作者：littlesunn
这篇文章主要为大家介绍了vue 批量自动引入并注册组件或路由实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
批量引入组件.vue后缀或.js,或.ts文件
有时候有大量的组件.vue后缀的,或.js,或.ts文件, 需要一个个的手动引入很麻烦,那么你可以尝试这样创建一个index.js
本项目使用vue3.x, vue2.x也可以照样用;
这里在components里面创建了一个idnex.js 文件
require.context 读取文件
第一个参数是指当前文件夹, 第二个参数是是否递归遍历寻找子节点设为ture, 第三个正则匹配
//自动注册,不必一个个导入导出
const requireComponent = require.context(
// 其组件目录的相对路径
'./',
// 是否查询其子目录,递归查询
true,
// 匹配基础组件文件名的正则表达式
/.(vue)$/
)
var fileArr:any[] = [] //导出路由对象
requireComponent.keys().forEach((fileName) => {
// 获取组件配置
const componentConfig = requireComponent(fileName)
let compName = fileName.split("/")[fileName.split("/").length - 1].split(".")[0];
if (componentConfig.default) {
fileArr.push({
name: compName,
compnent: componentConfig.default
})
}
})
export default fileArr;这样你就得到了一个数组,数组里面多个组件的对象,有名字,有组件内容,详情可以自己打印试试;
main.ts中引用
fileArr.forEach(item=>{
console.log(item.name, item.compnent);
vue.component(item.name, item.compnent); //全局注册了
})遍历fileArr,将所有的组件都注册进去;这样就是全局注册了,使用的时候就不用一个一个的import了,这种做法小项目可以用,但是大型项目太多文件都全局注册恐怕会影响性能;
按照这个思路,比如路由啊,api啊还有状态管理这些模块化的,大量的文件都不需要手动import了,只要你创建了这个文件,就会被自动读取;
以上就是vue 批量自动引入并注册组件或路由实现详解的详细内容，更多关于vue引入注册组件路由的资料请关注脚本之家其它相关文章！
相关文章
Wavesurfer.js是一款基于HTML5 canvas和Web Audio的声纹可视化插件，功能十分强大，在Vue框架中嵌入使用该插件，今天重点给大家介绍下vue使用wavesurfer.js解决音频可视化播放问题，感兴趣的朋友一起看看吧2022-04-04
Pinia 是 Vue.js 的轻量级状态管理库,最近很受欢迎,它使用 Vue 3 中的新反应系统来构建一个直观且完全类型化的状态管理库,下面就跟随小编一起来学习一下它的具体使用吧2023-10-10
前后端分离的项目，遇到了对密码进行加密的情况，在前端或者是在后端加密都是可以的，本文主要介绍了Vue使用MD5对前后端进行加密的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
本文主要介绍了element-plus中如何实现按需导入与全局导入，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
如今Vue3的势头正盛，在diff算法方面也做了相应的变化，利用到了最长递增子序列把性能又提升了一个档次。本文就来带大家简单解刨一下Vue3中的diff算法2023-02-02
有些时候客户希望产品使用他们公司要求的字体,这个时候我们需要将客户提供的字体文件引入到项目中,下面这篇文章主要给大家介绍了关于Vue项目导入字体文件的方法步骤,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue使用el-select下拉框匹配不到值的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要为大家介绍了基于vue.js的QQ聊天室，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
今天小编就为大家分享一篇浅谈vue 锚点指令v-anchor的使用，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了Vue-resource三种请求格式和万能测试地址,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
最新评论