首页 > 其他分享 >在Vue 3中,要获取指定目录内的所有组件

在Vue 3中,要获取指定目录内的所有组件

时间:2024-06-17 10:32:28浏览次数:13  
标签:Vue const glob 获取 组件 目录

  vue3 获取指定目录内组件

在Vue 3中,要获取指定目录内的所有组件,可以使用Vue的编程式导入。这通常在自动化场景,如通过编程的方式导入一个目录下所有的Vue组件时使用。

以下是一个简单的例子,展示如何在Vue 3中编程式地导入一个目录下的所有组件:

// 假设componentsDir为组件所在的目录
const componentsDir = './path/to/your/components';
 
// 使用glob模块来匹配目录下所有的.vue文件
const glob = require('glob');
 
// 获取所有组件的路径
glob.sync(`${componentsDir}/**/*.vue`).forEach((filePath) => {
  // 获取组件的名称
  const componentName = filePath.split('/').pop().replace(/\.vue$/, '');
 
  // 使用Vue的defineAsyncComponent来定义异步组件
  const AsyncComponent = () => import(`${filePath}`);
 
  // 将组件名称和组件作为键值对注册到全局或局部
  app.component(componentName, AsyncComponent);
});

 

标签:Vue,const,glob,获取,组件,目录
From: https://www.cnblogs.com/Fooo/p/18251890

相关文章

  • [vue3]掌握pinia
    piniaPinna是vue的最新状态管理工具,用来替代vuex官网:Pinia|TheintuitivestoreforVue.js优势更简洁的API,去掉了mutaion与Vue3配套的组合式API风格去掉了modules,每个store都是独立的模块更好的TS支持,提供可靠的类型推断安装命令:npmipiniamain.js挂载......
  • 基于Vue+Nodejs实现医药商城销售系统
    作者主页:编程指南针作者简介:Java领域优质创作者、CSDN博客专家、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师主要内容:Java项目、Python项目、前端项目、人工智能与大数据、简历模板、学习资料、面试题库、技术互......
  • React+TS前台项目实战(九)-- 全局常用组件弹窗Dialog封装
    文章目录前言Dialog公共弹窗组件1.功能分析2.代码+详细注释3.使用方式4.效果展示总结前言今天这篇主要讲全局公共弹窗Dialog组件封装,将用到上篇封装的模态框Modal组件。有时在前台项目中,偶尔要用到一两个常用的组件,如弹窗,其实不必非安装ant-design这些主流框......
  • 在Linux中,如何显示/test目录下的所有目录?
    在Linux中,若要详细显示/test目录下的所有目录,可以使用几种不同的命令方法,其中最常用的是ls命令结合相应的选项。以下是几种展示方法:1.使用ls命令的基本形式ls/test这个命令会列出/test目录下的所有条目(包括文件和目录),但不会显示详细信息。2.使用ls命令的长格式ls-l/tes......
  • 在Linux中,如何删除/a/b下的所有文件及目录?
    在Linux中,删除一个目录及其所有子文件和子目录是一个需要小心操作的过程,因为一旦执行,你将无法恢复被删除的数据。以下是几种删除/a/b下所有文件和目录的方法:使用rm命令:删除/a/b目录及其所有内容的最简单方法是使用rm命令的-r(递归)选项:rm-rf/a/b/*这里-rf选项组合表示:-r......
  • Vue diff算法
    vuediff算法主要体现在renderer.ts中的patchChildren这段代码逻辑。差异算法排序分为无key时的diff算法排序逻辑和有key时的diff算法排序逻辑。无key时的逻辑主要有三步,首先,通过for循环patch重新渲染元素进行替换,其次是删除旧的元素,再次是新增元素。代码如下:constpatchU......
  • typora界面修改-字体-目录缩进-页边距
    修改字体目标效果以github主题为基础,更改字体(英文显示consolas,中文显示LXGWWenKai)修改正文字体偏好设置→外观→打开主题文件夹,里面的css文件即为主题文件为了防止修改错误,或者保留原来的github.css,我们复制出一个my_github.css将字体文件LXGWWenKai-Regular.ttf放在特......
  • Unity学习笔记----摄像机组件信息相关知识点总结
    一.ClearFlags1.skybox天空盒一般用于3d游戏。2.SolidColor颜色填充一般用于2d游戏。3.Depthonly只画该层,背景透明与Depth配合使用,等会再写。4.Don'tClear不移除,渲染覆盖不会擦除上一帧的画面,一般不使用。默认二.CullingMask选择性渲染部分层级,可以指定渲染对......
  • HarmonyOS【ArkUI组件--TextInput】
    1.文本输入框基本用法2.使用文本输入框组件(如何实现输入数字改变图片大小)在此博客的基础上继续编写:HarmonyOS【ArkUI组件--Text】-CSDN博客 ①代码如下:importfontfrom'@ohos.font'@Entry@ComponentstructIndex{@StateimageWidth:number=30build()......
  • 云计算【第一阶段(14)】Linux的目录和结构
    一、Liunx目录结构1.1、linux目录结构linux目录结构是树形目录结构根目录(树根)所有分区,目录,文件等的位置起点整个树形目录结构中,使用独立的一个"/",表示1.2、常见的子目录必须知道目录路径目录作用/root系统管理员root的宿主目录/home普通用户的宿主目录/boot系统内核、......