dumi搭建组件库文档站模板|青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 1天 我们组选择的是第二个项目，除了需要编写属于自己的组件库，还需要在完成组件库后再编写组件库文档站，由于我们组选择使用react编写我们的项目。对比了几个主流的文档库搭建网站后，我选择了先研究一下dumi搭建文档站的模板，方便后续工作。

dumi 是一款为组件开发场景而生的文档工具。其具有开箱即用，将注意力集中在组件开发和文档编写上、基于 TypeScript 类型定义，自动生成组件 API、移动端组件库编写及多语言支持。由于 dumi 基于 umi ，umi 内置的插件只支持 react，所以 dumi 也只能为 React 组件生产文档站。

安装yarn

npm install -g yarn

设置yarn镜像源

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

创建项目模板，--site表示网站站点，默认为静态站点

yarn create @umijs/dumi-lib --site

安装依赖

yarn 

启动

yarn start

然后在浏览器打开链接 http://localhost:8000/ 可以看见网站模板已经建好啦,我们的项目名称暂时是any_ui

我尝试使用这个网站来建立ant-design的文档库，首先在src目录下新建一个Button文件夹，里面再新建两个文件index.txs和index的md

index.tsx里面的内容如下

import React, { ReactNode } from 'react';
import { Button as AnyButton} from 'antd';

const Button = ({children,size,type}:{
   children:ReactNode,size:'small'|'middle'|'large'|undefined,
   type:"link" | "text" | "ghost" | "default" | "primary" | "dashed" | undefined
})=>{
    return <AnyButton type={type} >{children}</AnyButton>
}
 export default Button

index.md里面的内容如下

---
nav:
  title: Components
  path: /components
---
## Button

Demo:

```tsx
import React from 'react';
import { Button } from 'any_ui';
const Index = ()=>{
  return <Button type={'primary'}size={'small'}>按钮</Button>
}
 export default Index;