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. 7.5 Windows驱动开发:监控Register注册表回调

    在笔者前一篇文章<内核枚举Registry注册表回调>中实现了对注册表的枚举,本章将实现对注册表的监控,不同于32位系统在64位系统中,微软为我们提供了两个针对注册表的专用内核监控函数,通 ...

  2. C/C++ 实现URL路径拆分

    URL路径拆分: 例如我们传入 http://www.baidu.com/index.php 拆分为 www.baidu.com 和 /index.php #include <Windows.h ...

  3. 香橙派上的eMMC分区

    准备工作 OrangePi Plus 2E(自带16G的eMMC存储,出厂默认eMMC中附带了Android系统,用于测试板子功能) Ubuntu16.04的TF卡 第一张方式: 该方式可以按需删除指 ...

  4. 教你用JavaScript实现搜索展开

    欢迎来的我的小院,恭喜你今天又要涨知识了! 案例内容 利用JavaScript实现搜索框的移动展开. 演示 学习 <!DOCTYPE html> <html lang="e ...

  5. [Docker] Dockerfile常用保留字

    FROM 基础镜像,当前新镜像是基于哪个镜像的,指定一个已经存在的镜像作为模板.第一条必须是from MAINTAINER 镜像维护者的姓名和邮箱地址 RUN 容器构建时需要运行的命令,也就是在 do ...

  6. PAC主成分分析__784手写特征案例

    from sklearn.neighbors import KNeighborsClassifier as KNN from sklearn.decomposition import PCA from ...

  7. NC14526 购物

    题目链接 题目 题目描述 在遥远的东方,有一家糖果专卖店. 这家糖果店将会在每天出售一些糖果,它每天都会生产出 \(m\) 个糖果,第i天的第j个糖果价格为 \(C[i][j]\) 元. 现在的你想要 ...

  8. STM32F407VET6烧录出现flash download failed target dll has been cancelled

    今天在通过stlink烧录一个长时间未用的STM32F407VET6 Black Board的时候, 出现错误 Internal command error Flash download failed ...

  9. Centos7使用memtester测试内存

    memtester http://pyropus.ca/software/memtester/ 下载并编译, 不用安装 wget http://pyropus.ca/software/memteste ...

  10. 【Unity3D】Shader常量、变量、结构体、函数

    1 源码路径 ​ Unity Shader 常量.变量.结构体.函数一般可以在 Unity Editor 安装目录下面的[Editor\Data\CGIncludes\UnityShader]目录下查 ...