import.meta.globEager('./src/components/**/*.vue'); 遍历文件
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'); 遍历文件的更多相关文章
- Element + Vue I18n动态import加载国际化语言包翻译文件
需求 项目为多页应用,包含产品a.b.c.d.e,每个产品都有自己的翻译文件.一次加载所有翻译文件是极度不合理的.于是考虑动态加载. 实现 参考官方文档:延迟加载翻译 项目结构 │ ├── dist ...
- webpack入坑之旅(五)加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- webpack构建vue单文件组件
1.安装vue-loader和vue-template-compiler npm i vue-loader vue-template-compiler --save-dev 2.配置webpack.c ...
- 一丢丢学习之webpack4 + Vue单文件组件的应用
之前刚学了一些Vue的皮毛于是写了一个本地播放器https://github.com/liwenchi123000/Local-Music-Player,如果觉得ok的朋友可以给个star. 就是很简 ...
- VUE2 第六天学习--- vue单文件项目构建
阅读目录 VUE2 第六天学习--- vue单文件项目构建 回到顶部 VUE2 第六天学习--- vue单文件项目构建 VUE单文件组件在Vue项目中,然后使用 new Vue({el: '#cont ...
- vue 单文件组件
在很多vue项目中,我们使用vue.component来定义全局组件,紧接着用new Vue({el:'#container'})在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好 ...
- Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参
目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 ...
- webpack打包vue单文件组件
一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...
- 如何手动解析vue单文件并预览?
开头 笔者之前的文章里介绍过一个代码在线编辑预览工具的实现(传送门:快速搭建一个代码在线编辑预览工具),实现了css.html.js的编辑,但是对于demo场景来说,vue单文件也是一个比较好的代码组 ...
- Java解压上传zip或rar文件,并解压遍历文件中的html的路径
1.本文只提供了一个功能的代码 public String addFreeMarker() throws Exception { HttpSession session = request.getSe ...
随机推荐
- 强化学习技巧三:Python多进程
1.Python多进程模块 Python中的多进程是通过multiprocessing包来实现的,和多线程的threading.Thread差不多,它可以利用multiprocessing.Proce ...
- 19.12 Boost Asio 获取远程进程
远程进程遍历功能实现原理与远程目录传输完全一致,唯一的区别在于远程进程枚举中使用EnumProcess函数枚举当前系统下所有活动进程,枚举结束后函数返回一个PROCESSENTRY32类型的容器,其中 ...
- Linux 应用Kickstart部署系统
Kickstart 是一种无人值守系统安装方式,其工作原理是预先把原本需要运维人员手工填写的参数保存成文件,当安装过程中需要填写参数时则自动匹配Kickstart生成的文件,所以只要文件内包含了安装过 ...
- 线程锁(Python)
一.多个线程对同一个数据进行修改 from threading import Thread,Lock n = 0 def add(lock): for i in range(500000): glob ...
- centos7.9离线安装MongoDB4.4.17
前言 MongoDB 5.0开始要求CPU支持avx指令集,参考https://mp.weixin.qq.com/s/6FFXih1DEZYDFOk1hCu69w 环境 CentOS 7.9.2009 ...
- 3.4 CSP-J 补赛游寄
3.4 CSP-J 补赛游寄 Day -? 听说要去打比赛. Day -7 今天家长会,老师公布成绩 /fn/fn/fn.政治考废了,然后其他都挺好. 语文 $ 95 $,数学 $ 118 $,英语 ...
- 1.变量和简单的数据类型--《Python编程:从入门到实践》
1.1 变量 在Python中使用变量时,需要遵守一些规则和指南. 变量名只能包含字母.数字和下划线.变量名可以字母或下划线打头,但不能以数字打 头. 变量名不能包含空格,但可使用下划线来分隔其中的单 ...
- Kafka-基本介绍和常见问题
1.kafka 1.1.kafka介绍 kafka是最初由linkedin公司开发的,使用scala语言编写,kafka是一个分布式,分区的,多副本的,多订阅者的消息队列系统. 1.2.kafka ...
- Linux Shell获取指定日期 N 天/月/年前(后)的日期
我们有时候在写批处理 Shell 脚本时,可能需要获取指定日期前(后) N 天/月/年的日期,这里的 N 可以是 1 天/月/年.2 天/月/年.3 天/月/年等等.方法其实很简单,这里做一个简单记录 ...
- 【译】发布 .NET Aspire 预览版 2(二)
原文 | Damian Edwards 翻译 | 郑子铭 组件更新 组件包现在有单独的图标 大多数 Aspire 组件的 NuGet 包现在都具有代表性图标,以便在 NuGet 包管理器对话框中更轻松 ...