以编程方式从文件夹中导入 Vue 组件而不是硬编码（我实际上使用的是 Nuxt，但我将其称为 Vue）

Question

我有许多 SVG 卡片作为 Vue 中的组件；我可能有50个或更多。我可以在脚本标签之后一一导入它们：

<script>
import MyVueComponent1 from "~/components/MyVueComponent1.vue";
import MyVueComponent2 from "~/components/MyVueComponent2.vue";
import MyVueComponent3 from "~/components/MyVueComponent3.vue";
...
import MyVueComponent50 from "~/components/MyVueComponent50.vue";

但我一直在阅读，我可以通过编程方式执行此操作。我只是还没有找到任何一个例子让我 crystal 清楚。我可以动态注册组件，但不确定如何导入整个组件文件夹。

我能够在创建的挂钩中使用此代码动态注册组件：

created() {
    const requireComponent = require.context(
      // Look for files in the current directory
      "../components",
      // Do not look in subdirectories
      false,
      // Only include "S" prefixed .vue files
      /S[\w-]+\.vue$/
    );

    // For each matching file name...
    requireComponent.keys().forEach((fileName) => {
      // Get the component config
      const componentConfig = requireComponent(fileName);
      // Get the PascalCase version of the component name
      fileName = fileName.replace("./", "");
      fileName = fileName.replace(".vue", "");
      const componentName = fileName;
      this.generatedComponentList.push(componentName);
      // Globally register the component
      Vue.component(componentName, componentConfig.default || componentConfig);
    });
  },

我正在使用组件名称的 generatedComponentList 来显示卡片：

<div
      v-for="componentName in generatedComponentList"
      :key="componentName"
    >
      <component :is="componentName" :id="componentName"></component>
    </div>

但我希望摆脱脚本标签下的所有导入行，并拥有更简洁、更动态的代码。这样，如果我向文件夹中添加一个新的组件卡，它将被简单地“拾取”并显示，而无需添加“导入”行或注册组件等。希望我已经清楚地表达了我正在寻找的内容实现。

Answer 1

Nuxt 会自动导入您从 ~/components 目录中使用的组件，因此您无需显式导入或注册它们。

此功能已在 nuxt.config.js 中启用 components config:

// nuxt.config.js
export default {
  components: true
}

Answer 2

感谢 tony19 建议我查看 nuxt.config.js 文件，您的回答肯定让我走上了正轨；还要感谢建议可能是正确答案的人。

这是对我有用的解决方案：

根据 tony19 的建议，我查看了我的 nuxt.config.js 文件；特别是组件部分。我的代码中已经有这一行来自动导入我的组件文件夹中的任何组件：

components: true,

但是我要导入的组件嵌套在组件文件夹中的另一个文件夹中。

阅读 nuxt.org 文档中的 2 后，我将之前的代码替换为：

//components: true,
  components: [
    // Equivalent to { path: '~/components' }
    '~/components',
    { path: '~/components/myTargetComponents', extensions: ['vue'] }
  ],

然后，我能够删除所有导入行：

<script>
import MyVueComponent1 from "~/components/MyVueComponent1.vue";
import MyVueComponent2 from "~/components/MyVueComponent2.vue";
import MyVueComponent3 from "~/components/MyVueComponent3.vue";
...
import MyVueComponent50 from "~/components/MyVueComponent50.vue";

在我的 index.vue 文件中，组件部分不再列出任何内容...只是提醒自己：

,
  components: {
    //see nuxt.config.js file ...component section
  },

明确一点，在我的 index.vue 文件中，我没有使用这种格式导入任何组件，“从“~/components/MyVueComponent1.vue 导入 MyVueComponent1”；而且我没有组件部分中列出了任何内容。另外，为了澄清，我要导入的组件位于组件文件夹 (~/components/myTargetComponents) 的子文件夹中。我现在意识到我没有清楚地说明在我原来的 post.

作为本文的相关部分...

正如您从我原来的 post 中看到的那样，我在创建的挂钩中使用了一段代码来填充组件名称列表：

this.generatedComponentList.push(componentName);

然后使用此列表遍历组件卡片：

<div
      v-for="componentName in generatedComponentList"
      :key="componentName"
    >
      <component :is="componentName" :id="componentName"></component>
    </div>

但我想知道 nuxt.config.js 文件是否已经生成了这些组件的列表。有什么建议么？再次感谢大家的帮助，非常感谢。

以编程方式从文件夹中导入 Vue 组件而不是硬编码（我实际上使用的是 Nuxt，但我将其称为 Vue）

Import Vue components from folder programmatically not hard coded (I'm actually using Nuxt but I'll call it Vue)

import

components

dynamic

vue.js

nuxt.js