文章目录Dumi 文档站是什么一、它解决什么问题二、核心能力1. Markdown 即文档2. Demo 即代码最核心能力3. Demo 可交互非常关键4. 自动生成 API 文档5. 主题 布局内置三、典型使用场景1. 组件库文档最常见2. 设计系统文档3. 内部组件平台四、和其他工具的区别对比 Storybook1. 不同维度2. 具体关注点对比 VitePress / Docsify五、基本使用流程1. 初始化2. 写组件3. 写文档4. 启动六、一个真实结构示例七、总结Dumi 文档站是什么Dumi 是一个专门为组件库设计的文档站生成工具主要服务于 React 生态由蚂蚁集团开源。可以把它理解为“为组件库量身定制的 Docs 平台文档 示例 交互演示”一、它解决什么问题如果在做组件库比如 Button、Form、Table一定会遇到文档和代码不同步示例难维护Demo 不可交互API 文档手写很累没有统一的展示规范Dumi 的目标是让“写组件文档”变成“写 Markdown 写 Demo”二、核心能力1. Markdown 即文档# Button 按钮 基础按钮组件直接写 Markdown 就能生成页面。2. Demo 即代码最核心能力import{Button}fromyour-lib;exportdefault()Button typeprimaryClick/Button;效果自动渲染 Demo自动高亮代码自动展示源码不用手写 demo 容器3. Demo 可交互非常关键支持 props 控制exportdefault(){returnButton typeprimaryClick/Button;};配合配置可以做到在线调参数实时预览类似 Storybook 的 Controls但更轻量。4. 自动生成 API 文档结合 TypeScriptinterfaceProps{type?:primary|default;disabled?:boolean;}Dumi 可以自动生成props 表格类型说明默认值不需要手写 API 表5. 主题 布局内置开箱即用左侧导航右侧目录代码块Demo 展示区三、典型使用场景1. 组件库文档最常见比如ButtonInputModal每个组件一页docs/ button.md input.md2. 设计系统文档颜色规范Token 说明交互规范3. 内部组件平台很多公司用它做业务组件库中台 UI 文档低代码组件展示四、和其他工具的区别对比 Storybook1. 不同维度StorybookDumiStorybook定位文档驱动Demo 驱动写法Markdown DemoJS 配置学习成本低中API 文档自动TS需要插件文档能力强一般两者不是替代关系而是“文档站 vs 组件工作台”的分工关系可以单用也可以组合用。核心定位差异最关键Dumi → 文档驱动Documentation-firstStorybook → 组件驱动Component-first / Playground换句话说Dumi给“使用者”看文档 示例Storybook给“开发者 / 设计师”用调试 组合 验证更直观的理解Dumi 官网文档像 Ant Design 官网Storybook 组件实验室像内部调试台2. 具体关注点Dumi 关注的是文档结构章节、目录使用说明API 自动生成TSDemo 展示嵌在文档中核心问题是“别人怎么用我的组件”Storybook 关注的是组件所有状态props 组合测试交互调试Controls可视化回归测试Chromatic 等核心问题是“这个组件在所有情况下是否正确”对比 VitePress / DocsifyVitePressDumiVitePressReact 支持强一般Demo原生支持需要插件组件文档专门优化通用文档Dumi 专用工具VitePress 通用文档工具五、基本使用流程1. 初始化npmcreate dumi2. 写组件export const Button () { return buttonClick/button; };3. 写文档# Button code src./demo/basic.tsx /4. 启动npmrun dev六、一个真实结构示例. ├── src/ │ ├── Button/ │ │ ├── index.tsx │ │ └── demo/ │ │ └── basic.tsx ├── docs/ │ └── index.md七、总结Dumi 是一个“为组件库而生的文档框架”让开发者用 Markdown Demo 就能搭建一个专业级组件文档站。