使用背景
用vue开发的所有项目,都是采用组件化的思想开发的,分为公共组件和功能组件。
又可以分为全局自定义组件和局部自定义组件,全局自定义组件在main.js文件直接引入,这种是最简单的方式。
使用缺点
如果我们需要注册的全局组件非常多,那么需要一个一个引入,然后分别调用Vue.componet方法,main.js文件会变得很大很臃肿,不好维护
webpack批量注册组件
webpack提供的一个自动导入的API
require.context(directory, flag, regExp)
参数1:要导入的当前模块的文件夹目录
参数2:是否加载子目录
参数3:正则,匹配文件
返回值:导入函数 fn
使用require提供的函数context加载某一个目录下所有的.vue后缀的文件
返回值是一个对象,对象里面有一个属keys(), 可以获取所有的文件路径
我们可以遍历importFn.keys()
扫描二维码关注公众号,回复: 14776625 查看本文章最后在遍历中使用app.component(component.name, component)全局注册
在compontents组件文件夹下新建 .js文件
import Vue from 'vue'
const requireComp = require.context('.', true, /\.vue$/)
requireComp.keys().forEach((fileName) => {
const config = requireComp(fileName)
Vue.component(config.default.name, config.default || config)
})
在main.js中导入
import '@/components/componentRegister.js'
在.vue中直接使用
<template>
<div>
<menu />
<!-- 或 -->
<MENU />
</div>
</template>;