Vue-Loader -导入导入组件的文件

Question

我将Vue组件从语义UI CSS框架中提取出来。我想要做的是创建一个导入所有组件的semantic.js (或者semantic.vue)文件，然后在semantic.vue文件中导入这个semantic.js文件。

换句话说，如下所示：

src/components/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文件中决定要包含哪些组件，以及哪些组件不需要将文件与所有导入语句混合在一起。

对如何做这件事有什么想法或建议吗？

谢谢。

Answer 1

我会这样做的，在全球范围内注册组件：

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

如果你是忍者，不喜欢创建和维护注册文件(如另一个答案所建议的那样)，那可能没问题。

更高级的是，您还可以围绕这段代码进行一些舞蹈，以便在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`) }; })))
)));

也许你应该考虑做一个函数，或者，按照另一个人说的去做。

Answer 2

您应该能够通过以下方式导出这些组件：

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
   }

})