当前位置：首页 > news >正文

vue3 怎么自动全局注册某个目录下的所有 vue 和 tsx 组件

news 来源：原创 2025/5/18 10:30:11

在开发 vue3 项目时，我们会有这样的诉求，怎么自动全局注册某个目录下的所有 vue 和 tsx 组件？

虽然已经有非常强大的 unplugin-vue-components 支持，但是在某些动态场景下，unplugin-vue-components 也选择了不支持。
在这里插入图片描述
那么我们来了解下，在不使用 unplugin-vue-components 的情况下，怎么自动全局注册某个或某些目录下的 vue 或 tsx 组件。

方法一：使用 require.context (适用于 Webpack)

require.context 是 Webpack 提供的一个方法，可以扫描指定目录下符合特定规则的文件，并将其作为模块引入。

初始化 Vue 应用

import { createApp } from 'vue';
const app = createApp({/* 你的应用配置 */});

使用 require.context 查找组件
```
const components = require.context('./components', true, /\.vue$|\.tsx$/); // 扫描 './components' 目录及其子目录下的所有 .vue 和 .tsx 文件
```
- './components'：要扫描的目录，相对路径。
- true：是否递归扫描子目录。false 表示只扫描当前目录，true 表示扫描所有子目录。
- /\.vue$|\.tsx$/：匹配的文件名规则，这里匹配以 .vue 或 .tsx 结尾的文件。

全局注册组件

components.keys().forEach(key => {const componentConfig = components(key); // 导入组件const componentName = key.split('/').pop().replace(/\.(vue|tsx)$/, ''); // 提取组件名 (例如，从 './MyComponent.vue' 中提取 'MyComponent')app.component(componentName, componentConfig.default || componentConfig); // 全局注册组件
});app.mount('#app'); // 挂载应用

components.keys()：返回所有匹配的文件路径的数组。
components(key)：根据文件路径导入组件。
componentConfig.default || componentConfig：兼容 ES Module 和 CommonJS 两种导出方式。componentConfig.default 用于 ES Module 的 export default，而 componentConfig 用于 CommonJS 的 module.exports。

方法二：使用 Vite 的 import.meta.glob (适用于 Vite)

如果你的项目使用 Vite 作为构建工具，可以使用 import.meta.glob 来实现类似的功能。

使用 import.meta.glob 查找组件
```
const components = import.meta.glob('./components/**/*.{vue,tsx}', { eager: true }); // 扫描 './components' 目录及其子目录下的所有 .vue 和 .tsx 文件
```
- './components/**/*.{vue,tsx}'：使用 glob 模式匹配文件。** 表示递归匹配所有子目录。
- { eager: true }：立即导入所有匹配的模块。如果不使用 eager: true，则会返回一个 promise，需要在注册组件时进行异步处理。

全局注册组件

import { createApp } from 'vue';
const app = createApp({/* 你的应用配置 */});for (const path in components) {const component = components[path];const componentName = path.split('/').pop().replace(/\.(vue|tsx)$/, '');app.component(componentName, component.default || component);
}app.mount('#app');

方法三：创建 Vue 插件

可以将自动注册组件的逻辑封装成一个 Vue 插件，方便在多个项目中复用。

创建插件文件 (例如 registerComponents.js)

export default {install: (app) => {const components = import.meta.glob('./components/**/*.{vue,tsx}', { eager: true });for (const path in components) {const component = components[path];const componentName = path.split('/').pop().replace(/\.(vue|tsx)$/, '');app.component(componentName, component.default || component);}}
};

在 main.js 中安装插件

import { createApp } from 'vue';
import App from './App.vue';
import registerComponents from './registerComponents'; // 导入插件const app = createApp(App);
app.use(registerComponents); // 安装插件
app.mount('#app');

方法四：使用 index.ts 导出组件

在组件目录下创建一个 index.ts 文件，将所有组件导出，然后在 main.ts 中一次性导入并注册。

创建 index.ts (位于 components 目录下)

