javascript - Vue 多个组件在一个包/文件中

Question

假设我想创建一个 UI 包，如何将多个组件放入一个 JS 文件中？

通常我会将不同的组件放在不同的文件中:

import ButtonText from '../ButtonText.vue'
import ButtonIcon from '../ButtonIcon .vue'
import ButtonLayout from '../ButtonLayout.vue'

但我想将所有 Button 组件放在一个文件中，以实现可重用性等，这样我就可以在需要时导入它们

import {ButtonText, ButtonIcon, ButtonLayout } from '../ButtonPackage.vue'

我的 ButtonPackage.vue/.js 文件会是什么样子？

Answer 1

在 ButtonPackage.js 文件中导入所有组件，并将它们导出为对象。

import ButtonText from '../ButtonText.vue'
import ButtonIcon from '../ButtonIcon .vue'
import ButtonLayout from '../ButtonLayout.vue'

export {ButtonText, ButtonIcon, ButtonLayout }

然后在组件中根据需要导入它们:

import { ButtonText } from '../ButtonPackage.js'