Vue.js 在Vue JS中自动导入组件内部的组件

我想知道在vue 3中自动导入另一个组件内部组件的最佳实践。

自动导入

src/components

目录中以“Base”开头的所有组件，例如BaseInput.vue、BaseSelect.vue等。（使用vue CLI创建的项目）

src/views/EventCreate.vue

<template>
    //template data here
</template>
<script>
    import upperFirst from "lodash/upperFirst";
    import camelCase from "lodash/camelCase";

    //require.context function from webpack
    const requireComponents = require.context(
      "../components",
      false,
      /Base[A-Z]\w+\.(vue|js)$/
    );

    let comps = {};

    requireComponents.keys().forEach((fileName) => {

      //removing extension converting to valid component name e.g. "./base-input.vue" to "BaseInput"

      const componentConfig = requireComponents(fileName);
      const componentName = upperFirst(
        camelCase(fileName.replace(/^\.\/(.*)\.\w+$/, "$1"))
      );

      //add it to comps object with dynamic name
      comps[componentName] = componentConfig.default || componentConfig;
    });

    export default{
        components:{ ...comps }
        //remaining exports here
    }
</script>

<style scoped>
   //style here
</style>

//模板数据在这里
从“lodash/upperFirst”导入upperFirst；
从“lodash/camelCase”进口camelCase；
//网页包中的require.context函数
const requireComponents=require.context(
“/组件”，
假,，
/基[A-Z]\w+\（vue|js）$/
);
设comps={}；
requireComponents.keys（）.forEach（（文件名）=>{
//正在删除将扩展名转换为有效组件名称，例如“/base-input.vue”转换为“BaseInput”
const componentConfig=requireComponents（文件名）；
常量componentName=upperFirst(
camelCase（fileName.replace（/^\.\/（.*）\.\w+$/，“$1”））
);
//将其添加到具有动态名称的comps对象
comps[componentName]=componentConfig.default | | componentConfig；
});
导出默认值{
组件：{…comps}
//这里的剩余出口
}
//这里的风格