[dumi]使用dumi搭建组件库文档

2024-08-28 本文已影响0人是苏菇凉呀

背景：

实现一个组件库文档，功能包含组件搜索、组件分类列表、组件的代码演示、组件的UI渲染、在线编辑组件等功能，类似Ant Design组件库官网。

技术调研：

首先想到的是使用StoryBook，但他默认的页面样式跟Ant Design风格差异很大，并且不支持在线编辑组件，考虑到这两点后便放弃StoryBook，找了很多资源都没有找到合适的技术方案，后来心想既然Ant Design已经实现了我所要的功能那直接看他是如何实现的不就好了么！然后我将Ant Design的源码 https://github.com/ant-design/ant-design 下载下来开始分析，发现他的启动命令为

"start": "tsx ./scripts/set-node-options.ts cross-env PORT=8001 dumi dev"

调用了dumi dev，于是我去搜索了 dumi，官网 https://d.umijs.org/ 介绍：为组件研发而生的静态站点框架，所以Ant Design官网是使用 dumi 搭建的，再继续阅读文档，发现在线编辑组件的功能是由他提供的，如图：

代码块
所以我用dumi搭建组件库文档

组件库文档搭建：

1. 创建空目录

mkdir myapp && cd myapp

2. 通过官方工具创建项目，选择 React Library 模板

npx create-dumi

Static Site 用于构建网站
React Library 用于构建组件库，有组件例子
Theme Package 主题包开发脚手架，用于开发主题包

3. 安装依赖后启动项目

$ npm start

启动项目后的首页

首页

组件预览页

组件预览

4. 修改默认主题UI

根据修改主题文档 https://d.umijs.org/theme，在.dumi文件夹下创建theme文件夹，具体目录结构如下

目录结构
DocLayout中就可以重新布局当前文档的页面结构以及样式修改，我的DocLayout代码

import { Flex, Layout } from 'antd';
import { useOutlet, useRouteMeta, useTabMeta } from 'dumi';
import React from 'react';
import DocAnchor from '../../slots/DocAnchor';
import LibHeader from '../../slots/Header';
import PrevAndNext from '../../slots/PrevAndNext';
import SidebarLayout from '../SidebarLayout';
import styles from './index.module.scss';

const DocLayout: React.FC = () => {
  const outlet = useOutlet();
  const meta = useRouteMeta();
  const tab = useTabMeta();

  const { pathname, search } = location;
  const isHome = ['', 'index', '/'].includes(pathname);
  const { Header, Footer, Sider, Content } = Layout;

  return (
    <Flex gap="middle" wrap style={{ height: '100vh' }}>
      <Layout style={{ background: '#fff' }}>
        <Header className={styles['layout_header']}>
          <LibHeader></LibHeader>
        </Header>
        <Layout className={isHome ? styles['home'] : styles['components']}>
          {isHome && (
            <Content className={styles['layout_content']}>{outlet}</Content>
          )}
          {!isHome && (
            <>
              <Sider width="17%" className={styles['layout_sider']}>
                <SidebarLayout></SidebarLayout>
              </Sider>
              <Layout style={{ marginInlineStart: '18%' }}>
                <Content className={styles['layout_content']}>
                  <section>
                    <Content className={styles['component_content']}>
                      {outlet}
                    </Content>
                    <DocAnchor></DocAnchor>
                  </section>
                  <PrevAndNext></PrevAndNext>
                </Content>
              </Layout>
            </>
          )}
        </Layout>
        <Footer style={{ textAlign: 'center' }}>
          Made with ❤ by SuYuan
        </Footer>
      </Layout>
    </Flex>
  );
};

export default DocLayout;

修改主题样式后的首页

首页