在 Vue JS 中的组件内自动导入组件答案

【问题标题】：Auto Import Components Inside A Component In Vue JS在 Vue JS 中的组件内自动导入组件
【发布时间】：2021-07-23 13:54:39
【问题描述】：

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

【问题讨论】：

标签： vue.js vuejs3

【解决方案1】：

自动从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>

【讨论】：