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

news2024/9/20 22:42:20

main.js添加一下代码:

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.coloradmin.cn/o/856161.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue2-简介、模板语法、数据绑定、MVVM、数据代理、事件处理

🥔:成功之后就能光明正大地回望所有苦难 VUE-Day1 Vue简介1、Vue是什么?2、谁开发的? 发展历程?3、Vue的特点4、容器和实例、实例中的el和data总结 Vue模板语法插值语法指令语法 数据绑定1.单向数据绑定(v-…

SpringBoot入职学习

一、前言 公司入职,第一个事是把公司项目运行起来。然后在经过几天的颠沛流离,遇到一个事情。在创建yml文件的时候,需要设置自己的配置文件。当然还是先跑起来项目,就使用别人的yml文件。但是,到springboot配置那里卡…

视频抠像软件有哪些?简单好用视频抠像软件分享

在视频后期制作中,抠像通常用于将视频中的某个元素从其背景中分离出来。这种处理技术可以用于各种用途,比如创建特效、添加背景,或者将视频元素组合到新场景中。在电影、电视剧和广告等专业的影视制作中,抠像是一个常见的技术步骤…

cesium学习记录04-坐标系

一、地理坐标系和投影坐标系的关系 地理坐标系 (Geographic Coordinate System, GCS) 定义:地理坐标系是一个基于三维地球表面的坐标系统。它使用经度和纬度来表示地点的位置。 特点: 使用经纬度来定义位置。 基于特定的地球参考椭球体。 适用于全球范…

2023河南萌新联赛第(五)场:郑州轻工业大学 --亚托莉 -我挚爱的时光-

题目描述 亚托莉,-我挚爱的时光- 亚托莉自身机器可能有出了一点小故障,希望你能帮助她解决这个问题~ 亚托莉内部的操作系统的是 Linux 操作系统,不同于 Windows 操作系统。在大多数情况下, Linux 操作系统一般是通过…

死磕Android性能优化,卡顿原因与优化方案

随着移动互联网的快速发展,Android应用的性能优化变得尤为重要。卡顿是用户体验中最常见的问题之一,它会导致应用的响应变慢、界面不流畅,甚至影响用户的使用体验。因此,我们需要深入了解卡顿问题的原因,并寻找相应的解…

(Python)Requests+Pytest+Allure接口自动化测试框架从0到1搭建

前言:本文主要介绍在企业使用Python搭建接口自动化测试框架,数据驱动读取excel表里的数据,和数据库方面的交互,包括关系型数据库Mysql和非关系型数据库MongDB,连接数据库,读取数据库中数据,最后…

刷题DAY18

题目一 LRU算法的实现 做一个key-value结构 假如说这个LRU的大小为3 那么就是当KEY-value没满的时候 直接顺序加入 当满了的时候 把最长时间没有使用的key-value替换掉 要求实现一个put 和 get行为 时间复杂度均为O(1) 用双向链表哈希表实现 哈希表可以用系统封装的双向链表…

node笔记——调用免费qq的smtp发送html格式邮箱

文章目录 ⭐前言⭐smtp授权码获取⭐nodemailer⭐postman验证接口⭐结束 ⭐前言 大家好,我是yma16,本文分享关于node调用免费qq的smtp发送邮箱。 node系列往期文章 node_windows环境变量配置 node_npm发布包 linux_配置node node_nvm安装配置 node笔记_h…

嵌入式开发的学习与未来展望:借助STM32 HAL库开创创新之路

引言: 嵌入式开发作为计算机科学领域的重要分支,为我们的日常生活和产业发展提供了无限的可能。STMicroelectronics的STM32系列芯片以其出色的性能和广泛的应用领域而备受关注。而STM32 HAL库作为嵌入式开发的高级库,为学习者提供了更高效、更…

Jmeter(六) - 从入门到精通 - 建立数据库测试计划(详解教程)

1.简介 在实际工作中,我们经常会听到数据库的性能和稳定性等等,这些有时候也需要测试工程师去评估和测试,因此这篇文章主要介绍了jmeter连接和创建数据库测试计划的过程,在文中通过示例和代码非常详细地介绍给大家,希望对各位小伙…

浅谈JVM中的即时编译器(Just-In-Time compiler, JIT)

Java虚拟机(JVM)中的即时编译器(Just-In-Time compiler, JIT)是一个非常重要的组件,它负责将字节码转换为本地机器代码。在不使用JIT的情况下,JVM通过解释字节码来执行程序,这意味着它会为每个字…

24届近5年上海理工大学自动化考研院校分析

今天学姐给大家带来的是上海理工大学控制考研分析 满满干货~还不快快点赞收藏 一、上海理工大学 学校简介 上海理工大学(University of Shanghai for Science and Technology)是一所以工学为主,工学、理学、经济学、管理学、文…

如何实现Excel中多级数据联动

摘要:本文由葡萄城技术团队于CSDN原创并首发。转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 前言 在类Excel表格应用中,常用的需求场景是根据单元格之间的数据联动&…

Leetcode-每日一题【剑指 Offer 13. 机器人的运动范围】

题目 地上有一个m行n列的方格,从坐标 [0,0] 到坐标 [m-1,n-1] 。一个机器人从坐标 [0, 0] 的格子开始移动,它每次可以向左、右、上、下移动一格(不能移动到方格外),也不能进入行坐标和列坐标的数位之和大于k的格子。例…

css3背景渐变

1.线性渐变 <style>.box {width: 200px;height: 200px;border: 1px solid black;float: left;margin-left: 50px;}.box1 {background-image: linear-gradient(green, yellow, red);}/* 右上 */.box2 {background-image: linear-gradient(to right top, green, yellow, re…

Fortinet安全专家问答实录|如何防护暴力破解、撞库攻击

黑客攻防&#xff0c;一个看似神秘&#xff0c;但却必不可缺的领域。近期&#xff0c;全球网络与安全融合领域领导者Fortinet&#xff08;Nasdaq&#xff1a;FTNT&#xff09;&#xff0c;开启了Fortinet DEMO DAY系列实战攻防演练线上直播&#xff0c;让人人都能零距离观摩黑客…

spring cloud智慧工地源码(项目端+监管端+数据大屏+APP)

spring cloud智慧工地源码&#xff08;项目端监管端数据大屏APP&#xff09; 系统功能介绍 【智慧工地PC项目端功能总览】 一.项目人员管理 包括&#xff1a;信息管理、信息采集、证件管理、考勤管理、考勤明细、工资管理、现场统计、WIFI教育、工种管理、分包商管理、班组管…

5W2H分析法模版

&#xff08;1&#xff09;WHAT——是什么&#xff0c;目的是什么&#xff0c;做什么工作。 条件是什么&#xff0c;哪一部分工作要做&#xff0c;目的是什么&#xff0c;重点是什么&#xff0c;与什么有关系&#xff0c;功能是什么&#xff0c;规范是什么&#xff0c;工作对象…

【LeetCode】打家劫舍||

打家劫舍|| 题目描述算法分析编程代码 链接: 打家劫舍|| 在做这个题之前&#xff0c;建议大家做一下这个链接: 按摩师 我的博客里也有这个题的讲解&#xff0c;名字是按摩师 题目描述 算法分析 编程代码 class Solution { public:int maxrob(vector<int>nums,int left,…