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. 3.1 DLL注入:常规远程线程注入

    动态链接库注入技术是一种特殊的技术,它允许在运行的进程中注入DLL动态链接库,从而改变目标进程的行为.DLL注入的实现方式有许多,典型的实现方式为远程线程注入,该注入方式的注入原理是利用了Window ...

  2. BAT大厂面试的100道考题【算法、源码、架构、中间件、设计模式、网络、项目】,过60分的不到10%

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 独生子女生娃,没救了! 考题:https://docs.qq.com/form/page/DT ...

  3. 性能暴增70%!AMD线程撕裂者RPO 7000将于10月19日发布: 96核心Zen 4史无前例

    据wccftech最新报道,AMD的下一代Ryzen Threadripper(线程撕裂者)PRO 7000"Storm Peak"CPU将于10月19日作为终极工作站解决方案亮相 ...

  4. PCIe诞生20年来最大变革!引入光学传输

    PCI-SIG组织官方宣布,已经成立新的光学工作组(Optical Workgroup),研究为PCIe规范引入光学传输接口的可能性. PCIe标准是Intel 2001年提出的,2003年发布1.0 ...

  5. shell 两个数组比较,得到元素的并集、交集等

    linux shell 实现数组比较,取元素的并集.交集时,可以使用sort排序.uniq统计和awk数据过滤. shell 实现如下 file_list_1=("test1" & ...

  6. NC216012 Let'sPlayCurling

    题目链接 题目 题目描述 Curling is a sport in which players slide stones on a sheet of ice toward a target area ...

  7. NC22604 小A与任务

    题目链接 题目 题目描述 小A手头有 n 份任务,他可以以任意顺序完成这些任务,只有完成当前的任务后,他才能做下一个任务 第 i 个任务需要花费 \(x_i\) 的时间,同时完成第 i 个任务的时间不 ...

  8. 基于 log4j2 插件实现统一日志脱敏,性能远超正则替换

    前言 金融用户敏感数据如何优雅地实现脱敏? 日志脱敏之后,无法根据信息快速定位怎么办? 经过了这两篇文章之后,我们对日志脱敏应该有了一定的理解. 但是实际项目中,我们遇到的情况往往更加复杂: 1)项目 ...

  9. mysql日期范围查找(两个日期之间的记录)

    转自:https://blog.csdn.net/lzxlfly/article/details/97577575?utm_medium=distribute.pc_relevant_t0.none- ...

  10. Qt+MPlayer音乐播放器开发笔记(二):交叉编译MPlayer以及部署到开发板播放演示

    前言   在ubuntu上arm交叉编译MPlayer播放器,并部署到开发板播放音乐.   Demo                Mplayer   MPlayer是一款开源多媒体播放器,以GNU通 ...