Vue2系列 -- 组件自动化全局注册(require.context)

参考官网:https://v2.cn.vuejs.org/v2/guide/components-registration.html

1 作用

省略 import 引入组件
省略 在main.js 中注册
实现自动化引入组件

2 自定义文件夹

在 src 下新建一个 components/base 文件夹,用于存放要自动注册的组件

3 在 base 文件夹下定义 index.js

使用 require.context 自动全局注册这些通用的基础组件

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'// 1 拿到该目录下所有组件
const requireComponent = require.context(// 1.1 其组件目录的相对路径'./相对路径',// 1.2 是否查询其子目录false,// 1.3 匹配基础组件文件名的正则表达式 (需要根据实际的组件名称和规则进行配置)/Base[A-Z]\w+\.(vue|js)$/
)// 2 遍历 调用 Vue.component 来全局注册
requireComponent.keys().forEach(fileName => {// 2.1 获取组件配置const componentConfig = requireComponent(fileName)// 2.2 获取组件的 PascalCase 命名const componentName = upperFirst(camelCase(// 获取和目录深度无关的文件名fileName.split('/').pop().replace(/\.\w+$/, '')))// 2.3 全局注册组件Vue.component(componentName,// 如果这个组件选项是通过 `export default` 导出的,// 那么就会优先使用 `.default`,// 否则回退到使用模块的根。componentConfig.default || componentConfig)
})

4 在 main.js 中引入 index.js 文件

由于全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生
所以要在 main.js 中引入 index.js 文件

在这里插入图片描述

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

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

相关文章

【Docker】从零开始:1.Docker概述

【Docker】从零开始:1.Docker概述 1.什么是Docker2.为什么要使用Docker3.传统虚拟机技术与Linux容器技术的区别(1).传统虚拟机技术(2).Linux容器 4.Docker的特点一次构建、随处运行a.更快速的应用交付和部署b.更便捷的升级和扩缩容:c.更简单的系统运维d.…

边缘计算是如何为元宇宙提供动力的?

构建元宇宙虚拟世界并不简单,也并不便宜,但是还是有许多大型公司正在转移大量资源来开发他们的元宇宙业务,当然大部分企业注意力都围绕着 VR 耳机、AR 眼镜、触觉手套和其他沉浸式虚拟现实体验所需的可穿戴硬件。虽然这种沉浸式的体验是最终结…

特殊token的特殊用途

