《Vite 基础知识》使用 Glob 动态加载 .vue 文件

前言

开发基于 Vite + Vue3 的组件库,多个 .vue 文件需要动态加载!
注意 import.meta.globEager 已经弃用,请使用 import.meta.glob 来代替!

使用 Glob

异步方式

  • 代码第 1 行,注意使用两个 **,匹配当前目录及其嵌套的全部子目录下的文件;
  • 代码第 4 行,异步使用 Promise 加载,所以要在 then 中获取真正的组件对象;
const modules = import.meta.glob('./src/components/**/*.vue');for (const path in modules) {modules[path]().then((mod) => {console.log(path, mod.default);})
}

同步方式

  • 代码第 1 行,相较于异步同步方式多了配置参数 { eager: true }
  • 代码第 1 行,注意使用两个 **,匹配当前目录及其嵌套的全部子目录下的文件;
  • 代码第 4 行,同步加载不需要 Promise 处理;
const modules = import.meta.glob('./src/components/**/*.vue', { eager: true });for (const path in modules) {console.log(path, modules[path].default);
}

扩展知识


glob 是基于插件 fast-glob 实现的。官网介绍如下:

It’s a very fast and efficient glob library for Node.js.
这是一个基于 node.js 且非常高效的全局库。

一个 *:匹配当前目录下的文件;
两个 *:匹配当前目录及其嵌套的全部子目录下的文件;

​​

最后

正在学习 Vite,更多知识点详见官网 《功能 - Glob 导入》!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/624095.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

语境化语言表示模型-ELMO、BERT、GPT、XLnet

一.语境化语言表示模型介绍 语境化语言表示模型(Contextualized Language Representation Models)是一类在自然语言处理领域中取得显著成功的模型,其主要特点是能够根据上下文动态地学习词汇和短语的表示。这些模型利用了上下文信息&#xf…

医院患者满意度调查方法有哪些?

医院患者满意度调查可以使用多种方法来收集患者的反馈和意见。以下是一些常见的医院患者满意度调查方法: 在线调查问卷:这是一种常见的调查方法,患者可以在电脑、平板电脑或智能手机上填写问卷。在线问卷通常易于分发和收集,可以…

DrGraph原理示教 - OpenCV 4 功能 - 形态操作

形态类型 从OpenCV图像处理基本知识来看,膨胀腐蚀操作后,还有形态操作,如开运算、闭运算、梯度、礼帽与黑帽,感觉很多,其实,本质上就是批处理操作,如 开运算:先腐蚀,再膨…

大模型LLM Agent在 Text2SQL 应用上的实践

1.前言 在上篇文章中「如何通过Prompt优化Text2SQL的效果」介绍了基于Prompt Engineering来优化Text2SQL效果的实践,除此之外我们还可以使用Agent来优化大模型应用的效果。 本文将从以下4个方面探讨通过AI Agent来优化LLM的Text2SQL转换效果。 1 Agent概述2 Lang…

deepseed 单机多卡程序报错:exits with return code -7

现象:exits with return code -7原因:Setting the shm-size to a large number instead of default 64MB when creating docker container solves the problem in my case. It appears that multi-gpu training relies on the shared memory. ref 排查是…

肯尼斯·里科《C和指针》第6章 指针(3)

肯尼斯里科《C和指针》第6章 指针(1)-CSDN博客 肯尼斯里科《C和指针》第6章 指针(2)-CSDN博客 前置知识:左值右值 为了理解有些操作符存在的限制,必须理解左值(L-value)和右值(R-value)之间的区别。这两个…

2024年百场进校公益安全培训开启

自2023年年底,上海风暴救援队积极策划并推动了2024年的“百场进校传安全”培训项目。经过在东方锦绣于2023年12月14日、上钢新村幼儿园于2023年12月28日的先期测试,项目于2024年1月5日在齐河路幼儿园正式启动。随后,于2024年1月11日在浦南幼儿…

顺序表和链表基础

