vue3 动态导入src/page目录下的所有子文件,并自动注册所有页面组件

news/2024/7/10 2:49:04 标签: javascript, 前端, 开发语言, vue

main.js添加一下代码:

javascript">const importAll = (modules) => {
  Object.keys(modules).forEach((key) => {
    const component = key.replace('/src/', '@/').replace('.vue', '');
    const componentName = key.split('/').slice(-2, -1)[0] + '-page';
    app.component(componentName, modules[key].default);
  });
};
// 动态导入src/pages目录下的所有子文件
const modules = import.meta.globEager('@/page/**/*.vue');

importAll(modules);

动态导入src/pages目录下的所有子文件
在这里插入图片描述
引入:
在这里插入图片描述
引入之前:
在这里插入图片描述

引入之后:
在这里插入图片描述


http://www.niftyadmin.cn/n/4940352.html

相关文章

Day 48

Day 48 198.打家劫舍 确定dp数组(dp table)以及下标的含义 dp[i]:考虑下标i(包括i)以内的房屋,最多可以偷窃的金额为dp[i]。 确定递推公式 决定dp[i]的因素就是第i房间偷还是不偷。 如果偷第i房间&am…

【双指针_有效三角形的个数_C++】

题目解析 有效三角形的个数 判断三角形:任意两边之和大于第三边 需要重复计算: 知识点 1、需要判断三次: 2、只需要判断一次 已经知道这三个数的大小(先进行排序) 只需要判断 较小的两个数之和 是否 大于最大的…

uni——初次加载问题处理(赋值后再调用)

案例描述 此案例中 一进页面接收good_id并调用接口,这个流程正常。 这个changeNum也是一进页面就触发了(组件购物车加减自带),且触发的顺序在onload赋值id之前,这时候good_id还是为空,所以接口报错。如何处…

java Spring Boot yml多环境配置

我们项目 线上和线下 环境配置不是特别一样 例如 运行的URL 数据库地址 数据库的账号密码 这些经常是不一样的 如果每次上线钱改 也不是特别方便 甚至可能忘记 那么 进入我们代码中 所谓的多环境 就是在不同的环境下配置不同的值 终端还是在application配置文件中 多环境的话…

vueRouter回顾

关于vueRouter的两种路由模式 “history” 模式使用正常的 URL 格式,例如 https://example.com/path。“hash” 模式将路由信息添加到 URL 的哈希部分(#)后面,例如 https://example.com/#/path。 1、history模式:没有…

这四种订货系统不能选(四):不能源码交付

订货系统在现代企业管理中具备着重要的地位和作用。通过订货系统,企业能够更好地掌握市场需求,提高订单的准确性和及时性,优化企业的供应链管理,并加强与供应商之间的合作与沟通。今天我们分享最后一个不能选的、也是最重要的一点…

HarmonyOS NEXT新能力,一站式高效开发HarmonyOS应用

2023年8月6日华为开发者大会2023(HDC.Together)圆满收官,伴随着HarmonyOS 4的发布,华为向开发者发布了汇聚所有最新开发能力的HarmonyOS NEXT开发者预览版,并分享了围绕“一次开发,多端部署” “可分可合&a…

喜盈门、梦百合竞相入局,智能床垫起风了

配图来自Canva可画 现代人的生活压力普遍大,熬夜、失眠是常有的事,提高睡眠质量十分的重要。近些年来,市面上出现了许多辅助睡眠的产品,比如香薰、褪黑素、蒸汽眼罩、降噪耳塞、助眠枕、睡眠监测app等助眠神器。可以说为了睡个好…