返回教程

Storybook 简介

Storybook 是最流行的 React、Vue 和 Angular UI 组件开发工具。它可以帮助您在隔离的环境中,在您的应用之外开发和设计 UI 组件。学习 Storybook 以创建万无一失的 UI 组件,在此过程中,您将从头开始构建一个应用 UI。
语言EnglishEspañol日本語PortuguêsالعربيةDeutschFrançaisItaliano한국어Nederlands简体中文正體中文
42+
贡献者
10
章节
Intro to Storybook

概览

Storybook 简介教程教授使用 Storybook 进行组件开发的成熟模式。您将逐步学习基本的 UI 组件技术,同时在 React、Vue 或 Angular 中从头开始构建 UI。这里的信息来源于专业团队、核心维护者和优秀的 Storybook 社区。Airbnb、Dropbox 和 Lonely Planet 的专业开发人员使用 Storybook 更快地构建持久的、有文档记录的 UI。

目录
  1. 1
    开始
    在您的开发环境中设置 Storybook
  2. 2
    简单组件
    隔离构建简单组件
  3. 3
    复合组件
    将简单的组件组装成复合组件
  4. 4
    数据
    学习如何将数据连接到您的 UI 组件
  5. 5
    屏幕
    用组件构建屏幕
  6. 6
    部署
    学习如何在线部署 Storybook
  7. 7
    可视化测试
    学习测试 UI 组件的方法
  8. 8
    插件
    学习如何集成和使用流行的 Controls 插件
  9. 9
    结论
    将您所有的知识结合起来,学习更多 Storybook 技术
  10. 10
    贡献
    帮助向世界分享 Storybook

您将构建什么

React
React Native
Vue
Angular
Svelte

Taskbox UI

Taskbox,一个任务管理 UI(类似于 Asana),包含多种项目类型和状态。我们将从构建简单的 UI 组件到组装屏幕。每个章节都说明了使用 Storybook 开发 UI 的不同方面。

📖 每个章节都链接到一个可工作的提交,以帮助您保持同步。

作者
loading
Tom Coleman
Storybook 核心团队
loading
Dominic Nguyen
Storybook 设计
审阅者
loading
João Cardoso
工程师
loading
Carlos Vega
工程师
loading
Carlos Iván Suarez
工程师
loading
Kyle Holmberg
Air 公司工程师
loading
Daniel Duan
Squarespace 公司工程师
加入社区
6,721位开发者及更多
为什么为什么选择 Storybook组件驱动的 UI
开源软件
Storybook - Storybook 中文

特别感谢 Netlify CircleCI