开始使用 Storybook

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

什么是 Storybook？

Storybook 是一个前端工作空间，用于单独构建 UI 组件和页面。它可以帮助您开发和共享难以触及的状态和边缘情况，而无需运行整个应用程序。成千上万的团队使用它进行 UI 开发、测试和文档记录。它是开源且免费的。

安装 Storybook

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

npm create storybook@latest

Next.js

React

with Vite

React

with Webpack

React Native Web

with Vite (in browser)

React Native

on device

Preact

with Vite

Vue

with Vite

Angular

SvelteKit

Svelte

with Vite

Web Components

with Vite

想了解更多关于安装 Storybook 的信息？请参阅 安装指南。

主要概念

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

Stories

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

Docs

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

Testing

Stories 是您 UI 测试策略的一个实用起点。您已经在 UI 开发的自然过程中编写 Stories，因此测试这些 Stories 是随着时间推移防止 UI 错误的低成本方法。

Sharing

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

其他资源

学习完基础知识后，探索其他充分利用 Storybook 的方法。