是否可以导入文件夹中的*.vue文件？

Question

我讨厌在代码中重复事情。现在我正在 main.js 中导入这样的 vue 文件。

import Default     from '../../src/components/default.vue';
import Home        from '../../src/components/home.vue';
import hakkinda    from '../../src/components/hakkinda.vue';
import projeler    from '../../src/components/projeler.vue';
import servisler   from '../../src/components/servisler.vue';
import yetenekler  from '../../src/components/yetenekler.vue';
import yetenek     from '../../src/components/yetenek.vue';
import referanslar from '../../src/components/referanslar.vue';
import iletisim    from '../../src/components/iletisim.vue';

有没有办法用更少的线来做同样的事情？如果我可以从文件名中分配变量名，那就太好了。 PHP 可以帮助解决这个问题吗？那么如何编译main.js呢？我没弄清楚。

Answer 1

我在名为“index.js”的文件中使用此脚本来“导出当前文件夹中每个文件中的默认所有导出的默认值”之类的东西：

const files = require.context('.', false, /\.js$/)
const modules = {}
files.keys().forEach((key) => {
  if (key === './index.js') return
  modules[ key.replace(/(\.\/|\.js)/g, '') ] = files(key).default
})
export default modules

然后您可以通过导入目录名称来导入整个目录，就像这样：

import folder from '../path/to/folder'

我希望这有帮助。

Answer 2

基于 Potray 和 Fosuze 的工作答案，方便参考：

const files = require.context('.', false, /\.vue$/)
const modules = {}
files.keys().forEach((key) => {
     if (key === './index.js') return
     modules[key.replace(/(\.\/|\.vue)/g, '')] = files(key)
})
export default modules

Answer 3

请参阅我创建的中等帖子

我将在那里以深入/简单的方式解释它。

在这里快速回答。

• 创建一个文件夹（比如说colors文件夹）

• 在该文件夹中创建和/或添加 Vue 文件 （示例 red.vue、blue.vue、green.vue）

• 添加到该文件夹（colors文件夹）一个包含的index.js（这是基于oprogfrogo的答案。）。

const files = require.context('.', false, /\.vue$/)
const modules = {}
files.keys().forEach((key) => {
     if (key === './index.js') return
     modules[key.replace(/(\.\/|\.vue)/g, '')] = files(key)
})
export default modules

您的目录看起来像这样

• 颜色/
• 颜色/red.vue
• 颜色/蓝色.vue
• 颜色/绿色.vue
• 颜色/index.js

然后在任何组件中，您都可以

 import colors from "./colors/index" //location of the folder
 console.log(colors);
 let yourComponent = colors['blue'].default // wil get you that component 

哪里

['is the file name']

然后在您的模板中，您可以

<component v-bind:is="yourComponent"></component>

Answer 4

取消插件-vue-组件

这是一个Vue插件，可以在使用时自动导入组件。同时支持 Vue 2 和 Vue 3。请参阅此处安装说明。

它会自动变成这个：

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
  export default {
    name: 'App',
  }
</script>

进入这个：

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
  import HelloWorld from './src/components/HelloWorld.vue'

  export default {
    name: 'App',
    components: {
      HelloWorld,
    },
  }
</script>

请注意，它会自动执行

import

以及

components: {...}

注册，因此您无需这样做。