Vue：利用require.context自动注册组件

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);