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);
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页