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);

资料

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

https://blog.csdn.net/weixin_45791806/article/details/132191937

import.meta.globEager('./src/components/**/*.vue'); 遍历文件的更多相关文章

  1. Element + Vue I18n动态import加载国际化语言包翻译文件

    需求 项目为多页应用,包含产品a.b.c.d.e,每个产品都有自己的翻译文件.一次加载所有翻译文件是极度不合理的.于是考虑动态加载. 实现 参考官方文档:延迟加载翻译 项目结构 │ ├── dist ...

  2. webpack入坑之旅(五)加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  3. webpack构建vue单文件组件

    1.安装vue-loader和vue-template-compiler npm i vue-loader vue-template-compiler --save-dev 2.配置webpack.c ...

  4. 一丢丢学习之webpack4 + Vue单文件组件的应用

    之前刚学了一些Vue的皮毛于是写了一个本地播放器https://github.com/liwenchi123000/Local-Music-Player,如果觉得ok的朋友可以给个star. 就是很简 ...

  5. VUE2 第六天学习--- vue单文件项目构建

    阅读目录 VUE2 第六天学习--- vue单文件项目构建 回到顶部 VUE2 第六天学习--- vue单文件项目构建 VUE单文件组件在Vue项目中,然后使用 new Vue({el: '#cont ...

  6. vue 单文件组件

    在很多vue项目中,我们使用vue.component来定义全局组件,紧接着用new Vue({el:'#container'})在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好 ...

  7. Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参

    目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 ...

  8. webpack打包vue单文件组件

    一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...

  9. 如何手动解析vue单文件并预览?

    开头 笔者之前的文章里介绍过一个代码在线编辑预览工具的实现(传送门:快速搭建一个代码在线编辑预览工具),实现了css.html.js的编辑,但是对于demo场景来说,vue单文件也是一个比较好的代码组 ...

  10. Java解压上传zip或rar文件,并解压遍历文件中的html的路径

    1.本文只提供了一个功能的代码 public String addFreeMarker() throws Exception { HttpSession session = request.getSe ...

随机推荐

  1. SqlSugar分表

    一.使用场景 (1)可扩展架构设计,比如一个ERP用5年不卡,到了10就卡了因为数据太多了,这个时候很多人都是备份然后清空数据 (2) 数据量太多 ,例如每天都有 几十上百万的数据进入库,如果不分表后 ...

  2. C/C++ 常用的四种查找算法

    在计算机科学中,搜索算法是一种用于在数据集合中查找特定元素的算法.C语言作为一种强大的编程语言,提供了多种搜索算法的实现方式.本文将介绍C语言中的四种常见搜索算法其中包括(线性查找,二分法查找,树结构 ...

  3. Spring一套全通2—工厂高级

    百知教育 - Spring系列课程 - 工厂高级特性 第十章.对象的生命周期 1. 什么是对象的生命周期 指的是一个对象创建.存活.消亡的一个完整过程 2. 为什么要学习对象的生命周期 由Spring ...

  4. vue实现简易瀑布流

    实现效果 1.不同屏幕尺寸下根据可视区域宽度判断 应该 放几列,这里用onresize演示 2.鼠标滚动到已加载数据的底部时再次请求数据,重新计算哪一列高度最小,push到最小的那一列 实现思路 1. ...

  5. C++小项目|2022期末大作业

    前言 那么这里博主先安利一下一些干货满满的专栏啦! 手撕数据结构https://blog.csdn.net/yu_cblog/category_11490888.html?spm=1001.2014. ...

  6. Oracle 11g ADG 部署(duplicate)快速参考

    本文旨在指导客户完成Oracle 11g的ADG部署工作,主库环境已具备,备库环境已安装完成数据库软件. 环境:RHEL 6.8 + Oracle 11.2.0.4 1.确认主库运行在归档模式 2.确 ...

  7. Delphi原子操作函数介绍

    一.Delphi的原子操作函数 在System.SyncObjs单元中,有一个TInterlocked的密封类,其十多个类函数(class function)其实都是调用的System单元的原子操作函 ...

  8. .NET Core开发实战(第5课:依赖注入:良好架构的起点)--学习笔记(下)

    05 | 依赖注入:良好架构的起点 注册完毕之后,想替换某些组件的某些部分时,可以使用 Replace 和 RemoveAll services.AddSingleton<IOrderServi ...

  9. [技术选型与调研] 流程引擎(工作流引擎|BPM引擎):Activiti、Flowable、Camunda

    1 概述:流程与流程引擎 低代码平台.办公自动化(OA).BPM平台.工作流系统均需要[流程引擎]功能 BPM平台与工作流系统的区别,参见本文档:3.2 章节 流程引擎是任务分配软件(例如业务流程管理 ...

  10. Clock题解

    Clock 题意:给一些时间,24小时制,给一个初始出发时间,问在钟表上最少转多少度能把所有给的时间都经历一遍. 思路:分四种情况模拟. 注意: 求的是度数,所以最后要乘6转换. 3:00,转到15: ...