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

https://medium.com/@mo.belhaj/dynamically-render-a-component-from-an-imported-folder-vue-js-87a5a0ae1b07

有關深入的答案，請參閱媒體帖子。 我會在那里用簡單的方式解釋它。

快速回答。 這里

• 創建一個文件夾（例如顏色文件夾）

• 在該文件夾中創建和/或添加您的 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

例如，您的目錄看起來像

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