1

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

关于如何做到这一点的任何想法/建议？

谢谢。

4

2 回答 2

3

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

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

可能你应该考虑做一个功能，或者像其他人说的那样做。

于 2017-05-08T13:37:38.183 回答
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
   }

})
于 2017-05-08T12:06:17.247 回答