其他
组件库的文档是用什么写的？
AntDesign这样的UI组件库，除了自身功能完善，良好的文档支持，也是开发者乐于使用的一大原因。
真实组件的渲染，可交互，最好能直接复制代码 支持markdown 列出组件的所有属性（API），包括类型、说明、默认值等
dumi bisheng storybook[1] gitbook vuepress docsify
dumi和AntDesign是React开发，以及蚂蚁的背景，这次我们拿dumi来一探究竟，看能否实现我们想要的东西。0、一些你可能需要的前置知识（别点，用到时可以回来看🤣）
dumi官网[2] AntDesign组件文档[3]
1、初始化
dumi工程叫my-dumi-docyarn create @umijs/dumi-lib --site
yarn
这里需要注意，node 版本必须是 10.13以上。无法成功安装的小伙伴，记得切换 node 版本。
src 目录下，一个组件一个目录，默认的例子生成了md 文档（index.md） 组件源码（index.tsx） 测试文件（index.test.tsx）
jsx 和 tsx 的代码块将会被 dumi 解析为 React 组件。这正好帮我们做到了第一个点：真实组件的渲染。👍2、目录结构和路由
src下写多两个组件，看下浏览器里的文档会变成什么样。MyButton/index.md、MyModa/index.md，## MyButton
## MyModal
FrontMAtter 语法，做如下调整：---
nav:
title: Components
path: /components
group:
title: MyButton
---
## MyButton
---
nav:
title: Components
path: /components
group:
title: MyModal
---
## MyModal
上面有提到 FrontMAtter语法，文档在这：d.umijs.org/zh-CN/confi…[4]
MyButton、MyModel两个组件的源码，试着在 md 文档里引入试试。3、组件完善
Antd，分别继承它提供的Button、Modal组件，快速完善源代码。AntdMyButton/index.tsx，内容如下：import { Button, ButtonProps } from 'antd';
import 'antd/dist/antd.css';
export interface MyButtonProps extends ButtonProps {
isMy?: boolean;
}
const MyButton: React.FC<MyButtonProps> = (props) => {
const { children, ...restProps } = props;
return (
<Button {...restProps}>{children}</Button>
);
}
export default MyButton;
Button 组件做个简单的包装，多加了一个 isMy 属性。/src/MyButton/index.md里引入并使用它。哎呀，上面直接贴图了，代码块套代码块好像显示有问题。文末有仓库地址，记得去看。🤡
/src/index.ts 里引入，不然会有报错😅。/src/index.ts 是组件的入口文件。Antd 自带的 Button 组件，已经渲染在页面上，也能正常交互。MyModal。MyModal/index.tsx，内容如下：import { Modal, ModalProps } from 'antd';
import 'antd/dist/antd.css';
export interface MyModalProps extends ModalProps {
isMy?: boolean;
}
const MyModal: React.FC<MyModalProps> = (props) => {
const { children, ...restProps } = props;
return (
<Modal {...restProps}>{children}</Modal>
);
}
export default MyModal;
/src/MyModal/index.md 里引入并使用它Modal 应该也能被渲染出来了。API的书写。4、API的生成
md 了，一点点用表格语法手动写，也能达到最终的效果。|------|-------------|---------|---------|
| isMy | 自定义属性 | boolean | - |
| ... | ... | ... | ... |
dumi 能自己推导出 API 的内容。参考文档：d.umijs.org/zh-CN/guide…[5]
md 文件末尾，追加上 dumi 内置的组件 API ，用来渲染API表格。isMy 属性dumi 在文档书写上的便利，还请小伙伴多多尝试呀。参考资料
storybook: https://storybook.js.org/
[2]dumi官网: https://d.umijs.org/
[3]AntDesign组件文档: https://ant-design.gitee.io/components/overview-cn/
[4]d.umijs.org/zh-CN/confi…: https://d.umijs.org/zh-CN/config/frontmatter
[5]d.umijs.org/zh-CN/guide…: https://d.umijs.org/zh-CN/guide/advanced#组件-api-自动生成
[6]my-dumi-doc: https://github.com/chokingwin/my-dumi-doc
作者：这个需要威少看下
https://juejin.cn/post/7070156525842464781
- EOF -
觉得本文对你有帮助？请分享给更多人
关注「大前端技术之路」加星标，提升前端技能
点赞和在看就是最大的支持❤️