Vue中使用require.context自动引入组件的方法介绍

我们项目开发中,经常需要import或者export各种模块,那么有没有什么办法可以简化这种引入或者导出操作呢?答案是肯定的,下面就为大家介绍一下require.context

require.context 是 webpack 提供的一个 API,用于创建 context,即一组具有相同上下文的模块。

使用 require.context 可以方便地加载多个模块,并且可以灵活地控制模块的加载顺序和依赖关系。

以前我们都是通过import 方式引入组件

import A from 'components/A'
import B from 'components/B'
import C from 'components/C'
import D from 'components/D'

这样很蛋疼,因为每加一个组件,可能都要写这么一句,这样有规律的事,是否可以通过自动化完成?

require.context (需要vue-cli3+的版本)

require.context(directory, useSubdirectories, regExp)
  1. directory: 要查找的文件路径
  2. useSubdirectories: 是否查找子目录
  3. regExp: 要匹配文件的正则

1.在compoents文件下随便创建index.js文件

const requireComponent = require.context('./', true, /\.vue$/)
const install = (Vue) => {if (install.installed) returninstall.installedrequireComponent.keys().forEach(element => {const config = requireComponent(element)if (config && config.default.name) {const componentName = config.default.nameVue.component(componentName, config.default || config)}});
}if (typeof window !== 'undefined' && window.Vue) {install(window.Vue)
}export default {install
}

2.mian.js引入该js

import install from './compoents'
Vue.use(install)

总结

我们可以通过require.context可以自动化引入文件。
其实我们不单单局限于组件,路由内, 所有模块文件都是通用的, 例如路由, 接口封装模块,都是可以使用的。

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

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

相关文章

运行天地图Cesium.js三维服务案例

