搭建组件库一定要选择ReactLibrary，否则在md文件写组件demo文档是没办法生效的。ReactLibrary意味着你想开发一个以React为基础的库，dumi对md文档输出进行特殊的处理。
初始化完之后的目录结构如下：
yarn之后，yarnstart，访问localhost:8080页面
初始首页如下图：
我们需要将首页改成如下图所示的样子：
我们不需要头部的Guide和foo导航，分成两步：
分成两步
import{defineConfig}from'dumi';exportdefaultdefineConfig({//...theme:{'@c-primary':'#b62021','primary-color':'#b62021',},});配置完主题色如下图：
修改标题颜色步骤如下：
修改后如下图所示：
由于默认主题的左侧导航偏小不够放组件名，我想要改变dumi的默认主题的左侧边栏。
步骤如下：
其他位置同理可以调整。
如下图所示我们将在index.tsx编写组件，编写完第一个组件，开始编写第一个组件文档。
注意：文件顶部是导航配置
接着将组件入到index.md中，有两种方式：
如上图中的代码：
如果是基于antd组件库开发的，在写第一个组件后引入到index.md，第一步你可能会遇到一个问题，antd组件库的样式丢失，如下图：
经过查阅antd组件库文档以及网上的资料发现，有两种方式解决：
@import'~antd/dist/antd.css';extraBabelPlugins:[['babel-plugin-import',{libraryName:'antd',libraryDirectory:'es',style:true,},],],组件库发布到npm开发完组件库后接着就是要把组件库发布到npm上，我们遵循semver语义化版本规范,也就是1(主版本号).0(次版本号).0(修订版本号)这样的模式。有破坏性的更新动第一位，有新功能动第二位，改bug动第三位。大部分的开源项目都遵循这个规范，所以我们后续不要随心所欲改动版本号。
接下来就将组件进行发布到npm上，你可能会在发布后会遇到如下问题：
遇到这个问题需要先确认文档中样式是否生效，而文档样式引入通常有3种可能：
实际上，这些样式引入方案均只对文档构建生效，也就是说它们都是依托于dumi框架提供的能力，而组件库发布为NPM包以后，组件库的编译将由实际使用组件库的项目负责。
因此，我们需要根据项目使用的开发框架做等价配置，才能确保样式生效，此处以Umi项目为例，上述3种方案的等价配置方式如下：
最佳解决方案:在.fatherrc.ts中添加配置
extraBabelPlugins:[['babel-plugin-import',{libraryName:'antd',libraryDirectory:'es',style:true,},],],部署文档文档部署在哪里是一个问题，对于大部分的人来说，可能没有精力去维护一个静态服务器，所以我们的目标是将文档部署到githubPages，属于非根目录部署。
意思就是说，配置中要改成github上的项目名称如，tst-design，那么就要在.dumirc文件中的属性base和publicPath改成：
exportdefaultdefineConfig({base:'/tst-design',publicPath:'/tst-design/',})手动步骤注意手动部署文档时操作如下：
yarnaddgh-pages-D"scripts":{"deploy":"gh-pages-ddocs-dist"}运行完后你在看下github上会多出一个gh-pages分支。
部署成功后的文档地址位置如下图，找到项目点击Actions，成功会给你一个地址：
如果失败，记得看一下这里是不是配置对了：
只有这样才能访问文档页面。
当项目有多个贡献者时，一些贡献者不可避免会犯一些流程错误。比如提交代码时，没有尝试对项目进行生产模式的构建等等，我们需要在提交代码到git远程仓库时去做一些流程性的任务，也就是我们常说的ci/cd或者流水线。
所以我们将采用自动化部署也就是GitActions，让它帮执行单元测试和代码校验、github的同步、文档的部署。
具体操作如下：
创建.github/workflows/gh-pages.yml文件
gh-pages.yml模板如下：
name:githubpageson:push:branches:-main#defaultbranchjobs:deploy:runs-on:ubuntu-lateststeps:-uses:actions/checkout@v3-run:yarn#文档编译命令，如果是react模板需要修改为npmrundocs:build-run:yarndocs:build-name:Deployuses:peaceiris/actions-gh-pages@v3with:github_token:${{secrets.MY_TOKEN}}#文档目录，如果是react模板需要修改为docs-distpublish_dir:./docs-dist