import MyComponentA from './MyComponentA.vue';
import MyComponentB from './MyComponentB.vue';
// 导入更多组件export {MyComponentA,MyComponentB,// 导出更多组件
};

在 main.ts 中导入并注册

import { createApp } from 'vue';
import App from './App.vue';
import * as components from './components'; // 导入所有组件const app = createApp(App);for (const componentName in components) {app.component(componentName, components[componentName]);
}app.mount('#app');

注意事项：

路径: 确保你的组件目录路径正确。
扩展名: 确认你匹配了所有需要的组件文件扩展名 (.vue, .tsx)。
组件命名: 组件名称将基于文件名生成，请确保你的文件名符合命名规范。
性能: 全局注册组件虽然方便，但可能会增加最终打包体积。如果某些组件只在少数地方使用，建议使用局部注册，以优化性能。
TypeScript: 在 TypeScript 项目中，确保正确处理组件的类型定义。

选择哪种方法？

require.context： 适用于使用 Webpack 的项目。
import.meta.glob： 适用于使用 Vite 的项目，并且是推荐的方法。
Vue 插件： 如果需要在多个项目中使用相同的组件注册逻辑，可以将逻辑封装成一个插件。
index.ts： 适用于组件数量不多，且希望显式地控制导出组件的情况。

vue3 怎么自动全局注册某个目录下的所有 vue 和 tsx 组件

在开发 vue3 项目时，我们会有这样的诉求，怎么自动全局注册某个目录下的所有 vue 和 tsx 组件？ 虽然已经有非常强大的 unplugin-vue-components 支持，但是在某些动态场景下，unplugin-vue-components 也选择了不支持。 …...

编程日记 2025/5/18 10:30:11

Android 消息总站设计思路