特殊token的特殊用途 特殊voc设计传统的特殊token 用途特殊用途例子特殊voc设计 普通token1 。。。。普通token1000,特殊token1,,,,,特殊token100 ,特殊指示token1,,,特殊指示token100 传统的特殊token 用途 在您提供的示例中,有1000个普通 token(从普通 token …

2023.11.20 关于 Spring MVC 详解

目录 MVC 工作流程 Spring MVC 掌握三个功能 创建 Spring MVC 项目 推荐安装插件 EditStarters 安装步骤 使用方法 实现连接功能 基础注解 RequestMapping 指定 GET 和 POST 方法类型 ResponseBody 获取参数 传递 单个 或 多个参数 参数重命名 RequestParam …

加油站[中等]

优质博文:IT-BLOG-CN 一、题目 在一条环路上有n个加油站,其中第i个加油站有汽油gas[i]升。你有一辆油箱容量无限的的汽车,从第i个加油站开往第i1个加油站需要消耗汽油 cost[i] 升。你从其中的一个加油站出发,开始时油箱为空。给…

洛谷 模板汇总 算法基础 python解析

文章目录 P1226 【模板】快速幂题目分析代码 P3367 【模板】并查集题目分析代码 P3378 【模板】堆题目分析代码 P3383 【模板】线性筛素数题目分析代码 P3366 【模板】最小生成树题目分析代码 P3390 【模板】矩阵快速幂题目分析代码 【模板】单源最短路径题目分析代码 P1226 【…

5.基于飞蛾扑火算法(MFO)优化的VMD参数(MFO-VMD)

代码的使用说明 基于飞蛾扑火算法优化的VMD参数 优化算法代码原理 飞蛾扑火优化算法(Moth-Flame Optimization,MFO)是一种新型元启发式优化算法,该算法是受飞蛾围绕火焰飞行启发而提出的,具有搜索速度快、寻优能力强的…

事件溯源(Event Sourcing)和命令查询责任分离(CQRS)经验

这篇文章是实现一个基于 CQRS 和事件溯源原则的应用程序,描述这个过程的方式,我相信分享我面临的挑战和问题可能对一些人有用。特别是如果你正在开始自己的旅程。 业务背景 项目的背景与空中交通管理(ATM)领域相关。我们为一个 …

C++优先队列的使用

1. 什么是priority_queue priority_queue是C中的容器&#xff0c;实现优先队列。由于底层采用堆实现&#xff0c;所以插入和删除操作的时间复杂度为O(logn)&#xff0c;查找队首元素的时间复杂度为O(1)。 2. 构造priority_queue 【1】使用priority_queue需要先包含头文件<…

C++学习 --list

目录 1&#xff0c; 什么是list 2&#xff0c; 创建 2-1&#xff0c; 标准数据类型 2-2&#xff0c; 自定义数据类型 2-3&#xff0c; 其他创建方式 3&#xff0c; 操作list 3-1&#xff0c; 赋值 3-2&#xff0c; 添加元素 3-2-1&#xff0c; 添加元素(assign) 3-2-…

动手学深度学习——循环神经网络的简洁实现(代码详解)

文章目录 循环神经网络的简洁实现1. 定义模型2. 训练与预测 循环神经网络的简洁实现 # 使用深度学习框架的高级API提供的函数更有效地实现相同的语言模型 import torch from torch import nn from torch.nn import functional as F from d2l import torch as d2lbatch_size, …

卷积核的形象化解释

卷积核是在卷积神经网络&#xff08;CNN&#xff09;中使用的一种重要工具&#xff0c;它可以对输入数据进行特征提取和特征映射。在图像处理中&#xff0c;卷积核通常用于检测图像中的边缘、纹理、颜色等特征&#xff0c;从而帮助网络识别图像中的物体或模式。 为了形象化地解…

【蓝桥杯单片机(27)】超声波测距

一、简要说明 超声波测距传感器,一个发出超声波(A),另一个接收超声波(B) A如何发出超声波?给A的引脚一个持续的高低电平(方波)即可发出超声波。 B如何确认超声波已收到?B的一个引脚由低电平变为高电平即是收到了超声波。 因此,超声波测距分为两步,第一步发出超声波…

【Linux】文件操作

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;那个传说中的man的主页 &#x1f3e0;个人专栏&#xff1a;题目解析 &#x1f30e;推荐文章&#xff1a;题目大解析&#xff08;3&#xff09; 目录 &#x1f449;&#x1f3fb;文件是什么&#xff1f;&am…

艾泊宇产品战略:用户满意度是衡量产品成功的关键指标

在当今的商业环境中&#xff0c;企业做产品面临着巨大的挑战。 他们需要创造出满足用户需求的产品&#xff0c;同时还要考虑如何实现商业目标。 企业在做产品过程中必须时刻保持警惕&#xff0c;避免陷入“自嗨”的境地。 自嗨是指企业在设计和开发产品时&#xff0c;过于关…

Python3.11+Pyside6开发电影下载程序

VideoSave是一款使用Python3.11Pyside6编写的提供下载电影/电视剧的软件&#xff0c;支持注册、登录、搜索、下载、查看日志等功能&#xff0c;提供了Window、Mac系统安装包。 先上效果图 提供功能 节省寻找资源的时间 ⌚️模糊搜索指定影片 &#x1f434;查看影片下载日志 &…

【spring】如何解决循环依赖

概念 Spring循环依赖是指两个或多个Bean之间相互依赖&#xff0c;形成了双向依赖关系&#xff0c;导致Spring无法正确地完成Bean的创建和初始化。 Spring框架为了解决循环依赖问题&#xff0c;采用了三级缓存的方式来解决。 第一级缓存&#xff1a;单例池中的三级缓存 每个B…

Mac如何搭建Vue项目

目录 一、安装node 二、安装NPM 1、本地安装和全局安装 2、通过Node.js官方安装程序安装 3、通过Homebrew安装 三、NPM常用命令 1、查看模块的版本号 2、安装指定版本 3、卸载模块 4、更新模块 5、查看模块信息 6、查看模块地址 7、更新命令 8、卸载NPM 四、安装…

设计模式 - 概览

一、概念 分为三大类、23中具体设计模式。 类型原理具体模式创建型封装了具体类的信息&#xff0c;隐藏了类的实例化过程。 单例模式&#xff08;Singleton&#xff09; 工厂方法模式&#xff08;Factory Method&#xff09; 抽象工厂模式&#xff08;Abstract Factory&#xf…