一流的 Vue 支持，基于 Volar 和 Storybook 8

感谢我们的 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 组件的信息，包括事件数据、slot 绑定和 props，以及暴露的变量和函数。

更强大的类型支持

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

更广泛的导入兼容性

过去，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 文档 中了解更多关于如何配置 Volar 与 Storybook 的信息！

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 告知我们！