我正在使用语义 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?
源代码/main.js
import Semantic from ./components/semantic.js
new Vue({
el: '#app',
components: {
Label,
// Icon,
Divider
}
})
我的目标是能够从 main.js 文件中决定我想要包含哪些组件以及哪些不包含所有导入语句的文件。
关于如何做到这一点的任何想法/建议？
谢谢。
我会这样做，全局注册组件：
['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`) }; })))
)));
也许你应该考虑做一个功能，或者，按照另一个人说的去做。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句