使用 Volar 和 Storybook 8 提供一流的 Vue 支持

感谢我们的 Vue 维护者（Chakir、Lars 和 Kasper）的出色工作，Storybook 8 显著改进了我们在 Vue 项目中生成控件和文档的方式。我们正在使用来自 Vue 官方语言框架的包 vue-component-meta。此包构建在 Volar 之上，Volar 是驱动 Vue VSCode 扩展的社区库！

在这篇文章中，我们将分享为什么引入 vue-component-meta，它为 Storybook Vite Vue 项目带来的诸多优势，以及如何立即试用它。

由 Volar 支持的 Storybook

早在 2020 年 Storybook 6.0 发布时，Storybook 就开始使用名为 vue-docgen-api 的包为 Vue 组件和 props 自动生成描述、类型和控件。

自那时以来，Vue 已发展到支持更复杂和导入的类型，并添加了 defineSlots 和 defineExpose 等新功能。vue-docgen-api 并未跟上所有这些变化，而 Volar 和 Vue Language Tools 却做到了。

通过将 vue-docgen-api 升级到 Vue 官方的 vue-component-meta 包，我们能够弥合 Storybook 和 Vue 之间的差距，为 Vue 开发者带来大幅改进的体验。

功能

改进的元数据提取

Storybook 的 UI 现在显示更多关于你的 Vue 组件的信息，包括事件数据、插槽绑定和 props，以及暴露的变量和函数。

更强的类型支持

Storybook 现在可以为使用复杂类型（如交叉类型、联合类型、嵌套类型和枚举）的 Vue 组件自动生成控件。此外，Storybook 会相应地渲染数组类型（例如显示为 string[] 而不是 'Array'），并自动将联合类型和枚举类型渲染为单选/选择控件。

更广泛的导入兼容性

过去，Vue Storybook 只支持 .vue 文件。现在，它兼容更多文件类型，包括 .vue、.js、.ts、.jsx 和 .tsx 组件（支持默认导出和命名导出）。

开始使用

首先，使用我们的升级命令升级到 Storybook 8

npx storybook@next upgrade

然后，在你的 .storybook/main.js|ts 配置文件中，将 vue-component-meta 添加为 docgen 框架选项，如下所示

// .storybook/main.ts
import type { StorybookConfig } from "@storybook/vue3-vite";

const config: StorybookConfig = {
  framework: {
    name: "@storybook/vue3-vite",
    options: {
      docgen: "vue-component-meta",
    },
  },
};

export default config;

在 Storybook 的 Vue 文档中了解更多关于如何在 Storybook 中配置 Volar 的信息！

vue-docgen-api 未来如何？

在未来版本的 Storybook 中，vue-component-meta 很可能成为 Vue 控件生成的默认库。vue-docgen-api 仍然可以使用，Storybook 8 也对该集成带来了改进！

Storybook 8 中更多 Vue 的精彩之处

Storybook 8 的目标之一是显著提高 Storybook 与前端生态系统的兼容性。除了集成 vue-component-meta 外，我们还消除了在 Vue 项目中需要安装 React 作为对等依赖项的要求，这是 Storybook 7 中一个令人沮丧的限制。

该版本还包含大量新功能、工作流程以及 UI/UX 改进。你可以在我们的 Storybook 8 公告中了解所有这些变化。

再次感谢我们的 Vue 团队——Chakir、Lars 和 Kasper——将此功能变为现实。如果你有任何反馈，请务必通过社交媒体或 Discord 告诉我们！