开始使用 Storybook
欢迎阅读 Storybook 的文档 ✦ 了解如何在你的项目中开始使用 Storybook。然后，探索 Storybook 的主要概念并发现其他资源以帮助你发展和维护你的 Storybook。
¥Welcome to Storybook's documentation ✦ Learn how to get started with Storybook in your project. Then, explore Storybook's main concepts and discover additional resources to help you grow and maintain your Storybook.
什么是 Storybook？
¥What is 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 是一个与你的应用一起运行的独立工具。它是一个零配置环境，可与任何现代前端框架配合使用。你可以将 Storybook 安装到现有项目中，也可以从头开始创建一个新项目。
¥Storybook is a standalone tool that runs alongside your app. It's a zero-config environment that works with any modern frontend framework. You can install Storybook into an existing project or create a new one from scratch.
npx storybook@latest init
Next.js
React
with Vite
React
with Webpack
React Native
Vue
with Vite
Vue
with Webpack
Angular
SvelteKit
Svelte
with Vite
Svelte
with Webpack
Web Components
with Vite
Web Components
with Webpack
想要了解有关安装 Storybook 的更多信息吗？查看 安装指南。
¥Want to know more about installing Storybook? Check out the installation guide.
主要概念
¥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.