当前位置:网站首页>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
边栏推荐
- iptables 4层转发
- 詳細些介紹如何通過MQTT協議和華為雲物聯網進行通信
- A 30-year-old software tester, who has been unemployed for 4 months, is confused and doesn't know what to do?
- 《上市风云》荐书——唯勇气最可贵
- 【Camera专题】Camera dtsi 完全解析
- Network security - the simplest virus
- Redis:Redis的简单使用
- 全链路数字化转型下,零售企业如何打开第二增长曲线
- Visual yolov5 format data set (labelme JSON file)
- Stm32f407 ------- IIC communication protocol
猜你喜欢

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

ByteDance data Lake integration practice based on Hudi
![[shutter] bottom navigation bar implementation (bottomnavigationbar bottom navigation bar | bottomnavigationbaritem navigation bar entry | pageview)](/img/41/2413af283e8f1db5d20ea845527175.gif)
[shutter] bottom navigation bar implementation (bottomnavigationbar bottom navigation bar | bottomnavigationbaritem navigation bar entry | pageview)

stm32F407-------IIC通讯协议

Deep learning notes (constantly updating...)

Use go language to realize try{}catch{}finally

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

Network security - vulnerabilities and Trojans

Asian Games countdown! AI target detection helps host the Asian Games!
![[camera topic] turn a drive to light up the camera](/img/d3/7aabaa5c75813abc4a43820b4c3706.png)
[camera topic] turn a drive to light up the camera
随机推荐
【Camera专题】手把手撸一份驱动 到 点亮Camera
全链路数字化转型下,零售企业如何打开第二增长曲线
Method of removing webpage scroll bar and inner and outer margins
Network security - DNS spoofing and phishing websites
Analysis, use and extension of open source API gateway apisex
His experience in choosing a startup company or a big Internet company may give you some inspiration
Missing library while loading shared libraries: libisl so. 15: cannot open shared object file: No such file
Network security - virus
DML Foundation
In the face of difficult SQL requirements, HQL is not afraid
小程序开发黑马购物商城中遇到的问题
自定义组件、使用npm包、全局数据共享、分包
Network security ACL access control list
File class (check)
[shutter] top navigation bar implementation (scaffold | defaulttabcontroller | tabbar | tab | tabbarview)
Function definition and call, this, strict mode, higher-order function, closure, recursion
Caused by: com.fasterxml.jackson.databind.exc.MismatchedInputException: Cannot construct instance o
Internal connection query and external connection
Cfdiv2 fixed point guessing- (interval answer two points)
疫情當頭,作為Leader如何進行團隊的管理?| 社區征文