dumi搭建文档并部署至gitee Pages

工具

编程

发布日期: 2022-08-25

更新日期: 2022-08-25

文章字数: 840

阅读时长: 3 分

这次自己来试试搭个玩玩。官网文档挺仔细的了，我们这就速度过一遍。

什么是 dumi？

dumi，中文发音嘟米，是一款为组件开发场景而生的文档工具，与 father 一起为开发者提供一站式的组件开发体验，father 负责构建，而 dumi 负责组件开发及组件文档生成。

特性

📦 开箱即用，将注意力集中在组件开发和文档编写上
📋 丰富的 Markdown 扩展，不止于渲染组件 demo
🏷 基于 TypeScript 类型定义，自动生成组件 API
🎨 主题轻松自定义，还可创建自己的 Markdown 组件
📱 支持移动端组件库研发，内置移动端高清渲染方案
📡 一行命令将组件资产数据化，与下游生产力工具串联

环境准备

node版本要求是10.13 或以上

脚手架的选择

有2种，一种是组件开发脚手架另一种是静态站点脚手架

组件开发脚手架

组件开发脚手架又分文档模式和站点模式

文档模式如下

站点模式如下

我们选择站点模式

1
2
3

npx @umijs/create-dumi-lib --site
or
yarn create @umijs/dumi-lib --site

1 2	npm install npm start

运行项目

进入.umirc.ts文件改一些配置，具体配置官网也很详细

export default defineConfig({
  mode: 'site',
  title: 'Pear的组件库',
  favicon: './images/logo.png',
  logo: './images/logo.png',
  publicPath: "./",
  history: {
    type: "hash"
  },
  // outPath: 'docs-dist',
  // more config: https://d.umijs.org/config
});

还有docs => index.md可以更改主页相关信息以及配置。

准备开发

先来看下目录结构

直接开始吧,随便写2个组件

dumi采用的是约定式路由，所以大多数情况下，我们不需要配置路由。

创建components文件夹放组件 => PText => index.tsx和index.md

需要在src => index.ts导出组件

1	export { default as PText } from './components/PText';

index.tsx

import React, { useState, useEffect, useMemo, ReactNode } from 'react';
import "./index.less";

interface IProps {
  fs?: string | number; // font-size
  color?: string;
  className?: string;
  children?: ReactNode
}

export const PText: React.FC<IProps> = (props) => {
  const { fs, color, className, children } = props;

  return useMemo(() => {
    return (
      <span style={{ fontSize: fs, color }} className={className}>{props.children}</span>
    )
  }, [])
}

export default PText;

PText.defaultProps = {
  fs: 16,
}

index.md

关于md导航

---
title: 自定义页面名称
nav:
  path: /自定义导航路由
  title: 自定义导航名称
  order: 控制导航顺序，数字越小越靠前，默认以路径长度和字典序排序
group:
  path: /自定义分组路由，注意，分组路由 = 导航路由 + 自己
  title: 自定义分组名称
  order: 控制分组顺序，数字越小越靠前，默认以路径长度和字典序排序
---

<!-- 其他 Markdown 内容 -->