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

Question

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

标签： vue.jsvuejs3

Answer 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>