vue使用require.context 全局引入组件

vue 使用require.context 全局引入组件

require.context(directory,useSubdirectories,regExp)
directory:表示检索的目录
useSubdirectories：表示是否检索子文件夹
regExp:匹配文件的正则表达式,一般是文件名

main.js

const viewComponent = require.context("./viewComponent", true, /\.vue$/);
viewComponent.keys().forEach((fileName) => {
  // fileName 拿到viewComponent文件下面的所有文化
  const reqFileName = viewComponent(fileName);
  const viewComponentName =
    reqFileName.name || fileName.replace(/\.\/(.*)\.vue/, "$1").split("/")[0]; // 进行正则匹配把文件名作为组件名
  Vue.component(viewComponentName, reqFileName.default || reqFileName); // 组件注册第一个参数组件名称，第二个路径
});

.vue文件直接写组件名

<template>
  <div>
    <hellow></hellow>
  </div>
</template>