文章目录
- 什么是 Storybook？
- 使用场景举例
- 快速上手教程（React 为例）
- 1. 安装 Storybook
- 2. 创建一个 Story（组件故事）
- 3. 启动 Storybook
- 常用功能
- 常见生态扩展
- 示例：用 Args 和 Controls 动态控制 Props
- 推荐资料
什么是 Storybook？
Storybook 是一个用于构建独立组件 UI 的开发环境工具，适合 React、Vue、Angular 等现代前端框架。它允许你在不依赖项目业务的情况下，独立开发、测试和文档化 UI 组件。
官方文档：https://storybook.js.org/
使用场景举例
- 创建和预览组件库（如按钮、表单等）
- 查看组件的不同状态（如加载、禁用、成功）
- 为设计师、QA 或产品经理提供组件预览
- 写交互测试、可视化调试 UI 状态
快速上手教程（React 为例）
1. 安装 Storybook
在你的 React 项目中运行：
npx storybook@latest init
它会自动识别框架，安装依赖，并创建 .storybook 配置目录和示例 stories。
2. 创建一个 Story（组件故事）
假设你有一个 Button.tsx 组件，可以这样写 story：
// src/components/Button.tsx
import React from 'react';export const Button = ({ children, type = 'default', ...rest }) => (<button className={`btn btn-${type}`} {...rest}>{children}</button>
);
// src/components/Button.stories.tsx
import { Button } from './Button';export default {title: 'Components/Button',component: Button,
};export const Default = () => <Button>Default</Button>;
export const Primary = () => <Button type="primary">Primary</Button>;
export const Disabled = () => <Button disabled>Disabled</Button>;
3. 启动 Storybook
npm run storybook
默认会在 http://localhost:6006 启动一个独立页面，展示你定义的所有组件。
常用功能
| 功能 | 说明 |
|---|---|
args | 控制组件的属性（Props） |
controls | 自动生成 UI 控件修改 props |
docs | 自动生成组件文档 |
actions | 捕捉事件（onClick 等） |
storybook/addon-interactions | 编写交互测试 |
mdx 支持 | 写 Markdown + JSX 格式文档 |
常见生态扩展
@storybook/addon-essentials（推荐插件集合）@storybook/addon-a11y（无障碍辅助）storybook-addon-designs（Figma/Zeplin 设计稿预览）storybook-addon-themes（多主题切换）
示例：用 Args 和 Controls 动态控制 Props
export const Playground = (args) => <Button {...args} />;
Playground.args = {children: 'Click me',type: 'primary',disabled: false,
};
这会生成 UI 控件让你在页面中动态调整按钮的 props。
推荐资料
- 官网：https://storybook.js.org/
- 官方文档：https://storybook.js.org/docs/react/get-started/introduction
- UI 测试集成（如 Playwright / Testing Library）：官方有丰富支持
