base、publicPath
第一个要注意的就是，.dumirc.ts配置中，我们要把 base 和 publicPath 改成你的仓库名称的路径。
例如：
// .dumirc.ts
import { defineConfig } from 'dumi';
export default defineConfig({
outputPath: 'docs-dist',
base: '/react-svg-charts/',
publicPath: '/react-svg-charts/',
});
这是因为到时部署到 github，网站路径上会加上你的仓库名。例如 zeng-j.github.io/react-svg-charts。
base 和 publicPath 的作用很多脚手架中都很类似，我下面啰嗦下。
base的作用
上面在 docs 文件夹，我们写了index.md和guide.md。那么会生成对应的路由/和/guide，如果部署到 github 可能会路由跳转错误，例如 zeng-j.github.io/guide 是错误的，而是 zeng-j.github.io/react-svg-charts/guide，所以我们必须给路由补上前缀 react-svg-charts 。
publicPath的作用
打包好后的静态资源路径都是基于根目录的，例如打包的index.html如下。
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" href="/favicon.png">
<link rel="stylesheet" href="/umi.6cab289a.css">
</head>
<body>
<div id="root"></div>
<script src="/umi.8d0b465c.js"></script>
</body></html>
这样会zeng-j.github.io/umi.8d0b465c.js这样请求资源导致失败，而这样才是正确的zeng-j.github.io/react-svg-charts/umi.8d0b465c.js。即index.html如下
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" href="/react-svg-charts/favicon.png">
<link rel="stylesheet" href="/react-svg-charts/umi.6cab289a.css">
</head>
<body>
<div id="root"></div>
<script src="/react-svg-charts/umi.8d0b465c.js"></script>
</body></html>
自动生成API
前提：确保 dumi 能够通过 TypeScript 类型定义 + 注解推导出 API 的内容 dumi 背后的类型解析工具是 react-docgen-typescript，更多类型和注解的用法可参考 它的文档
安装
npm install --save-dev react-docgen-typescript
配置
项目根目录创建配置文件styleguide.config.js
module.exports = {
propsParser: require('react-docgen-typescript').withDefaultConfig([parserOptions]).parse,
};
修改组件代码
components/button/index.tsx 加注释如下：
interface IABSButtonProps {
/**设置按钮载入状态 */
loading?: boolean;
/**
* 设置危险按钮
* @default false
*/
danger?: boolean;
className?: string;
/**按钮类型 */
type?: ButtonType;
style?: React.CSSProperties;
/**设置按钮的图标组件 */
icon?: React.ReactNode;
children?: React.ReactNode;
/**
* 按钮失效状态
* @default false
*/
disabled?: boolean;
block?: boolean;
large?: boolean;
htmlType?: ButtonHTMLType;
/**按钮颜色 */
color?: 'blue' | 'red' | 'yellow' | 'green' | 'white';
onClick?: React.MouseEventHandler<HTMLButtonElement>;
}
components/button/index.md 在你想要显示API的页面位置引用API标签：
<API></API>
效果展示
基于以上代码，自动生成如下API表格：
安装主题
pnpm i dumi-theme-vite -D
安装后，重新启动一下项目，访问页面
可以到这里查看，选择一个自己喜欢的主题。d.umijs.org/theme/marke…
抄袭来源：
本文仅作学习记录用途，抄袭截取自以下链接，侵删： juejin.cn/post/705736… juejin.cn/post/726074… juejin.cn/post/730637…
