是否可以在文件夹中导入 *.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" 的文件中使用这个脚本到 "export default all exported default in every file in the current folder" 之类的东西：

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

我将在此处以深入/简单的方式进行解释。

在这里快速回答。

创建一个文件夹（假设颜色文件夹）
在该文件夹中创建和/或添加 Vue 文件 （示例 red.vue、blue.vue、green.vue )
添加到那个文件夹（颜色文件夹）一个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>

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

Is it possible to import *.vue files in a folder?

javascript

php

vue.js

vue-component