require.context是webpack中,用来创建自己的(模块)上下文
webpack 会在打包构建代码中解析它
require.context接收三个参数:
- 要搜索的文件夹目录
- 是否搜索它的子目录
- 以及一个匹配文件的正则表达式
require.context('../views/components', true, /\.vue/)
在我们项目中,有很多自定义的全局组件,使用这个将会非常方便,下面举例说明
image我这里只写了两个,当我们有一百个的时候,如果手动全局引入。。。
image这将是惨不忍睹的
所以,投机取巧的我们,利用了 require.context
import Vue from 'vue'
// 自定义组件
const requireComponents = require.context('../views/components', true, /\.vue/)
// 打印结果
// 遍历出每个组件的路径
requireComponents.keys().forEach(fileName => {
// 组件实例
const reqCom = requireComponents(fileName)
// 截取路径作为组件名
const reqComName = fileName.split('/')[1]
// 组件挂载
Vue.component(reqComName, reqCom.default || reqCom)
})
一段话搞定一整个文件夹的组件,是否很方便
网友评论