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. 强化学习技巧三:Python多进程

    1.Python多进程模块 Python中的多进程是通过multiprocessing包来实现的,和多线程的threading.Thread差不多,它可以利用multiprocessing.Proce ...

  2. 19.12 Boost Asio 获取远程进程

    远程进程遍历功能实现原理与远程目录传输完全一致,唯一的区别在于远程进程枚举中使用EnumProcess函数枚举当前系统下所有活动进程,枚举结束后函数返回一个PROCESSENTRY32类型的容器,其中 ...

  3. Linux 应用Kickstart部署系统

    Kickstart 是一种无人值守系统安装方式,其工作原理是预先把原本需要运维人员手工填写的参数保存成文件,当安装过程中需要填写参数时则自动匹配Kickstart生成的文件,所以只要文件内包含了安装过 ...

  4. 线程锁(Python)

    一.多个线程对同一个数据进行修改 from threading import Thread,Lock n = 0 def add(lock): for i in range(500000): glob ...

  5. centos7.9离线安装MongoDB4.4.17

    前言 MongoDB 5.0开始要求CPU支持avx指令集,参考https://mp.weixin.qq.com/s/6FFXih1DEZYDFOk1hCu69w 环境 CentOS 7.9.2009 ...

  6. 3.4 CSP-J 补赛游寄

    3.4 CSP-J 补赛游寄 Day -? 听说要去打比赛. Day -7 今天家长会,老师公布成绩 /fn/fn/fn.政治考废了,然后其他都挺好. 语文 $ 95 $,数学 $ 118 $,英语 ...

  7. 1.变量和简单的数据类型--《Python编程:从入门到实践》

    1.1 变量 在Python中使用变量时,需要遵守一些规则和指南. 变量名只能包含字母.数字和下划线.变量名可以字母或下划线打头,但不能以数字打 头. 变量名不能包含空格,但可使用下划线来分隔其中的单 ...

  8. Kafka-基本介绍和常见问题

    1.kafka 1.1.kafka介绍 ​ kafka是最初由linkedin公司开发的,使用scala语言编写,kafka是一个分布式,分区的,多副本的,多订阅者的消息队列系统. 1.2.kafka ...

  9. Linux Shell获取指定日期 N 天/月/年前(后)的日期

    我们有时候在写批处理 Shell 脚本时,可能需要获取指定日期前(后) N 天/月/年的日期,这里的 N 可以是 1 天/月/年.2 天/月/年.3 天/月/年等等.方法其实很简单,这里做一个简单记录 ...

  10. 【译】发布 .NET Aspire 预览版 2(二)

    原文 | Damian Edwards 翻译 | 郑子铭 组件更新 组件包现在有单独的图标 大多数 Aspire 组件的 NuGet 包现在都具有代表性图标,以便在 NuGet 包管理器对话框中更轻松 ...