Vue-Loader - 導入導入組件的文件

我正在將Vue組件從Semantic UI CSS框架中取出。我想要做的是創建一個導入所有組件的semantic.js（或者一個semantic.vue）文件，然後在我的main.js文件中導入該semantic.js文件。Vue-Loader - 導入導入組件的文件

換句話說，類似如下：

的src /組件/ semantic.js

import Label from ./elements/Label.vue 
import Icon from ./elements/Icon.vue 
import Divider from ./elements/Divider.vue 

// Am I supposed to export these? If so, how?

的src/main.js

import Semantic from ./components/semantic.js 

new Vue({ 
    el: '#app', 

    components: { 
    Label, 
    // Icon, 
    Divider 
    } 

})

我的目標是能夠從main.js文件中決定我想包含哪些組件，哪些不是沒有clutt的組件用所有的導入語句彈出文件。

有關如何做到這一點的任何想法/建議？

謝謝。

來源

2017-05-08 Moshe

我會做的是，註冊全球組件：

['Label', 'Icon', 'Divider'] 
.map(c => Vue.component(c, require(`./elements/${c}.vue`)));

如果你是一個忍者a nd不喜歡創建和維護註冊文件（正如其他答案所建議的那樣），那可能沒問題。

更高級的，你也可以圍繞這段代碼做一些跳舞，以實際在Vue實例級別註冊組件。每個人都會喜歡它：

new Vue({ 
    el: '#app', 
    components: { 
    Object.assign({}, 
    ...['Label', 'Icon', 'Divider'] 
    .map(c => { return { [c]: require(`./elements/${c}.vue`) }; })) 
    } 

});

附錄： ，增加了多文件夾的解決方案，因爲你自找的（因爲這很有趣），但人是真的在那裏它開始看起來更像垃圾不是天才。即使角用戶不會希望這樣的語法：

Object.assign({}, ([].concat(...([ 
    ['elements', ['Label', 'Icon', 'Divider']], 
    ['otherFolder', ['Bla', 'Blabla', 'Blablabla']], 
    ['otherFolder/whoop', ['OtherThing', 'Foo', 'Bar']] 
].map(c => c[1].map(m => { return { [m]: require(`./${c[0]}/${m}.vue`) }; }))) 
)));

也許你應該考慮做一個功能，或者，做與其他人說。

來源

2017-05-08 13:37:38 Cobaltway

非常有趣。兩個問題。對於第一種方法 - 我會將該代碼放在我的main.js文件中？第二個問題 - 我將如何處理多個文件夾？在您的代碼中，所有內容都位於元素文件夾中。在我的計劃中，我計劃將語義文件夾分爲子文件夾（'元素'，'模塊'，'視圖'等），並且除語義文件夾外還有其他文件夾（包含子文件夾）。任何想法我會如何處理？謝謝。 – Moshe

- 可能。在我開始使用任何模板之前加載的任何地方。 +我編輯了我的答案。你自由，他們只是產生的字符串。 – Cobaltway

謝謝 - 非常感謝。 – Moshe

您應該能夠通過使這放入系統組件出口：

import Label from ./elements/Label.vue 
import Icon from ./elements/Icon.vue 
import Divider from ./elements/Divider.vue 

export Label 
export Icon 
export Divider

，然後在.vue選擇要導入的組件：

import { Label, Divider } from ./components/semantic.js 

new Vue({ 
    el: '#app', 

    components: { 
    Label, 
    Divider 
    } 

})

來源

2017-05-08 12:06:17 Hammerbot

Vue-Loader - 導入導入組件的文件

回答

相關問題