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

简介: vue 批量自动引入并注册组件或路由

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

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

image.png

这里在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;

这样你就得到了一个数组,数组里面多个组件的对象,有名字,有组件内容,详情可以自己打印试试;

image.png

然后main.ts中引用;

fileArr.forEach(item=>{
   
   
    console.log(item.name, item.compnent);
    vue.component(item.name, item.compnent);   //全局注册了
})

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

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

目录
相关文章
|
1天前
|
JavaScript 前端开发 网络架构
vue 路由器history和hash工作模式
vue 路由器history和hash工作模式
|
2天前
|
JSON 缓存 JavaScript
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
10 0
|
2天前
|
JavaScript
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
9 0
|
JavaScript Go
|
JavaScript C语言 Go
|
3天前
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
22 1
|
2天前
|
JSON JavaScript 前端开发
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
10 1
|
3天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
12 2
|
3天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【3.项目路由的分析】
vue尚品汇商城项目-day01【3.项目路由的分析】
11 1
|
3天前
|
JavaScript 前端开发 数据安全/隐私保护
vue尚品汇商城项目-day01【5.路由组件的搭建】
vue尚品汇商城项目-day01【5.路由组件的搭建】
9 0
vue尚品汇商城项目-day01【5.路由组件的搭建】

相关实验场景

更多