当前位置:网站首页>require.context
require.context
2022-07-03 01:56:00 【[email protected]】
通过 require.context() 函数来创建自己的 context。它接收三个参数:
const requireComponent = require.context(
// 其组件目录的相对路径,文件路径
'./components',
// 是否查询其子目录
false,
// 匹配基础组件文件名的正则表达式,匹配某些文件
/Base[A-Z]\w+\.(vue|js)$/
)
导出的方法有 3 个属性: resolve, keys, id
resolve 是一个函数,它返回请求被解析后得到的模块 id。
keys 也是一个函数,它返回一个数组,由所有可能被上下文模块处理的请求组成。
id 是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到
通过它我们可以批量导出一些资源比如图片,组件,对象等。比如Vue官方提供的注册组件的案例:
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
const requireComponent = require.context(
// 其组件目录的相对路径
'./components',
// 是否查询其子目录
false,
// 匹配基础组件文件名的正则表达式
/Base[A-Z]\w+\.(vue|js)$/
)
requireComponent.keys().forEach(fileName => {
// 获取组件配置
const componentConfig = requireComponent(fileName)
// 获取组件的 PascalCase 命名
const componentName = upperFirst(
camelCase(
// 获取和目录深度无关的文件名
fileName
.split('/')
.pop()
.replace(/\.\w+$/, '')
)
)
// 全局注册组件
Vue.component(
componentName,
// 如果这个组件选项是通过 `export default` 导出的,
// 那么就会优先使用 `.default`,
// 否则回退到使用模块的根。
componentConfig.default || componentConfig
)
})
注:这里理解的不够深入,只是在项目中看到别人这样写了先记录一下,等到后面回来补充。
版权声明
本文为[[email protected]]所创,转载请带上原文链接,感谢
https://blog.csdn.net/qq_43259860/article/details/125559366
边栏推荐
- Network security - virus
- Where is the future of test engineers? Confused to see
- udp接收队列以及多次初始化的测试
- Swift development learning
- Missing library while loading shared libraries: libisl so. 15: cannot open shared object file: No such file
- In 2022, 95% of the three most common misunderstandings in software testing were recruited. Are you that 5%?
- Performance test | script template sorting, tool sorting and result analysis
- y54.第三章 Kubernetes从入门到精通 -- ingress(二七)
- [shutter] hero animation (hero realizes radial animation | hero component createrecttween setting)
- 可视化yolov5格式数据集(labelme json文件)
猜你喜欢

Redis: simple use of redis

PS remove watermark details

全链路数字化转型下,零售企业如何打开第二增长曲线

His experience in choosing a startup company or a big Internet company may give you some inspiration

微信小程序開發工具 POST net::ERR_PROXY_CONNECTION_FAILED 代理問題

深度(穿透)选择器 ::v-deep/deep/及 > > >

Bottleneck period must see: how can testers who have worked for 3-5 years avoid detours and break through smoothly

Hard core observation 547 large neural network may be beginning to become aware?

Network security - vulnerabilities and Trojans

elastic stack
随机推荐
stm32F407-------DMA
iptables 4层转发
Kotlin middle process understanding and Practice (II)
Recommendation letter of "listing situation" -- courage is the most valuable
Network security - scan
缺少库while loading shared libraries: libisl.so.15: cannot open shared object file: No such file
各国Web3现状与未来
Analyzing several common string library functions in C language
CFdiv2-Fixed Point Guessing-(区间答案二分)
[camera topic] turn a drive to light up the camera
Network security - firewall
Comment communiquer avec Huawei Cloud IOT via le Protocole mqtt
深度(穿透)选择器 ::v-deep/deep/及 > > >
PS remove watermark details
转载收录6.5大侠写的部分Qt开发经验
Redis: simple use of redis
Internal connection query and external connection
What are the key points often asked in the redis interview
Network security OpenVAS
[shutter] top navigation bar implementation (scaffold | defaulttabcontroller | tabbar | tab | tabbarview)