Storybook for Vue 3

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

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

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

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

早期押注 Vue

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

自那时以来，@storybook/vue 的使用量已飙升至每月超过 50 万次 npm 下载。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 };

此示例采用组件 Stories 格式编写，这是一种由 Storybook 开发并得到更广泛前端生态系统支持的标准组件文档方式。Template 使用 setup hook 定义了一个 Vue 3 组件，以展示如何将动态输入（“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 “看起来是正确的”，并使用一套插件从无障碍性、移动友好性等其他维度测试您的 stories。

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

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

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

200+ 插件可供选择

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

插件可以解锁超能力，例如可访问性测试、设计稿交付集成、样式工具以及网络请求的模拟。

得益于 Storybook 的跨框架架构，大多数插件在无需您进行任何额外修改的情况下即可支持 Vue 3。我们还在目录中显示（可用时）框架兼容性。

后续步骤

Storybook for Vue 3 现已在 6.2 版本中推出。在项目的根目录中运行以下命令即可添加 Storybook。请查阅更新的文档。

npx sb init

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

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

• 原生 Vue 易用性，例如单文件组件 stories
• 与 Vite 等 Vue 构建工具更紧密的集成
• 一旦 MDX v2 发布，就支持原生 Vue MDX

参与进来

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

如果您有兴趣贡献，请在 GitHub 上查看 Storybook，创建问题或提交拉取请求。在 Open Collective 上捐款。在 Discord 上与我们聊天 — 通常会有维护者在线。通过在 Twitter 和下方注册我们的邮件列表，及时了解 Storybook 的最新消息。