开始使用 Storybook

欢迎来到 Storybook 文档 ✦ 了解如何在您的项目中开始使用 Storybook。然后，探索 Storybook 的主要概念，并发现其他资源以帮助您发展和维护您的 Storybook。

什么是 Storybook？

Storybook 是一个用于独立构建 UI 组件和页面的前端工作台。它帮助您在无需运行整个应用的情况下开发和分享难以触及的状态和边界情况。成千上万的团队使用它进行 UI 开发、测试和文档编写。它是开源且免费的。

安装 Storybook

Storybook 是一个独立工具，与您的应用并行运行。它是一个零配置环境，适用于任何现代前端框架。您可以将 Storybook 安装到现有项目或从头开始创建一个新项目。

npm create storybook@latest

Next.js

React

使用 Vite

React

使用 Webpack

React Native Web

使用 Vite（浏览器内）

React Native

设备上

Preact

使用 Vite

Vue

使用 Vite

Angular

SvelteKit

Svelte

使用 Vite

Web Components

使用 Vite

想了解更多关于安装 Storybook 的信息吗？请查看安装指南。

主要概念

Storybook 是一个强大的工具，可以在 UI 开发工作流程的许多方面提供帮助。以下是一些主要概念，可帮助您入门。

Story

Story 捕获了 UI 组件的渲染状态。每个组件可以有多个 Story，每个 Story 描述一个不同的组件状态。

文档

Storybook 可以分析您的组件，并自动在 Story 旁边生成文档。这种自动文档使您更容易创建 UI 库使用指南、设计系统站点等。

测试

Story 是 UI 测试策略的实用起点。在 UI 开发过程中，您自然而然地编写 Story，因此测试这些 Story 是一种低成本的方式，可以随着时间的推移预防 UI 错误。

分享

发布您的 Storybook 使您可以与他人分享您的工作。您还可以将您的 Story 嵌入到 Notion 或 Figma 等地方。

其他资源

掌握基础知识后，探索其他方法，以便充分利用 Storybook。