Javascript Vue一个包/文件中包含多个组件

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

通常，我会在不同的文件中包含不同的组件：

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

但我想把我所有的按钮组件放在一个文件中，以便于重用，这样我就可以在需要时导入它们

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

---

我的ButtonPackage.vue/.js文件看起来如何？

在

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'

---

关键是在一个文件中导出所有组件：

import ButtonText from "./ButtonText";
import ButtonIcon from "./ButtonIcon";
import ButtonLayout from "./ButtonLayout";
export { ButtonText, ButtonIcon, ButtonLayout };

因此，当您想要使用其中任何一种：

import {
  ButtonText,
  ButtonIcon,
  ButtonLayout,
} from "./components/ButtonPackage";

下面是我创建的一个演示：

---

我认为这是不可能的。我希望这是不可能的，因为这是反对一切关于有组件摆在首位。您只想在脚本部分创建一个巨大的混乱，可能需要滚动数千行代码。为什么？