是否可以在文件夹中导入 *.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

See the medium post I created

我将在那里深入/简单地解释它。

在这里快速回答。

• 创建一个文件夹（比如说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

您的目录如下所示

• 颜色/
• colors/red.vue
• colors/blue.vue
• colors/green.vue
• colors/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>