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、主题等

早期押注 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 故事的示例、常见配置的链接以及 Storybook 附带的“核心”插件。TypeScript (TS) 支持是内置的。在官方文档中了解更多信息。

自动生成的控件和文档

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

当您使用 JSDoc 注释注释您的 Vue 组件时，Storybook 会将其转换为与您的故事一起存在的活动文档。

考虑这个 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 使用 setup 钩子定义了一个 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 围绕故事的概念展开，这些故事捕获了您的 UI 组件支持的状态。

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

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

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

更重要的是，您的故事可以在不同工具之间移植。Storybook 开创了组件故事格式（Component Story Format），这是一种基于 JavaScript ES6 模块的组件示例开放标准。这使得您可以将故事用于单元测试和端到端测试——没有锁定。

200多个插件供您选择

除了 Storybook 的核心功能，您还可以利用包含数百个插件的生态系统，定制 Storybook 以适应您的工作流程。

插件解锁了可访问性测试、设计交付集成、样式工具和网络请求模拟等超能力。

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

后续步骤

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

npx sb init

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

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

• 原生 Vue 工效学，例如单文件组件故事
• 与 Vue 构建工具（如 Vite）更紧密的集成
• MDX v2 发布后的原生 Vue MDX 支持

参与进来

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

如果您有兴趣贡献，请在 GitHub 上查看 Storybook，创建问题，或提交拉取请求。在 Open Collective 上捐赠。在 Discord 中与我们聊天——通常会有维护者在线。在 Twitter 上关注我们并订阅我们的邮件列表，以获取 Storybook 的最新消息。