项目是组件化模式，这里记录下项目消息总站设计思路目录 1、接口模式 2、Viewmodel 模式 3、LiveDataBus 模式 3、EventBus 模式 1、接口模式消息总站：MessageCenter 单利模式 public class MessageCenter {private static MessageCenter instanc…...

编程日记 2025/5/16 8:52:27

webstorm 右下角git分支组件不显示如何恢复

1、在上方工具栏点击view 2、选择Appearance 3、选择 Status Bar Widgets 4、勾选Git Branch 目录如下图所示...

编程日记 2025/4/11 18:24:27

三、k8s pod详解

pod详解的相关的基础知识和初始化容器，以及私有化的镜像仓库*。 pod进阶：pod的状态，pod的探针 pod的详解： pod是k8s集群管理的最小单位，最小的资源组件，也是最小化运行容器的资源对象。容器运行在pod里…...

编程日记 2025/5/16 21:49:50

代码随想录算法训练day39--动态规划之《打家劫舍系列》

代码随想录算法训练 —day39 文章目录代码随想录算法训练前言一、198.打家劫舍二、213.打家劫舍II三、337.打家劫舍 III总结前言今天是算法训练的第39天，希望自己能够坚持下来！ 今日任务依旧是动态规划，不过是打家劫舍系列： …...

编程日记 2025/5/15 6:14:27

AI是什么？

一、概述 1.1 AI是什么就像给机器装了个"会学习的大脑"，让它们能像人一样： 看懂世界（比如手机相册自动识别猫狗照片）听懂人话（比如叫"Siri定个闹钟"）自己思考（比如围棋…...

编程日记 2025/5/14 0:42:32

ZooKeeper 的典型应用场景：从概念到实践

引言在分布式系统的生态中，ZooKeeper 作为一个协调服务框架，扮演着至关重要的角色。它的设计目的是提供一个简单高效的解决方案来处理分布式系统中常见的协调问题。本文将详细探讨 ZooKeeper 的典型应用场景，包括但不限于配置管理、命名服务…...

编程日记 2025/5/18 3:19:22

C++ list介绍

文章目录 1. list简介2. list的实现框架2.1 链表结点2.2 链表迭代器2.3 链表 3. list迭代器及反向迭代器设计3.1 list迭代器3.2 list反向迭代器3.3 list迭代器失效 4. list与vector比较 1. list简介 list，即链表。链表的种类有很多，是否带头结点&#…...

编程日记 2025/5/11 2:40:38

暂未整理啊

测码学院 python的数据类型不可变数据类型：字符串/数字/元组/ type（变量名） 获得数据的类型 str：字符串 int：整数 float：浮点数 bool：true/false 布尔类型 list：列表 dict&…...

编程日记 2025/5/18 10:18:54

文章目录项目地址一、基础501. What is CIL?2. What is CLR?3. What is the difference betweent value type and reference types?4. what is boxing and unboxing?5. How are exceptions handled in C#?6. What is the difference between a class and a struct?7. Wh…...

编程日记 2025/5/16 21:22:24

小红书爬虫：获取所需数据

小红书，又名 “小红书 ”或简称 “红”，已迅速成为中国社交和电子商务领域的重要参与者，成为一个不可或缺的平台。对于企业、营销人员和数据分析师来说，从小红书收集数据可以获得宝贵的洞察力，从而推动业务增长。虽然这…...

编程日记 2025/5/18 10:13:07

人工智能学习（七）之神经网络

目录一、引言二、经典神经网络回顾 （一）结构与计算过程 （二）局限性三、循环神经网络（RNN）原理 （一）基本结构 （二）计算过程 （三&#xf…...

编程日记 2025/5/14 12:59:05

LeetCode --- 435周赛

题目列表 3442. 奇偶频次间的最大差值 I 3443. K 次修改后的最大曼哈顿距离 3444. 使数组包含目标值倍数的最少增量 3445. 奇偶频次间的最大差值 II 一、奇偶频次间的最大差值I 统计字母出现次数，然后分别统计出现偶数次的最小值和出现奇数次的最大值，…...

编程日记 2025/5/18 0:39:16

算法 ST表

目录前言一，暴力法二，打表法三，ST表四，ST表的代码实现总结前言 ST表的主要作用是在一个区间里面寻找最大值，具有快速查找的功能，此表有些难，读者可以借助我的文章和网上的课程结…...

编程日记 2025/5/18 0:12:28

【AI论文】使用滑动磁贴注意力实现快速视频生成

摘要：扩散变换器（DiTs）凭借3D全局注意力机制在视频生成领域达到了最先进水平，但其计算成本高昂——生成一段仅5秒的720P视频时，仅注意力计算就占用了总推理时间的945秒中的800秒。本文引入了滑动磁贴注意力&#xff08…...

编程日记 2025/5/18 10:23:04

MAAS | Ollama 搭建本地 AI 大模型 deepseekWeb 界面调用

目录一、环境准备二、安装 Ollama三、下载并部署 DeepSeek 模型四、简单交互五、通过 Web 界面调用大模型在当今人工智能快速发展的时代，本地部署大语言模型赋予了用户更高的灵活性和个性化服务体验。本文介绍了如何准备环境、安装Ollama框架、下载并部署DeepSeek…...

编程日记 2025/5/14 15:23:02

Arduino 第十一章：温度传感器

Arduino 第十一章：LM35 温度传感器一、LM35 简介 LM35 是美国国家半导体公司（现德州仪器）生产的一款精密集成电路温度传感器。与基于热力学原理的传统温度传感器不同，LM35 能直接将温度转换为电压输出，且输出电压与…...

编程日记 2025/5/17 9:17:16

普通用户授权docker使用权限

1、检查docker用户组 sudo cat /etc/group |grep docker 若显示：docker:x:999: # 表示存在否则创建docker用户组： sudo groupadd docker2、查看 /var/run/docker.sock 的属性 ll /var/run/docker.sock 显示： srw-rw---- 1 root root 0 1月…...

编程日记 2025/5/15 10:43:10

嵌入式软件C语言面试常见问题及答案解析（四）

嵌入式软件C语言面试常见问题及答案解析（四）原本打算将链表相关的面试题整合到一个文档中，奈何写着写着就发现题目比较多，题型也比较丰富，所以导致上一篇已经足够长了，再长也就有点不礼貌了。所以在这儿继续来总结分享那个面试中遇到的题目，文中的问题和提供的答案或者…...

编程日记 2025/5/8 10:25:01

Python中是否有类似R语言中rds的功能，可将对象保存为文件？

在数据分析和科学计算领域，R语言和Python都是极为流行的编程语言。它们各自拥有独特的优势和丰富的库资源，使得数据科学家们能够高效地处理和分析数据。在R语言中，RDS（R Data Serialization）格式是一种非常方便的方式&…...

编程日记 2025/5/18 10:24:23

LabVIEW无人机飞行状态监测系统

近年来，无人机在农业植保、电力巡检、应急救灾等多个领域得到了广泛应用。然而，传统的目视操控方式仍然存在以下三大问题： 飞行姿态的感知主要依赖操作者的经验； 飞行中突发的姿态异常难以及时发现； 飞行数据缺乏系统…...

编程日记 2025/5/10 7:27:46

车联网安全入门一：了解CAN总线及环境模拟

准备打工了，工作内容和车联网安全相关，本来想着和app分析有较大关系，但是还涉及到很多关于汽车渗透测试相关的知识，由于之前并没有接触过，就借此机会和大家来学习一下。 ## CAN基础知识 ### CAN（Controller…...

编程日记 2025/5/18 10:11:41

hive spark读取hive hbase外表报错分析和解决

问题现象使用Spark shell 操作hive关联Hbase的外表导致报错；hive使用tez引擎操作关联Hbase的外表时报错。问题1：使用tez或spark引擎，在hive查询时只要关联hbase的hive表就会有问题其他表正常。 “org.apache.hadoop.hbase.client.RetriesExhaustedException:Can’t get …...

编程日记 2025/5/15 21:52:13

【MQ】RabbitMQ 高可用延时功能的探究

延迟消息如果使用延时交换机来实现，如果数据量过大，就会很占 CPU 资源，轻则时间误差大，重则 RabbitMQ 宕机一、针对一个 RabbitMQ 节点 （1）利用队列 ttl，将延迟消息根据 delay 的时间进行分级…...

编程日记 2025/5/6 7:12:35

网络安全讲座之一:网络安全的重要性

第一讲内容主要对于安全的发展以及其重要性作了简明的阐述，并介绍了一些国内外知名的网络安全相关网站，并对于如何建立有效的安全策略给出了很好的建议，并让大家了解几种安全标准。　　媒体经常报道一些有关网络安全威胁的令人震惊的事件&am…...

编程日记 2025/5/13 23:37:57

flutter ListView Item复用源码解析

Flutter 的 ListView 的 Item 复用机制是其高性能列表渲染的核心，底层实现依赖于 Flutter 的渲染管线、Element 树和 Widget 树的协调机制。以下是 ListView 复用机制的源码级解析，结合关键类和核心逻辑进行分析。 1. ListView 的底层结构 ListView 的复…...

编程日记 2025/5/18 10:28:41

基于java手机销售网站设计和实现（LW+源码+讲解）

专注于大学生项目实战开发,讲解,毕业答疑辅导，欢迎高校老师/同行前辈交流合作✌。技术范围：SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。主要内容：…...

编程日记 2025/5/18 10:08:58

HTML 左右联动高亮示例

HTML 左右联动高亮示例 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>左右联动高亮示例</titl…...

编程日记 2025/5/14 1:13:04

如何本地部署DeepSeek

第一步：安装ollama https://ollama.com/download 打开官网，选择对应版本第二步：选择合适的模型 https://ollama.com/ 模型名称中的 1.5B、7B、8B 等数字代表模型的参数量（Parameters），其中 B 是英文 B…...

编程日记 2025/5/15 8:05:04

虚拟机+Docker配置主机代理和常见配置

完整配置流程如下： 配置虚拟机使用宿主机代理： # 设置环境变量（宿主机IP为192.168.100.1，代理端口7890） export http_proxyhttp://192.168.100.1:7890 export https_proxyhttp://192.168.100.1:7890# 测试代理是否生…...

编程日记 2025/5/16 5:58:18

996引擎-问题处理：盟重传送石问题

996引擎-问题处理：盟重传送石问题问题解决方案补充：回城卷参考资料问题今天添加了个新地图，由于这个版本只有盟重传送石没设计回城卷。所以怎么搞都回不到新地图的回城点。（当时也是懵逼了都忘记它叫盟重传送石`）分析先看一下道具表的配置。 [@StdModeFuncX] 表示…...

编程日记 2025/5/7 5:40:07

从零到一学习c++（基础篇--筑基期七-vector与迭代器）

从零到一学习C（基础篇） 作者：羡鱼肘子温馨提示1：本篇是记录我的学习经历，会有不少片面的认知，万分期待您的指正。温馨提示2：本篇会尽量用更加通俗的语言介绍c的基础，用通俗的语言去…...

编程日记 2025/5/16 17:28:15

PKI及SSL协议分析

PKI的基本组成，完整的PKI系统必须具有权威认证机构(CA)、数字证书库、密钥备份及恢复系统、证书作废系统、应用接口（API）等基本构成部分，构建PKI也将围绕着这五大系统来着手构建。任务一：搭建CA服务器本任务初步了…...

编程日记 2025/5/13 5:55:35

请解释 JavaScript 中的函数式编程，优缺点是什么？

一、对JavaScript函数式编程的理解函数式编程（Functional Programming，FP）是一种编程范式，它将计算视为数学函数的求值，并避免改变状态和可变数据。在JavaScript中，函数式编程具有以下几个关键特性&…...

编程日记 2025/5/15 13:51:52

WPS接入DeepSeek模型

1.wps 下载安装 WPS-支持多人在线协作编辑Word、Excel和PPT文档_WPS官方网站 （最好是安装最新的wps） 2.offieceAi工具下载安装软件下载 | OfficeAI助手下载后安装下载下来的两个工具。安装路径可以自行修改 3.打开WPS,点击文件-》选项-》信任中心勾…...

编程日记 2025/5/17 15:47:22

头条百度批量采集软件说明文档

旧版说明文档《头条号文章批量采集软件4.0版本说明文档！头条/微头条文章批量采集》头条的采集软件已经更新了好多个版本了，一直没有做详细的介绍文档，最近更新了一些功能进去，一块来写一下说明文档。 1、主界面 2、头条作者采集…...

编程日记 2025/5/13 4:08:16

网络安全架构师怎么考网络安全架构

安全通信网络随着现代技术的不断发展，等级保护对象通常通过网络实现资源共享和数据交互，当大量的设备连成网络后，网络安全成了最为关注的问题。按照“一个中心，三重防御”的纵深防御思想，边界外部通过广域网或城域网…...

编程日记 2025/5/14 10:27:49

Vue 3 30天精进之旅：Day 21 - 项目实践：打造功能完备的Todo应用

前言经过前20天的学习，我们已经掌握了Vue 3的核心概念、组合式API、路由、状态管理等关键技术。今天将通过一个完整的项目实践——Todo应用，将所学知识融会贯通。我们将为Todo应用添加编辑、删除、过滤等进阶功能，并优化代码结构。一、项目…...

编程日记 2025/5/7 15:25:40

2025年02月11日Github流行趋势

项目名称：unsloth 项目地址url：https://github.com/unslothai/unsloth项目语言：Python历史star数：27175今日star数：1024项目维护者：danielhanchen, shimmyshimmer, Erland366, Datta0, xyangk项目简介&…...

编程日记 2025/5/17 1:28:08

嵌入式硬件篇---原码、补码、反码

文章目录前言简介八进制原码、反码、补码1. 原码规则示例问题 2. 反码规则示例问题 3. 补码规则示例优点 4. 补码的运算5. 总结十六进制原码、反码、补码1. 十六进制的基本概念2. 十六进制的原码规则示例 3. 十六进制的反码规则示例 4. 十六进制的补码规则示例 5. 十六进制补…...

编程日记 2025/5/18 10:27:18

PCM与G711A互转

PCM与G711A互转工具类（Java）调用方法（Kotlin） 工具类（Java） public class G711Code {private final static int SIGN_BIT 0x80;private final static int QUANT_MASK 0xf;private final static int SEG…...

编程日记 2025/5/17 11:23:41

MapReduce简单应用(三)——高级WordCount

目录 1. 高级WordCount1.1 IntWritable降序排列1.2 输入输出格式1.3 处理流程 2. 代码和结果2.1 pom.xml中依赖配置2.2 工具类util2.3 高级WordCount2.4 结果参考本文引用的Apache Hadoop源代码基于Apache许可证 2.0，详情请参阅 Apache许可证2.0。 1. 高级WordCo…...

编程日记 2025/5/11 18:18:44

C# 数据验证Regex

Regular Expression，简称 Regex,是一种用于匹配和处理文本的强大工具。它通过定义特定的模式，可以用来搜索、替换或提取字符串中的特定内容。先引入命名空间 using System.Text.RegularExpressions; Intege(整数) 必须是正整数 //必须是正整数publi…...

编程日记 2025/5/16 17:28:16

Jenkins+gitee 搭建自动化部署

Jenkinsgitee 搭建自动化部署环境说明： 软件版本备注CentOS8.5.2111JDK1.8.0_211Maven3.8.8git2.27.0Jenkins2.319最好选稳定版本，不然安装插件有点麻烦一、安装Jenkins程序 1、到官网下载相应的版本war或者直接使用yum安装 Jenkins官网下载直接…...

编程日记 2025/5/14 0:08:13

C/C++混合读入cin与scanf问题

因为C/C在某些时候是如此的融洽，以至于很多时候可能会混用，就比如 scanf与cin或getline(cin, ..)这是一个严肃的问题。因为随意混用，可能导致，在某些特殊时刻，读取混乱。所以本篇的意义就是为了缕清混用机制一、scan…...

编程日记 2025/5/17 6:30:55

矩阵 NFC 碰一碰发视频源码搭建技术解析,支持OEM

一、引言在移动互联与物联网飞速发展的当下，NFC（Near Field Communication，近场通信）技术凭借其便捷、快速的数据传输特性，在众多领域得到广泛应用。本文将深入探讨如何搭建矩阵 NFC 碰一碰发视频的源码，…...

编程日记 2025/5/12 15:14:20

Log4j定制JSON格式日志输出

1.前言 log4j是Java中一个强大的日志记录框架，通过简单的配置便可以在程序中进行日志打印与记录。关于log4j博主最近碰到一个需求，需要将程序运行过程中的日志按给定的json模板输出，本文记录一下log4j如何配置json格式的日志打印。 2.日志配…...

编程日记 2025/5/18 0:57:02

Spring依赖注入方式

写在前面：大家好！我是晴空๓。如果博客中有不足或者的错误的地方欢迎在评论区或者私信我指正，感谢大家的不吝赐教。我的唯一博客更新地址是：https://ac-fun.blog.csdn.net/。非常感谢大家的支持。一起加油，冲鸭&#x…...

编程日记 2025/5/13 17:25:45

【C++八股】什么是函数指针，如何定义和使⽤场景

函数指针是指向函数的指针变量，它存储的是一个函数的地址，允许通过指针间接调用函数。使用函数指针可以动态地选择和调用函数，或者将函数作为参数传递给其他函数。 1. 函数指针的定义函数指针的定义与普通指针稍有不同。它需要声明指向特定…...

编程日记 2025/5/14 15:39:15

DeepSeek 入驻 Cursor —— 表现能否超越 Claude？

DeepSeek 刚刚在 Cursor 平台上线了它的两款模型：DeepSeek V3 和 R1。目前，许多开发者（包括我们在内）主要依赖 Claude 3.5 Sonnet（最新版本 claude-3-5-sonnet-20241022）作为主要语言模型，因此我…...

编程日记 2025/5/18 7:38:07

相关文章：