开始使用 Storybook

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

什么是 Storybook？

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

安装 Storybook

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

npx storybook@latest init

Next.js

React

使用 Vite

React

使用 Webpack

React Native

Vue

使用 Vite

Vue

使用 Webpack

Angular

SvelteKit

Svelte

使用 Vite

Svelte

使用 Webpack

Web Components

使用 Vite

Web Components

使用 Webpack

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

主要概念

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

故事

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

文档

Storybook 可以分析你的组件，并在你的故事旁边自动创建文档。这些自动生成的文档让您更轻松地创建 UI 库使用指南、设计系统网站等。

测试

故事是您的 UI 测试策略的务实起点。您已经将故事作为 UI 开发的自然组成部分编写，因此测试这些故事是随着时间的推移防止 UI 错误的低成本方法。

分享

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

更多资源

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