Vue 3 的 Storybook

Vue 3 是 Vue.js 的最新主要版本，它具有更好的人体工程学、更好的性能以及用于管理大型应用的新 API。

Storybook 是一个用于构建 UI 组件的开源工具。它可以加速 UI 开发、生成文档并自动化测试。这种多功能性使其成为 Netflix、Twitter、GitHub、Slack 和 Microsoft 的首选工具。

成千上万的 Vue 2 项目已经使用 Storybook 更快地构建 UI。我们很高兴为下一代框架发布官方 Vue 3 支持。Storybook 的所有核心功能都已包含在内。

🎁 零配置设置，内置 TypeScript 支持
🎛 自动生成的控件和文档
📸 自动化快照和可视化测试
🧩 数百个插件：A11y、Perf、GraphQL、主题等。

早期押注 Vue

Vue 在 Storybook 生态系统中占有特殊的地位。它是我们在 2017 年最早集成的社区之一。

从那时起，@storybook/vue 的使用量激增，每月 npm 下载量超过 50 万次。Vue 生态系统也采用了我们。Storybook 现在与 NuxtJS 和 Vuetify 实现了顶级集成。

今天，Vue 是 Storybook 的“核心”框架之一。这意味着每个新功能和核心插件都将为 Vue 提供一流的支持和文档。我们很高兴继续我们对 Vue 3 支持的承诺。

零配置设置

要开始使用，请在现有 Vue 3 项目的根目录中运行以下命令

npx sb init

这会检测项目类型，安装 @storybook/vue3，并添加一些示例文件来演示 Storybook 的基础知识。运行 `yarn storybook` 会为您提供以下零配置设置

当您在本地导航到 Storybook 时，您将看到如何编写 Vue 3 stories 的示例、常用配置的链接，以及 Storybook 附带的“基本”插件。TypeScript (TS) 支持是内置的。在 官方文档中了解更多信息。

自动生成的控件和文档

一流的支持意味着 Storybook 的关键功能可以与 Vue 3 无缝协作。最受请求的两个功能包括自动生成的控件和文档。

当您使用 JSDoc 注释注释您的 Vue 组件时，Storybook 会将其转换为与您的 stories 并存的实时文档。

考虑 Vue 3 示例

import MyButton from './Button.vue';

const Template = (args) => ({
  components: { MyButton },
  setup() { return { args }; },
  template: '<my-button v-bind="args" />',
});

export const Primary = Template.bind({});
Primary.args = { primary: true };

export const Secondary = Template.bind({});
Secondary.args = { primary: false };

此示例以 Component Story Format 编写，这是一种由 Storybook 开发并受到更广泛的前端生态系统支持的组件文档化标准方法。Template 定义了一个 Vue 3 组件，使用 setup hooks 来展示如何将动态输入 (“args”) 映射到组件 props。每个命名导出都配置模板以显示组件的关键状态。

最后，默认导出定义了关于组件的元数据。

export default {
  title: 'Example/Button',
  component: MyButton,
  args: { label: 'Button' },
  argTypes: {
    backgroundColor: { control: 'color' },
    size: {
      options: ['small', 'medium', 'large'],
      control: 'select'
    },
  },
};

总之，这些会导致自动生成的控件，用于交互式探索组件状态

它还在无需额外工作的情况下生成组件文档，其中包括从组件源代码中提取的 props 布局的所有关键状态

您的组件的控件和文档始终是最新的，因为它们是从源代码自动生成的。每当组件的 API 更改时，您都不需要跟踪您的 UI 文档，Storybook 会为您完成。

非常适合 UI 测试

当您在 Storybook 中构建 UI 时，您可以免费获得测试。Storybook 围绕 stories 的概念展开，这些 stories 捕获您的 UI 组件的受支持状态。

在开发中，您可以手动确认您的 stories “看起来正确”，并使用一套插件在其他维度（如可访问性和移动友好性）中测试您的 story。

在持续集成中，您可以分别使用快照和可视化测试自动检测 stories 中的结构和视觉变化。

测试您的 stories 非常有用，以至于多家商业服务与 Storybook 集成，以在云端和跨浏览器运行测试。值得注意的是，由 Storybook 维护者创建的 Chromatic 与 Storybook 紧密集成，并提供免费的自动化发布和可视化差异比较。

更重要的是，您的 stories 可以跨工具移植。Storybook 开创了 Component Story Format，这是一种基于 JavaScript ES6 模块的组件示例开放标准。这允许您为单元测试和端到端测试重用 stories – 无需锁定。

200 多个插件可供选择

除了 Storybook 的核心功能外，您还可以使用数百个插件的生态系统自定义 Storybook 以适应您的工作流程。

插件解锁了诸如可访问性测试、设计交付集成、样式实用程序以及模拟网络请求之类的超能力。

感谢 Storybook 的跨框架架构，大多数插件已经支持 Vue 3，无需您进行任何额外的修改。我们还在目录中显示框架兼容性（如果可用）。

下一步

Vue 3 的 Storybook 现在在 6.2 版本中可用。通过在项目根目录中运行以下命令来添加 Storybook。查看更新的文档。

npx sb init

问题在 GitHub 上使用 “app: vue3” 标签进行跟踪。如果您遇到现有问题，请通过单击问题描述上的 👍 来为该问题投票。如果您发现没有现有问题的问题，请使用 “bug” 问题模板提交新问题。

我们为 Vue 计划了重大改进，包括

• 原生 Vue 人体工程学，例如单文件组件 stories
• 与 Vue 构建工具（如 Vite）更紧密的集成
• 一旦 MDX v2 发布，原生 Vue MDX 支持

参与进来

Storybook 由 1200 多名开源贡献者维护，并由顶尖维护者的指导委员会指导。Vue 3 集成由 Blaine Bublitz 开发，基于 Sasan Farrokh, andoshin11, 和 Rafael Milewski 的工作，并在 Lee Chase 和社区其他成员的指导下完成。

如果您有兴趣贡献，请在 GitHub 上查看 Storybook，创建 issue 或提交 pull request。在 Open Collective 上捐款。在 Discord 中与我们聊天 — 维护者通常在线。在 Twitter 上并注册我们的邮件列表以获取 Storybook 的最新消息。