分别用webpack和vite注册全局组件

基础组件的自动化全局注册

1. 组件全部导入后,批量注册

import dgDialog from "@/components/dgDialog/index.vue";
import svgIcon from "@/components/svgIcon/index.vue";
const allComponent = { dgDialog, svgIcon };
export default {install(app) {console.log(app, "app"); //App.vueObject.keys(allComponent).forEach((key) => {console.log(key, "key"); //dgDialog svgIconapp.component(key, allComponent[key]);});},
};// 或是
const ComponentRegister = {install(Vue) {console.log(Vue, "Vue"); //App.vueObject.keys(allComponent).forEach((key) => {console.log(key, "key");Vue.component(key, allComponent[key]);});}
}export default ComponentRegister;

2. 使用webpack(或在内部使用了webpackVue CLI 3+)全局注册组件

使用 require.context方法引入组件

// 所有组件放在一个`components`文件夹内的写法
const ComponentRegister = {install(Vue) {// 文件结构为components/组件名称.vueconst requireComponent = require.context(// 其组件目录的相对路径"@/components",// 是否查询其子目录false,// 匹配基础组件文件名的正则表达式/\.(vue|js)$/);requireComponent.keys().forEach((fileName) => {// 获取组件配置const componentConfig = requireComponent(fileName);// 获取当前组件的文件名称 vue文件中声明的name属性 || 文件名称const componentName =componentConfig.default.name ||fileName.split("/").pop().replace(/\.\w+$/, ""); //或 fileName.replace(/^\.\/(.*)\.\w+$/, "$1");// 全局注册组件Vue.component(componentName,// 如果这个组件选项是通过 `export default` 导出的,// 那么就会优先使用 `.default`,// 否则回退到使用模块的根。componentConfig.default || componentConfig);});},
};export default ComponentRegister;
// 组件以文件夹名称命名
const ComponentRegister = {install(Vue) {// 文件结构为文件夹名称(即组件名称)/index.vueconst requireComponent = require.context(// 其组件目录的相对路径"@/components/",// 是否查询其子目录true,// 匹配基础组件文件名的正则表达式/\.(vue|js)$/);requireComponent.keys().forEach((fileName) => {// 获取组件配置const componentConfig = requireComponent(fileName);//获取当前组件的文件名称 vue文件中声明的name属性 || 文件名称const componentName =componentConfig.default.name ||fileName.replace(/^\.\/(.*)\.\w+$/, "$1").split("/").shift(); //移除数组第一个元素  结果为 文件夹名称// .pop()//移除最后一个数组元素 结果为index// 全局注册组件Vue.component(componentName,// 如果这个组件选项是通过 `export default` 导出的,// 那么就会优先使用 `.default`,// 否则回退到使用模块的根。componentConfig.default || componentConfig);});},
};export default ComponentRegister;

3. 使用vite方法全局注册组件

使用import.meta.glob方法引入组件

const ComponentRegister = {install(Vue) {//获取所有的vue文件const requireComponent = import.meta.glob("@/components/*/*.vue", {// import: 'default',as: "component",eager: true,});/*** (\/[^\/]+)+ 匹配一个或多个以/开头,后面跟着一个或多个非/字符的序列。这对应于路径中的目录名。* \/ 匹配/字符,它是目录名与我们要提取的部分之间的分隔符。* ([^\/]+) 匹配一个或多个非/字符,这就是我们要提取的部分(文件夹名称)。* \/ 再次匹配/字符,表示提取部分的结束和下一个目录或文件的开始。* */const re = /(\/[^\/]+)+\/([^\/]+)\//; //或是 /\/components\/(.*?)\//;  i.match(re)[1];for (const i in requireComponent) {//获取当前遍历的组件const componentName = i.match(re)[2];const componentConfig = requireComponent[i];Vue.component(componentName, componentConfig.default || componentConfig);}},
};export default ComponentRegister;

记住全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。如下

//注册组件到全局
Vue.component("Profile", Profile);
//创建vue
var vue = new Vue({el: "#app",data: {msg: "Vue是最简单的",},
});

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

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

相关文章

二十六、Python基础语法(函数进阶-下)

一、多值参数 多值参数(可变参数、不定长参数):有的函数不确定参数有几个,在一个普通的参数前面加上一个*,这个参数就变为不定参数。可以接收任意多个位置传参的数据,类型为元组。 def test(name, *args,…

植物源UDP-糖基转移酶及其分子改造-文献精读75

植物源UDP-糖基转移酶及其分子改造 摘要 糖基化能够增加化合物的结构多样性,有效改善水溶性、药理活性和生物利用度,对植物天然产物的药物开发至关重要。UDP-糖基转移酶(UGTs)能够催化糖基从活化的核苷酸糖供体转移到受体形成糖苷键,植物中天然产物的糖基化修饰主要通过UGTs实…

计算机网络-常用网络命令和工具

目录 Ping命令 正常的执行结果 常见的失败反馈信息 语法格式 常用参数 Ipconfig命令简介 语法格式 命令参数 tracert 命令简介 工作原理 语法格式 常用参数 nbtstat命令简介 语法格式 常用参数 netstat 命令简介 语法格式 常用参数 Ping命令 ping( Packet Internet Grope…

[MySQL#7] CRUD(2) | 更新 | 删除 | 聚合函数 | group by

目录 3. 更新 4. 删除 截断表 日志的作用 5. (实验) 插入查询结果 6. 聚合函数 7. 分组查询 接着上篇文章[MySQL#6] 表的CRUD (1) | Create | Retrieve(查) | where继续讲解~ 3. 更新 语法: UPDATE table_name SET column expr [, column expr ...][WHE…

RegCM模式运行./bin/regcmMPI报错

1、报错 在运行RegCM时到截止模拟时间段时,不显示successfully,而是报错: MPI_ABORT was invoked on rank 0 in communicator MPI COMMUNICATOR 3 DUP FROM 0 with errorcode 1. NOTE: invoking MPI_ABORT causes Open MPI to kill all MP…

日本也有九九乘法表?你会读吗?柯桥零基础学日语到蓝天广场

日本也有“九九乘法表”? 九九乘法表起源于中国,可以追溯到春秋战国时代。 日本奈良县橿原市境内的“藤原京”遗址,出土了日本目前可找到最古老的“九九乘法表”木简。 根据日本奈良研究所的研究,其内容可能是1300多年前的官吏用…

Python(包和模块)

包 定义 包是将模块以文件夹的组织形式进行分组管理的方法,以便更好地组织和管理相关模块。 包是一个包含一个特殊的__init__.py文件的目录,这个文件可以为空,但必须存在,以标识目录为Python包。 包可以包含子包(子…

集群聊天服务器——逻辑梳理

网络聊天服务器项目,该项目分为4个模块: 首先是网络模块:我使用了muduo高性能网络库,解耦合网络与业务之间这两部分代码,可以更加专注与业务的功能开发其次是服务层模块:我使用了基于C11的技术比如绑定器和…

前沿技术与未来发展第一节:C++与机器学习

第六章:前沿技术与未来发展 第一节:C与机器学习 1. C在机器学习中的应用场景 C在机器学习中的应用优势主要体现在高效的内存管理、强大的计算能力和接近底层硬件的灵活性等方面。以下是 C 在机器学习领域的几个主要应用场景: 1.1 深度学习…

项目解决方案:在弱网(低带宽、高延迟、有丢包的网络)环境下建设视频监控平台的设计方案(下)

目录 一、需求分析 1、业务需求分析 2、功能需求分析 二、建设目标 三、设计原则 四、标准规范建设 五、系统架构 1、视频接入管理系统 2、资源管理调度平台 3、视频转码解码服务器 4、媒体输出引擎 5、媒体录制引擎 6、智能联动引擎 7、API开发引擎 六、部署架构 七、产…

将.py文件生成.exe文件的方法

1、安装pyinstaller(已有忽略):pip install pyinstaller 2、进入目标文件(需要编译的文件)目录 3、编译:pyinstaller --onefile xx.py 4、文件生成后的路径:在目标文件目录下创建一个名为dist的…

操作系统笔记(四)进程间通信,竞争条件与解决方案

进程间通信(IPC) 如何在进程间传递信息? 如何防止两个进程冲突? 如何实现进程执行的先后顺序? 竞争条件(Race conditions) 竞争条件(Race conditions) 多个进程访问一个共享数据,而数据最…

适配器模式:连接不兼容接口的桥梁

1. 引言 在软件开发中,我们常常会遇到不同系统之间需要互操作的情况。这些系统可能使用不同的接口和数据结构,如果我们不采取适当措施,它们将无法有效沟通。适配器模式(Adapter Pattern)正是为了解决这一问题而诞生的…

jmeter的基本使用

Jmeter基本使用 一、变量 1.用户定义变量 2.用户参数 二、函数 1.计数器${__counter(,)} 2.时间函数 3.加密函数${__digest(,,,,)} 4. 整数相加${__intSum(,,)} 5.属性函数,${__P(,)}、${__property(,,)}、${__setProperty(,,)} 6.V函数 三、获取响应数据…

Go语言基础教程:指针

在 Go 中,函数参数默认是按值传递的。若要改变变量的原始值,可以使用指针。本教程将通过示例代码来演示如何使用值传递和指针传递。 package mainimport "fmt"// 传值方式 - 函数内改变 ival 的值不会影响原始变量 func zeroval(ival int) {i…

2024年优秀的天气预测API

准确、可操作的天气预报对于许多组织的成功至关重要。 事实上,在整个行业中,天气条件会直接影响日常运营,包括航运、按需、能源和供应链(仅举几例)。 以公用事业为例。根据麦肯锡的数据,在 1.4 年的时间里…

HCIP-HarmonyOS Application Developer V1.0 笔记(二)

类Web开发范式自定义组件基本用法 自定义组件通过element引入到宿主页面。 Props自定义属性 自定义属性支持类型 String,Number,Boolean,Array,Object。 命名规范: 命名时禁止以on、、on:、grab:等保留关键字为开头…

天润融通突破AI客服局限,三大关键提升文本机器人问答效果

近期,AI客服再次登上热搜,引发网友集体吐槽,比如AI客服虽然态度客气,但听不懂客户诉求,回答问题驴唇不对马嘴,解决不了问题...... 更有网友将这些问题升级到,企业就是不想解决问题才交给AI客服…

aarch64-opencv341交叉编译,并在arm上部署helloopencv

背景 当需要在jetson xavier nx或者rk 3562等平台上开发关于视觉检测的工程时,由于arm板子资源不足或者不能联网等原因,通常在虚拟机上利用交叉编译器编译得到可执行程序,然后部署到arm板上。 aarch64-opencv341交叉编译 ubuntu虚拟机中先…

mysql中redolog、binlog

我们中说删库跑路,那么数据库删除后,里面的数据怎么恢复呢? 这里就涉及到了redolog和binlog了 一、什么是存储引擎和缓冲池 存储引擎是 MySQL 中直接与磁盘交互部分。也是存储引擎读写数据的最小单位,一个页里可以有一条或多条…