Webpack中有一个函数
require.context(directory, useSubdirectories = false, regExp = /^\.\//)
参数:
directory:要搜索的文件夹目录
useSubdirectories:是否还应该搜索它的子目录
regExp:一个匹配文件的正则表达式
自动注册Vue组件(适用于高频组件)
// global.js文件 Vue.use(global); function changeStr(str) { return str.charAt(0).toUpperCase() + str.slice(1); } // 查找同级目录下以vue结尾的组件 const requireComponent = require.context("./", false, /\.vue$/); // 对外暴露install方法 const install = (Vue) => { requireComponent.keys().forEach((fileName) => { let config = requireComponent(fileName); console.log(config); // ./child1.vue 然后用正则拿到child1 let componentName = changeStr( fileName.replace(/^\.\//, "").replace(/\.\w+$/, "") ); Vue.component(componentName, config.default || config); }); }; export default { // 对外暴露install方法 install, };
main.js 中注册
Vue.use(global);