使用dumi2开React组件库

1、新建项目 f-react-ui

cd f-react-ui
npx create-dumi

2、选择对应的模板，初始化项目

3、项目初始化完成后，npm start

4、新增button组件
src目录下新建Button文件夹。
Button文件夹中新建组件相关文件
index.tsx

import React, { FC } from 'react';const Button: FC<{ text: string }> = (props) => {return <button type="button">{props.text}</button>;
};export default Button;

index.md

# Buttonbutton component.```jsx
import { Button } from 'f-react-ui';export default () => <Button text="按钮" />;

5、src/index.tsx中导出新增的button组件

export { default as Button } from './Button';
export { default as Foo } from './Foo';

6、自定义导航栏及分组

---
title: Button
order: 1
nav:title: 组件order: 1path: /components
group:title: componentsorder: 1path: /components
---

7、在组件示例中引入组件
Button文件夹中新建demos文件夹
demos/index.tsx

import React from 'react';
import { Button } from 'f-react-ui';function ButtonDemo() {return <Button text="提交"/>;
}export default ButtonDemo;

Button/index.md中使用

<code src="./demos/index.tsx"></code>