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. 知识蒸馏相关技术【模型蒸馏、数据蒸馏】以ERNIE-Tiny为例

    1.任务简介 基于ERNIE预训练模型效果上达到业界领先,但是由于模型比较大,预测性能可能无法满足上线需求. 直接使用ERNIE-Tiny系列轻量模型fine-tune,效果可能不够理想.如果采用数据 ...

  2. 强化学习从基础到进阶-案例与实践[5.1]:Policy Gradient策略梯度-Cart pole游戏展示

    强化学习从基础到进阶-案例与实践[5.1]:Policy Gradient策略梯度-Cart pole游戏展示 强化学习(Reinforcement learning,简称RL)是机器学习中的一个领域 ...

  3. 【一】gym环境安装以及安装遇到的错误解决

    相关文章: [一]gym环境安装以及安装遇到的错误解决 [二]gym初次入门一学就会-简明教程 [三]gym简单画图 [四]gym搭建自己的环境,全网最详细版本,3分钟你就学会了! [五]gym搭建自 ...

  4. centOS系统 迁移docker镜像及数据文件到指定目录

    话说我今天正在快乐的敲代码,突然看到IDE报警磁盘空间不足了,du -h 查看了一下磁盘占用情况,发现是自己的docker镜像全部放/var/lib/docker目录下 这个系统磁盘给根目录只分配了5 ...

  5. 深入浅出Java多线程(四):线程状态

    引言 大家好,我是你们的老伙计秀才!今天带来的是[深入浅出Java多线程]系列的第四篇内容:线程状态.大家觉得有用请点赞,喜欢请关注!秀才在此谢过大家了!!! 在现代软件开发中,多线程编程已经成为提升 ...

  6. vue实现简易瀑布流

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

  7. delphi 官方例子 simples 路径

    公用 文件件 可能是隐藏的 若是的话 则显示 隐藏

  8. Swoole从入门到入土(6)——TCP服务器[粘包]

    在了解Swoole下如何处理粘包问题之前,我们需要先了解什么是"粘包".我们以下面这张图进行普及: 假设客户端分别发送了两个数据包D1和D2给服务端,由于服务端一次读取到的字节数是 ...

  9. c# 代码操作ftp服务器文件

    好久不见,我又回来了.给大家分享一个最近c#代码操作ftp服务器的代码示例 1 public abstract class FtpOperation 2 { 3 /// <summary> ...

  10. 配置主机访问virtualbox中redhat7.3虚拟机网络(其他系统配置也类似)

    为什么默认无法访问? virtualbox默认分配一个NAT网络,这个是给虚拟机操作系统访问互联网用的,默认主机通过这个ip段无法直接访问虚拟机.[网卡1] 需要添加一块网卡 在虚拟机关闭状态下,点[ ...