这是我参与8月更文挑战的第15天，活动详情查看：8月更文挑战

什么是 dumi

dumi是一个基于 Umi、为组件开发场景而生的文档工具

特点

开箱即用：考究的默认配置和约定式的目录结构，帮助开发者零成本上手，让所有注意力都能放在文档编写和组件开发上
主题系统：渐进式的自定义主题能力，小到扩展自己的 Markdown 标签，大到自定义完整主题包，全由你定
为组件开发而生：独特的 Markdown 扩展，可嵌入 Demo、可导入外部 Demo 甚至插入自定义 React 组件，使得组件的文档不仅能看，还好用

环境准备

首先确保 node 版本是10.13或以上

$node -v
v12.18.3

初始化脚手架

初始化脚手架方式有两种：

组件开发脚手架
静态站点脚手架

今天我们使用组件开发脚手架，另一种方式可以自己去查看文档

# 组件开发脚手架

# 初始化一个文档模式的组件开发脚手架（实现这个）
$ npx @umijs/create-dumi-lib
# or
$ yarn create @umijs/dumi-lib

# 初始化一个站点模式的组件开发脚手架
$ npx @umijs/create-dumi-lib --site
# or
$ yarn create @umijs/dumi-lib --site

如果安装速度慢的，可以切换到 cnpm 或者 tyarn，具体操作步骤如下：

# npm 切换 cnpm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
# 查看版本号
$ cnpm -v

# yarn 切换 tyarn
$ cnpm install -g yarn tyarn

执行

初始化后执行 npm install 或 yarn 安装依赖

安装好后再执行 npm run start 或 yarn start

构建&部署

执行 npm run docs:build 或 yarn docs:build 做构建

文档配置

目录结构

• docs # 组件库文档目录

index.md # 组件库文档首页 • src # 组件库源码目录
Foo # 单个组件 • .umirc.ts # dumi 配置文件

.umirc.ts 配置

	类型	默认值	详细	预览
title	`String`	{package.name}	配置文档的名称
logo	`String`	Umi 的 Logo	配置文档的 Logo
description	`String`	`null`	配置文档的介绍，显示在菜单标题下方，仅`doc`可用
mode	`doc	site`	`doc`	设定文档的展现模式
locales	`Array<[String, String]>`	`[['en-US', 'English'], ['zh-CN', '中文']]`	设定文档显示语言
outputPath	`String`	`docs-dist`	指定输出路径

FrontMatter 配置

	类型	默认值	详细	预览
title	`String`	正文第一个标题	配置该页面的标题
sidemenu	`Boolean`	`true`	控制侧边栏菜单的显示或隐藏
toc	`false	'content'	'menu'`	`'content'`	控制锚点目录的显示或位置
order	`Number`	`null`	控制该文档的显示顺序，数值越小排序越靠前
group	`Object`	`null`	对当前页面进行分组
group:title	`String`		分组名
group:path	`String`		分组路由
group:order	`Number`	`null`	分组的显示顺序