零、技术选型及相关网址 技术选型:Vue2、VueCli5、Cesium.js、天地图 相关网址:三维服务 - 天地图 帮助文档 一、cesium 初始化参数解析 initializeCesium() {this.viewer new Cesium.Map("cesiumContainer", {shouldAnimate: true, // 是否…

基于二进制包的mysql安装

下载二进制包 wget https://cdn.mysql.com//Downloads/MySQL-8.0/mysql-8.0.35-linux-glibc2.17-x86_64.tar.xz查看是否存在mariadb安装 [rootbogon ~]# rpm -qa | grep mariadb mariadb-libs-5.5.68-1.el7.x86_64#卸载包。 --nodeps 不检验依赖 [rootbogon ~]# rpm -e --…

gem5学习(7):内存系统中创建 SimObjects--Creating SimObjects in the memory system

目录 一、gem5 master and slave ports 二、Packets 三、Port interface 1、主设备发送请求时从设备忙 2、从设备发送响应时主设备忙 四、Simple memory object example 1、Declare the SimObject 2、Define the SimpleMemobj class 3、Define the SimpleMemobj class…

EST-100身份证社保卡签批屏按捺终端PC版web版本http协议接口文档,支持web网页开发对接使用

<!DOCTYPE html><html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width,initial-scale1.0"><title>演示DEMO</title><script type"text/…

亚马逊SEO是什么意思?亚马逊标题的SEO方法是什么?-站斧浏览器

亚马逊SEO是什么意思&#xff1f; 亚马逊SEO主要包括了对标题、描述、五点简介等元素的优化&#xff0c;以及评价和评论的管理等方面。下面将详细分析亚马逊SEO的相关内容&#xff0c;帮助卖家更好地理解和应用。 在亚马逊平台上进行SEO优化需要考虑以下几个方面&#xff1a;…

gin框架使用系列之四——json和protobuf的渲染

系列目录 《gin框架使用系列之一——快速启动和url分组》《gin框架使用系列之二——uri占位符和占位符变量的获取》《gin框架使用系列之三——获取表单数据》 上篇我们介绍了如何获取数据&#xff0c;本篇我们介绍一下如何返回固定格式的数据。 一、返回JSON数据 在web开发中…

如何在临近期末考之前,保持一个良好的心态呢?

在临近期末考之前&#xff0c;保持一个良好的心态非常重要&#xff0c;因为这有助于你在考试中发挥出自己的最佳水平。以下是一些建议&#xff0c;帮助你保持冷静和专注&#xff1a; 制定计划&#xff1a;制定一个详细的学习计划&#xff0c;包括每天要复习的科目和内容。这样…

开源安全测试工具 | 网络安全工具列表

自动化渗透测试 • AttackSurfaceMapper (https://github.com/superhedgy/AttackSurfaceMapper) - 自动化渗透测试工具, 使用手册/测试流程 (https://www.uedbox.com/post/59110/)。 • vajra (https://github.com/r3curs1v3-pr0xy/vajra) - 自动化渗透测试. • Savior (https…

Linux管理LVM逻辑卷

目录 一、LVM逻辑卷介绍 1. 概述 2. LVM基本术语 2.1 PV&#xff08;Physical Volume&#xff0c;物理卷&#xff09; 2.2 VG (Volume Group&#xff0c;卷组&#xff09; 2.3 LV (Logical Volume&#xff0c;逻辑卷&#xff09; 3. 常用的磁盘命令 4. 查看系统信息的命…

golang第一卷---go入门

go入门 对于使用go的好处环境变量配置开发工具 参考网站 &#xff1a;go入门 对于使用go的好处 简单好记的关键词和语法。轻松上手&#xff0c;简单易学。更高的效率。比Java&#xff0c;C等拥有更高的编译速度&#xff0c;同时运行效率媲美C&#xff0c;同时开发效率非常高。…

爬虫工作量由小到大的思维转变---<第三十三章 Scrapy Redis 23年8月5日后会遇到的bug)>

前言: 收到回复评论说,按照我之前文章写的: 爬虫工作量由小到大的思维转变---&#xff1c;第三十一章 Scrapy Redis 初启动/conn说明书)&#xff1e;-CSDN博客 在启动scrapy-redis后,往redis丢入url网址的时候遇到: TypeError: ExecutionEngine.crawl() got an unexpected …

Conda简介及常用指令

Conda 是一个开源的包管理器和环境管理器&#xff0c;主要用于安装、运行和升级数据科学和机器学习等领域的软件包和依赖。Conda 可以用于多种语言&#xff0c;包括 Python、R、Ruby、Lua、Scala、Java、JavaScript、C/ C 等。 Conda 的主要特点 环境管理&#xff1a;Conda 允…

linux查看服务器内存

要查看服务器内存&#xff0c;可以使用以下命令&#xff1a; 使用 free 命令来查看服务器的内存使用情况&#xff1a; free -h该命令将显示内存使用情况的摘要&#xff0c;包括总内存、已使用内存、可用内存等信息。 使用 top 命令来实时监视内存使用情况&#xff1a; top在…

Qt GUI 优化方案详解

文章目录 一、引言二、应用启动优化2.1 懒加载概念1. **懒加载的应用场景:**2. **Qt中的懒加载方式:**3. **示例 - C++中的懒加载:**4. **示例 - QML中的懒加载:**2.2 异步加载1. **异步加载的应用场景:**2. **实现异步加载的方式:**3. **示例 - 使用Qt的异步网络请求:*…

数据资产专题3:估值

欢迎关注主页个人介绍及相关链接&#xff0c;获取更多算法源码材料 2023数据资源入表白皮书&#xff0c;推荐系统源码下载-CSDN博客 浅析研发支出费用化和资本化的区别-CSDN博客 商业银行数据资产估值白皮书&#xff0c;推荐系统源码下载-CSDN博客 用友BIP数据资产入表解决…

odoo17核心概念view4——view.js

这是view系列的第四篇文章&#xff0c;专门介绍View组件。 作为一个Component&#xff0c;它总共包含js、css、xml三个标准文件&#xff0c;当然最重要的是view.js 首先在setup函数中对传入的参数props做了各种校验&#xff0c;然后扩展了subenv useSubEnv({keepLast: new Kee…

2. SQL - 约束

1 主键约束 PRIMARY KEY 约束唯一标识数据库表中的每条记录。 主键必须包含唯一的值。 主键列不能包含 NULL 值。 每个表都应该有一个主键&#xff0c;并且每个表只能有一个主键。 添加主键约束 创建表时&#xff0c;在字段描述处&#xff0c;声明指定字段为主键创建表时&…

PLC远程上下载物联网网关的功能

PLC远程上下载物联网网关的功能 设备远程监控&#xff1a;通过物联网网关&#xff0c;可以实时监控PLC设备的运行状态&#xff0c;获取设备的各种参数信息&#xff0c;以便及时发现和解决设备故障。 数据采集与传输&#xff1a;蓝蜂物联网PLC远程网关可以采集PLC设备的各种数据…

C++ --绪论

绪论 1.1 导学1.2 计算机系统简介1.3 计算机语言和程序设计方法的发展1.4 面向对象的基本概念1.5 程序的开发过程 计算机程序 程序是指令的集合 面向过程的语言&#xff1a;c语言 面向对象的语言&#xff1a;c、python、java 类继承多态 注释 // 两个相离最近的 /**/ 会结…

深度学习中的Epoch

深度学习中的Epoch 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天&#xff0c;让我们一同探讨深度学习领域中不可或缺的概念之一——Epoch。 1. 什么是Epoch&…