开始使用 Storybook
Storybook 是一个用于独立构建 UI 组件和页面的前端工作室。它可以帮助你开发和共享难以触及的状态和边缘情况，而无需运行整个应用。成千上万的团队使用它进行 UI 开发、测试和文档编写。它是开源且免费的。
¥Storybook is a frontend workshop for building UI components and pages in isolation. It helps you develop and share hard-to-reach states and edge cases without needing to run your whole app. Thousands of teams use it for UI development, testing, and documentation. It's open source and free.
安装 Storybook
¥Install Storybook
运行此命令以将 Storybook 安装到现有项目或从头创建一个新项目：
¥Run this command to install Storybook into an existing project or create a new one from scratch:
npm create storybook@latest想要了解有关安装 Storybook 的更多信息吗？查看 安装指南。
¥Want to know more about installing Storybook? Check out the installation guide.
支持框架
¥Supported frameworks
Next.js
Next.js
with Vite
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
社区维护的框架
¥Community-maintained frameworks
Storybook 拥有活跃的社区，支持各种框架和库。这些社区维护的框架由社区贡献者积极开发和维护。
¥Storybook includes an active community that supports additional frameworks and libraries. These community-maintained frameworks are actively developed and maintained by community contributors.
Analog
with Vite
Nuxt
with Vite
SolidJS
with Vite
React
with Rspack / Rsbuild
Vue
with Rspack / Rsbuild
Web Components
with Rspack / Rsbuild
主要概念
¥Main concepts
Storybook 是一个强大的工具，可以帮助你处理 UI 开发工作流程的许多方面。以下是一些帮助你入门的主要概念。
¥Storybook is a powerful tool that can help you with many aspects of your UI development workflow. Here are some of the main concepts to get you started.
故事
故事捕捉 UI 组件的渲染状态。每个组件可以有多个故事，每个故事描述不同的组件状态。
文档
Storybook 可以分析你的组件，自动创建文档，同时生成你的故事。此自动文档让你可以更轻松地创建 UI 库使用指南、设计系统站点等。
测试
故事是 UI 测试策略的一个实用起点。你已经将编写故事作为 UI 开发的自然组成部分，因此测试这些故事是一种省力且可防止 UI 随着时间的推移而出现错误的方法。
分享
发布 Storybook 可让你与他人分享你的作品。你还可以将你的故事嵌入 Notion 或 Figma 等地方。
其他资源
¥Additional resources
一旦你了解了基础知识，请探索这些其他方法以充分利用 Storybook。
¥Once you've learned the basics, explore these other ways to get the most out of Storybook.