这是我参与 [第五届青训营] 伴学笔记创作活动的第13天
组件库项目选定dumi作为工具，因此学习dumi的用法
dumi介绍
传统前端开发模式将一个系统作为整块应用，随着业务拓展或更新，系统复杂度提升，一个小改动常引起整体逻辑的修改，导致代码可维护性低
React可以将系统不同的板块分为一个个组件，将系统变为各个组件的拼接。同时组件化开发可以实现组件复用，降低了功能的重复编写，提高了开发效率。将功能分为各个组件也能以组件为单位提高代码可维护性
基于组件化开发的思想编写组件库，使用组件库，可以进一步减少重复代码的编写
目前组件库编写工具常见的有docz、storybook等，而dumi虽然只支持React，但是轻量级，上手快，开箱即用。引入模块就在代码中，且自动生成api。
实操
生成项目
npx create-dumi
在src目录下创建组件文件夹
//index.tsx
import React, { FC } from 'react';
type props = { content?: string; color?: string };
//创建函数组件
const Button: FC<props> = ({ content, color }) => {
return <button style={{ color: color }}>{content}</button>;
};
//导出组件
export default Button;
从【项目】导入组件，然后导出组件——这样操作后就能在文档中看到示例
//index.md
# Button
This is an example component.
```tsx
import { Button } from 'test_1';
export default () => <Button content="hello" color="red" />;
```
在src下的index.ts中导出组件
//src/index.ts 即组件库入口文件
export { default as Button } from './Button';
/*在该文件导出组件后相当于让dumi项目拥有了该组件
也就是这个test_1项目有了组件Button */
提供组件API
只需在组件的md文件中加上 <API><API/>即可
填写API信息
在 Button/index.tsx 中导出interface即可在API中填写说明信息
export interface props {
/**
* 可以这样写属性描述
* @description 也可以显式加上描述名
* @description.zh-CN 还支持不同的 locale 后缀来实现多语言描述，使用 description 兜底
* @default 支持定义默认值
*/
content: string;
color: string;
}
总结
dumi是专为React框架设计的组件库文档设计工具，文档编写就在代码开发中，自定义的语法和规则较少，能够做到开箱即用，简化了组件库文档的开发——只需要注意dumi项目结构和路由即可
