Vue组件注册中require.context的用法

最新推荐文章于 2024-04-08 14:13:27 发布
原创 最新推荐文章于 2024-04-08 14:13:27 发布 · 435 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种在Vue项目中批量注册全局组件时减少代码量的方法。通过使用require.context可以有效地简化大量组件导入过程，提高代码效率。

项目场景：

项目场景：Vue批量注册全局组件的时候，因为组件数量过多，有大量的import导入，想要精简代码，所以百度到了require.context的用法

问题描述：

类似于这种使用场景需要导入大量的组件
图片

解决方案：

后来看到这两篇文章vue 注册全局组件用来定义组件使用require.context实现前端工程自动化来使用require.context来精高效自己的代码。

用vue做轮播图 关于require的用法
BeijingJane的博客
07-02 751
轮播图中,关于图片代码的写法
require.context()函数介绍
最新发布
警警的博客
06-10 1525
是一个非常强大的工具，可以在 Vue 项目中简化模块的导入和注册流程。通过动态加载模块，开发者可以减少重复代码，提高开发效率，特别是在大型项目中，自动化导入组件、路由和 Vuex 模块可以显著提升项目的可维护性和扩展性。
require.context的使用
cxz
05-26 1524
解释 require.context是一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块 使用说明 require.context函数接受三个参数 directory {String} -读取文件的路径 useSubdirectories {Boolean} -是否遍历文件的子目
vue之require.context
热门推荐
Cassie's blog
10-11 1万+
初识require.context require.context是webpack中，用来创建自己的（模块）上下文 webpack会在构建的时候解析代码中的require.context() require.context函数接收三个参数： 要搜索的文件夹目录 是否还应该搜索它的子目录 以及一个匹配文件的正则表达式 // 语法 require.context(directory,...
vue 去中心化的路由拆分方案：require.context
weixin_34302798的博客
06-21 583
代码地址：https://github.com/lisiyizu/vue-router-dynamic 转载于:https://www.cnblogs.com/Kummy/p/8991507.html
Vue中两个让你幸福感爆棚的组件导入小技巧之require.context
lixiaosenlin的专栏
10-11 2037
前言 小伙伴们大家好，在上一篇文章Vue中两个让你幸福感爆棚的组件导入小技巧之循环代替Ctrl C/V（独家总结）中我们已经学习了一个注册全局组件的小技巧，使得我们在注册大量全局组件时不再被Vue.use或Vue.component所霸屏。不知道小伙伴们看了以后幸福感有没有提升呢，如果觉得还不过瘾，那么接下来的这个连import都可以省略的小技巧会不会让你怦然心动呢？ 我们今天要分享的是一个webpack为我们提供的能够获取特定上下文的api函数require.context。 require.cont
【Webpack】前端工程自动化 - require.context实现模块自动化导入
一只正在狂飙的肥兔
05-22 883
require.context介绍与使用；Webpack前端工程自动化；vue2批量导入并注册全局组件；将某目录下的vue文件全部批量导入并注册为全局组件；vue2路由模块自动加载；使用 require.context() 函数遍历 routes 文件夹的所有文件，一次性导入到 index.js 中，生成路由表；
webpack中require.context自动化注册,vue应用
codingWeb的博客
08-28 398
简介: require.context是webpack中，用来创建自己的（模块）上下文；webpack会在代码构建的时候去解析该函数 使用: require.context(directory, useSubdirectories = false, regExp = /^\.\//); 该方法可以接收3个参数： 需要搜索的文件夹目录（必传） 是否需要搜索它的子孙目录，默认为false 一个匹配文件的正则表达式 我的目录结构如下: 使用api输出如下: console.log(1,require.c
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
04-08 3149
我们项目开发中，经常需要import或者export各种模块，那么有没有什么办法可以简化这种引入或者导出操作呢？实际开发中增加一个新的页面可能就要重新编写路由的问题，导致路由文件每次都要重新编辑，页面较多，修改起来较为复杂。其实我们不单单局限于组件，路由内， 所有模块文件都是通用的， 例如路由， 接口封装模块，都是可以使用的。这样很蛋疼，因为每加一个组件，可能都要写这么一句，这样有规律的事，是否可以通过自动化完成?比如直接这样使用就可以了，不用在import引入，不用components注册了。
require.context
微不足道的小博
08-08 1万+
1、什么是 require.context 一个 webpack 的 api ，通过该函数可以获取一个上下文，从而实现工程自动化（遍历文件夹的文件，从中获取指定文件，自动导入模块）。 在前端工程中，如果一个文件夹中的模块需要频繁引用时可以使用该中方式一次性引入 2、使用 参数 类型 说明 dirname String 需要读取模块的文件的所在目录 useSubdirectories Boolean 是否遍历子目录 RegExp RegExp 匹配的规则（正则表达式） // 遍
require.context在vue项目的使用
qq_44096635的博客
05-28 2581
适用于划分各个模块，而各个模块要一个一个引入，太麻烦了，这是就用到了require.context require.context函数接受三个参数： directory {String} -读取文件的路径 useSubdirectories {Boolean} -是否遍历文件的子目录 regExp {RegExp} -匹配文件的正则 语法: require.context(directory, useSubdirectories = false, regExp = /^.//); //项目中引用 con
require.context
Alice_124的博客
12-16 1533
require.context 带表达式的 require 语句 如果你的 require参数含有表达式(expressions)，会创建一个上下文(context)，因为在编译时(compile time)并不清楚具体是哪一个模块被导入 require("./template/" + name + ".ejs"); 复制代码 webpack 解析 require() 的调用，提取出来如下这些信息： Directory: ./template Regular expression: /^.
vue3 require.context 实现基础组件的自动化全局注册 模块自动化加载（霸霸看了都说好）
霸霸的博客
08-13 1811
vue3 基础组件的自动化全局注册 在日常开发中，有一些组件是比较常用，但是为了避免在开发过程中不停地引入，或者在main.js中注册，，或者每添加一个组件就需要手动注册一次。则直接进行自动化全局注册。 由于全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。 在 Vue 3.0 项目的 main.js中，无法使用 Vue.omponent 进行组件注册, 取而代之的是 createApp() 返回的实例 //main.js import { createApp } from
vue3使用require.context()，调用keys()返回空数组
weixin_41691261的博客
12-25 1225
vue3-cli
require.context() ——实现 vue 模块的自动导入
Jay的博客
11-15 5716
借助 webpack 的 require.context()，轻松实现 vue 模块的自动化导入。
vue之require.context(自动加载js模块等作用)
zyhzyh1120的博客
09-20 3207
require.context 初识 require.context require.context是webpack中，用来创建自己的（模块）上下文 webpack会在构建的时候解析代码中的require.context() require.context函数接收三个参数： 1. 要搜索的文件夹目录 2. 是否还应该搜索它的子目录 3. 以及一个匹配文件的正则表达式 // 语法 require.context(directory, useSubdirectories = false, regExp = /^
require.context 全局组件注册
jiandan1127的博客
11-12 637
//全局注册base-ui const files = require.context('@/base-ui', true, /\.vue$/); const modules = {}; files.keys().forEach((key) => { const name = path.basename(key, '.vue'); modules[name] = files(key).default || files(key); }); Object.keys(modules).map((co
Vue.js 3.X开发中require.context与watch高级用法详解
`require.context('@/components/home', false, /\.vue$/)`，我们可以自动扫描指定目录下所有符合正则表达式的 `.vue` 文件，遍历其 key 值（即模块路径），提取文件名作为组件名称，并将其默认导出对象注入到 ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值