自动的批量注册组件。
大致步骤:
- 使用
require
提供的函数context
加载某一个目录下的所有.vue
后缀的文件。- 然后
context
函数会返回一个导入函数importFn
- 它又一个属性
keys()
获取所有的文件路径- 通过文件路径数组,通过遍历数组,再使用
importFn
根据路径导入组件对象- 遍历的同时进行全局注册即可
单次注册
// vue3.0插件写法要素:导出一个对象,有install函数,默认传入了app应用实例,app基础之上扩展import XXX from './xxx.vue' 导入
export default {
install(app) {
app.component(XXX.name, XXX) 注册
}
}
批量注册
// context(目录名称,是否加载子目录,加载文件的匹配(可以正则))
// 拿到目录下的所匹配的所有.vue 后缀的文件
const importFn = require.context('./',false,/\.vue$/)
//(当前目录 没有子目录 .vue结尾的文件)
export default {
install(app) {
// 根据keys()批量注册 遍历所匹配的所有的文件
importFn.keys().forEach(path => {
// 相当于 import XXX from './xxx' 导入组件
const component = importFn(path).default
//使用importFn导入每一个路径
app.component(component.name,component)
// 注册
})
}
}