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

Vue

使用 Webpack

Angular

SvelteKit

Svelte

使用 Vite

Svelte

使用 Webpack

Web Components

使用 Vite

Web Components

使用 Webpack

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

主要概念

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

Stories

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

文档

Storybook 可以分析你的组件，以在你的 Story 旁边自动创建文档。这种自动文档使你可以更轻松地创建 UI 库使用指南、设计系统站点等。

测试

Stories 是你的 UI 测试策略的实用起点。你已经将编写 Story 作为 UI 开发的自然组成部分，因此测试这些 Story 是一种低成本的方式，可以长期防止 UI 错误。

分享

发布你的 Storybook 可以让你与他人分享你的工作。你还可以将你的 Story 嵌入到 Notion 或 Figma 等位置。

其他资源

一旦你学习了基础知识，就可以探索以下其他方法来充分利用 Storybook。