Storybook 速查
共 23 条 Storybook 常用写法，涵盖安装与运行、写故事、装饰器与参数、测试与插件、文档与发布。 支持搜索与分类筛选，点击即可复制。
安装与运行
组件工作台与文档站。
| 命令 | 说明 |
|---|---|
| 在现有项目初始化 | |
| 启动本地工作台（默认 6006） | |
| 构建静态站点 | |
| 升级 Storybook | |
| 主配置与全局预览配置 |
写故事（CSF）
Component Story Format 3。
| 命令 | 说明 |
|---|---|
| 默认导出的元信息 | |
| 一个故事与默认参数 | |
| 默认参数与控件定义 | |
| 交互控件 | |
| 交互测试（play 函数） |
装饰器与参数
包裹与全局配置。
| 命令 | 说明 |
|---|---|
| 局部装饰器 | |
| 全局装饰器 | |
| 布局参数 | |
| 全局变量 |
测试与插件
交互、可访问与视觉。
| 命令 | 说明 |
|---|---|
| 交互测试面板 | |
| 可访问性检查 | |
| 多视口预览 | |
| 自动化测试 | |
| 视觉快照 |
文档与发布
自动文档。
| 命令 | 说明 |
|---|---|
| 自动文档 | |
| MDX 文档 | |
| 发布 | |
| 流水线 |
使用说明
Storybook 组件开发与文档速查：安装与运行、写故事、装饰器与参数、测试与插件、文档与发布；支持搜索与分类筛选，点击即可复制。
- 按用途点分类：安装与运行、写故事、装饰器与参数、测试与插件、文档与发布。
- 点「写法」列复制，替换组件名与 args 后使用。
- 优先用 CSF3：默认导出 meta，具名导出故事，args 控制 props。
- 需要主题或路由时用 decorators 包裹，用 play 函数写交互测试。
常见问题
- CSF3 和旧版故事写法有什么区别？
- CSF3 用 StoryObj 类型与 args 传参，写法更简洁，且支持自动推断 props；旧版用 Template.bind({}) 更繁琐。
- 怎么让多个故事共享配置？
- 把公共 args/argTypes/decorators 放在默认导出的 meta 上，单个故事再覆盖；全局配置放 preview.ts。
- Storybook 能跑测试吗？
- 可以：用 play 函数写交互断言，配合 addon-interactions 与 test-runner 在 CI 中回归；也有 a11y、视觉回归插件。