定义动态的顺序表 typedef int SLDataType; typedef struct Seqlist {SLDataType* array;size_t size;size_t capacity; }Seqlist; 在顺序表中插入数据 bool ListInsert(Seqlist* l, int i, SLDataType e) {if (i < 1 || i > l->capacity)return false;int j;for (…

【大数据进阶第三阶段之Hue学习笔记】Hue的安装和使用

1、 Hue的安装 1.1 上传解压安装包 Hue的安装支持多种方式&#xff0c;包括rpm包的方式进行安装、tar.gz包的方式进行安装以及cloudera manager的方式来进行安装等&#xff0c;我们这里使用tar.gz包的方式来进行安装 Hue的压缩包的下载地址&#xff1a; http://archive.cloude…

torch.cat()函数的理解

torch.cat() 是 PyTorch 中的一个函数&#xff0c;用于在指定的维度上连接&#xff08;concatenate&#xff09;张量&#xff08;tensors&#xff09;。它的功能是将多个张量沿着指定的维度拼接在一起。 函数签名如下&#xff1a; torch.cat(tensors, dim0, *, outNone) ->…

python绘制热力图-数据处理-VOC数据类别标签分布及数量统计(-代码)

Python是一种功能强大的编程语言&#xff0c;它提供了许多库和工具&#xff0c;用于处理和可视化数据。在本文中&#xff0c;我们将介绍使用Python绘制热力图&#xff0c;并对VOC数据集中的类别标签进行分布及数量统计。 首先&#xff0c;我们需要导入所需的库。使用numpy库来…

查找算法(部分)

顺序查找 顺序查找是最简单的了&#xff0c;属于无序查找算法&#xff0c;它的原理就是从前往后一个一个的找&#xff0c;如果找到了就返回它的位置&#xff0c;否则就返回-1。 如果有多个相同元素的话&#xff0c;返回第一个该元素的位置。 代码&#xff1a; #include<…

在 CentOS 中,zip 是一个常用的命令行工具,用于创建和提取 zip 归档文件。

以下是一些常见的 zip 命令用法 创建 zip 归档文件&#xff1a; # 创建包含目录或文件的 zip 归档文件 zip -r archive.zip /path/to/directory_or_file# 创建并压缩 zip 归档文件 zip -r -9 archive.zip /path/to/directory_or_file -r: 递归地包含目录中的文件。-9: 使用最…

VCG 网格简化之移动立方体

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 我们先来回顾一下原始的移动立方体算法,该算法的基本思想是通过找出所有与等值面相交的体素,在这些基础上再分别找出每个体素与等值面相交的交面,最终将这些交面连在一起即是我们所求的曲面。其大致过程如下所述…

Vue3 中使用 Vuex 和 Pinia 对比之 Vuex的用法

本文基于 Vue3 的 composition API 来展开 Vuex 和 Pinia 的用法比较 Pinia传送门 Vuex传送门 Vuex 状态管理的核心概念 状态- 驱动应用的数据源&#xff1b;视图 - 以声明方式将状态映射到视图&#xff1b;操作 - 响应在视图上的用户输入导致的状态变化 下面是源自Vuex 官…

《LIO-SAM阅读笔记》IMU作用总结

LIO-SAM作为一个Lidar和IMU为主的紧耦合框架&#xff0c;两者缺一不可&#xff0c;这里总结一下LIO-SAM中IMU起到的作用&#xff1a; 1.利用当前帧Lidar里程计作为起点&#xff0c;结合IMU预积分&#xff0c;得到IMU里程计信息。 此处IMU里程计是以IMU的频率向外发送位姿估计&…

数据结构之二叉树简介

二叉树 二叉树是一种非线性数据结构&#xff0c;代表“祖先”与“后代”之间的派生关系&#xff0c;体现了“一分为二”的分治逻辑。与链表相似&#xff0c;二叉树的基本单元是节点&#xff0c;每个节点包含值&#xff0c;左子节点的索引&#xff0c;右子节点的索引 /* 二叉树节…

重建大师模型跑出来后,怎么替换另一个工程里面的瓦片?

答&#xff1a;如果只是看模型的话&#xff0c;可以直接把成果osgb合并在一起 重建大师是一款专为超大规模实景三维数据生产而设计的集群并行处理软件&#xff0c;输入倾斜照片&#xff0c;激光点云&#xff0c;POS信息及像控点&#xff0c;输出高精度彩色网格模型&#xff0c;…

进口零部件三维模型扫描替换抄数建模逆向造型设计服务CASAIM

三维扫描技术在现代制造业中发挥着越来越重要的作用&#xff0c;尤其在零部件建模领域&#xff0c;它能够快速、准确地获取物体的三维数据&#xff0c;为后续的逆向工程和快速原型制造提供了有力支持。 CASAIM三维扫描仪设备通过对零部件进行三维扫描&#xff0c;我们可以获得…

OpenHarmony4.0适配LVDS屏幕驱动

1.概述 手头有一块RK3568的开发板OK3568-C&#xff0c;但是还没有适配OpenHarmony&#xff0c;用的还是LVDS屏幕&#xff0c;但是官方和网上好像还没有OpenHarmony4.0的LVDS屏幕驱动的通用实现&#xff0c;所以决定尝试了一下适配该开发板&#xff0c;完成LVDS屏幕驱动的适配&…