Vue-Loader——导入一个导入组件的文件

Question

我正在使用语义 UI CSS 框架制作 Vue 组件。我想做的是创建一个导入所有组件的 semantic.js（或者可能是 semantic.vue）文件，然后在我的 main.js 文件中导入该 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 文件中决定我要包含哪些组件，哪些不包含，而不会用所有导入语句弄乱文件。

任何关于如何做到这一点的idea/suggestion？

谢谢。

Answer 1

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

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
   }

})

Answer 2

我会那样做，全局注册组件：

['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`) }; }))
   }

});

附录： 为多个文件夹添加了一个解决方案，因为您要求它（并且因为这很有趣），但真正开始看起来更像垃圾而不是天才的人。即使 Angular 用户也不会想要这种语法：

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`) }; })))
)));

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

Vue-Loader——导入一个导入组件的文件

Vue-Loader - Importing a File that Imports Components

vue.js

vue-component

vue-loader

vuejs2