结论先行：

	dumi	storyBook
团队投入	2021年9月8日发布。目前已经迭代10个版本，最后一个版本时间：2022-3-20	2019年3月第一次发布，目前9个版本，最后一版本：2021.12
定位	为组件开发场景而生的文档工具
在开发模式下与应用程序一起运行	是	是
是否支持markdown	是	否
是否支持移动端ui	是	否
是否支持demo 展示	是	是
是否支持demo参数在线修改	借用sandbox 实现	直接使用control 实现更简单直观
支持前端框架	react	react/vue
是否开箱即用	是	是

一：dumi：

团队投入： 2021年9月8日发布。目前已经迭代10个版本，最后一个版本时间：2022-3-20

定位：为组件开发场景而生的文档工具

生产商：阿里

谁在使用：ahooks、Pro Components、alitajs、antd-cpi、Dooringx、Formily、GGEditor、Graphin、issues-helper、LightProxy 等

优势：

开箱即用，快速上手一条命令初始化一个站点模式的组件库开发脚手架：npx @umijs/create-dumi-lib --site
1. 一个文档模式的组件库开发脚手架
2. 一个站点模式的组件库开发脚手架
支持markdown 文档并按照文件夹结构生成目录
1. 文档 index.md 可以和组件在同一文件夹下，无需另起一个docs 项目单独运行
2. 文档默认按照文件夹的路径生成文档目录：例如组件库二级目录：通用、布局、导航、数据录入。我们项目可以直接按照这个分类划分就可生成，当然还支持自定义修改md 文档即可。
支持在线demo 演示
1. 本地文档直接引用 import { DatePicker } from 'antd' ，无需组件库发版，无需使用相对路径 import { DatePicker } from '../components/antd/datePicker'
2. 提供codeSandbox 支持在线代码编辑
3. 在线demo 演示和使用介绍
4. 可以编写多个例子，用于不同参数的组件效果展示
主题：丰富的主题包（直接使用），还可以自定义进行扩展
API 自动生成：可基于 TypeScript 类型定义自动生成组件 API，组件永远『表里如一』
移动端组件库研发：安装主题包即可快速启用移动端组件研发能力，内置移动端高清渲染方案
更直观的代码展示，可以直接复制例子到业务代码中直接运行
资产数据化能力：一行命令将组件资产数据化，标准化的资产数据可与下游生产力工具串联

不足：

站点方式的脚手架目前只支持了react，并没有支持vue框架，如果vue 估计也可以支持自己安装这个需要自己研究一下

二：storybook

团队投入：2019年3月第一次发布，目前9个版本，最后一版本：2021.12

定位：是一个专门为前端（支持 Vue 和 React ）编写的组件文档框架，响应式UI 开发可视化测试用例

生产商：Storybook is maintained by hundreds of contributors worldwide and guided by a steering committee.

谁在使用：github star 70591

使用方式：必须在一个已有的运行环境中安装例如需先安装 Create React App / Vue CLI

npx create-react-app taskbox

cd taskbox

npx -p @storybook/cli sb init

yarn storybook

优势：

支持在线demo 演示
1. demo在线预览,
2. 在线修改组件参数查看不同参数下组件的表现
3. 能够在文档中直接引用自己编写的组件
文档title 声明了这整个 stories 的页面在侧边栏的名字，以"/"分隔会被渲染成一级 / 二级目录
参数表格里的control 部分更生动，例如下图color 是一个颜色选择器，以此来提供更方便的交互体验。
支持figma ui设计工具

不足：

Storybook 官方推荐的一种基于 ES module 的 stories 编写方法，由一个 export default 和一个或多个 export 组成。相当于 Storybook 提供了一些封装过后的组件供你使用，让你能够较为快速的生成 stories。写法不够灵活，export default 的部分是固定需要的，目录的结构对应的component ，argType 都需要写可如果你在展示组件之余，还想要编写一个额外的文档，比如介绍一下组件封装的背景，用到的技术等，CSF 就不是那么好用了
并没有支持移动端的渲染
不支持markdown，使用 MDX 编写组件文档，缺点就是给出的例子书写方式跟业务调用方式不一致，而且例子的展示必须要用标签包裹，真正渲染组件的部分则是 story 里面的 {Template.bind({})}。

`<!--- Checkbox.stories.mdx -->`

 

`import { Meta, Story, Canvas } from ``'@storybook/addon-docs/blocks'``;`

`import { Checkbox } from ``'./Checkbox'``;`

 

`<Meta title=``"MDX/Checkbox"` `component={Checkbox} />`

 

`# Checkbox`

 

``With `MDX` we can define a story ```for` `` `Checkbox` right  ```in` `the middle of our`

`Markdown documentation.`

 

`<!--- This is your Story template ``function``, shown here ``in` `React -->`

 

`export const Template = (args) => <Checkbox {...args} />`

`<Canvas>`

`  ``<Story name=``"Unchecked"` `args={{`

`      ``label: ``'Unchecked'`

`    ``}}>`

`    ``{Template.bind({})}`

`   ``</Story>`

`  ``<Story name=``"Checked"` `args={{`

`      ``label: ``'Unchecked'``,`

`      ``checked: ``true`

`    ``}}>`

`    ``{Template.bind({})}`

`   ``</Story>`

`  ``<Story name=``"Secondary"` `args={{`

`    ``label: ``'Secondary'``,`

`    ``checked: ``true``,`

`    ``appearance: ``'secondary'`

`  ``}}>`

`    ``{Template.bind({})}`

`   ``</Story>`

`</Canvas>`

在线文档dumi和storybook对比

结论先行：

一：dumi：

二：storybook