返回教程

Storybook 简介

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

概述

Storybook 入门课程将通过 Storybook,教授久经考验的组件开发模式。您将在 React、Vue 或 Angular 中从零开始构建 UI,并学习必要的 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
    可访问性测试
    学习如何在工作流程中集成可访问性测试
  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 工程师
加入社区
7,424开发者及更多
原因为什么选择 Storybook组件驱动的 UI
文档指南教程更新日志遥测
社区插件参与进来博客
展示探索关于
开源软件
Storybook - Storybook 中文

特别感谢 Netlify CircleCI