背景

团队初期搞了一套移动端组件库，但由于时间紧迫，效果缺乏代码展示复制功能，为了更好的代码展示，所以就打算使用dumi2 [来开发移动端组件库]。

涉及到的库

• dumi@2 组件开发及组件文档生成
• dumi-theme-mobile 移动端主题
• jest 用于自动化测试
• gulp 用于打包

搭建过程

环境准备

确保正确安装 Node.js 且版本为 14+ 即可。

$ node -v
v14.19.1

脚手架

先找个地方建个空目录。
$ mkdir myapp && cd myapp


# 通过官方工具创建项目，选择你需要的模板
$ npx create-dumi


# 选择第二个模板 
$ ? Pick template type › - Use arrow-keys. Return to submit.
$     Static Site # 用于构建网站
$  ❯  React Library # 用于构建组件库，有组件例子
$     Theme Package # 主题包开发脚手架，用于开发主题包


# 安装依赖后启动项目
$ npm start

启动起来的效果

切换到移动端组件研发模式

npm i dumi-theme-mobile@^2.0.0 -D

移动端配置项

.dumirc.ts

themeConfig: {
    // 根据不同设备屏幕宽度切换高清方案
    hd: {
      rules: [
        { maxWidth: 375, mode: 'vw', options: [100, 750] },
        { minWidth: 376, maxWidth: 750, mode: 'vw', options: [100, 1500] },
      ],
    }
  }

注意的点：装完后页面可能会报错，需要把node_modules删掉重新npm install 页面就正常了

如何在顶部标题下建多个文件

在doc文件下建guide文件夹，然后在文件夹下建每个xx.md文件(例如faq.md)

faq.md 文件

• nav 顶部标题
• title 页面标题
• toc: content 锚点目录默认显示在左侧菜单中
• order 排序 数字越小越在前面
• group 左侧标题分组
• group下的 order 分组 排序

---
nav: 指南（顶部标题）
title: 配置页面标题
toc: content 
order: 1
group:
  title: 数据展示
  order: 5
---
其他 Markdown 内容

如果想将组件放在src目录下的其他文件夹（例如components）

.dumirc.ts

export default defineConfig({
    resolve: {
        atomDirs: [{ type: 'component', dir: 'src/components' }],
    }
})

注意的点：组件下建的文件夹demos 打包的时候会忽略

如果想在所有的demos里面共用一个组件（非组件库的组件）

src-> demos -> index.ts

export { DemoBlock } from './demo-block';

src-> demos -> demo-block -> index.tsx

import type { FC, ReactNode } from 'react';
import React from 'react';
import './index.less';

interface Props {
  title: string;
  padding?: string;
  children?: ReactNode;
}

export const DemoBlock: FC<Props> = (props) => {
  return (
    <div className="demoBlock">
      {props.title && <div className="title">{props.title}</div>}
      <div
        className="main"
        style={{
          padding: props.padding,
        }}
      >
        {props.children}
      </div>
    </div>
  );
};

DemoBlock.defaultProps = {
  padding: '12px 12px',
};

Foo 文件夹下新建demos文件夹，再新建demo1.tsx

import React from "react";
import { Foo } from "mobilec";
import { DemoBlock } from 'demos';

const Demo = () => {
    return (<>
    <DemoBlock title="基础用法">
        <Foo title="测试" />
    </DemoBlock>
    </>)
}

export default Demo;

.dumirc.ts

export default defineConfig({
    alias: {
        demos: process.cwd() + '/src/demos/index.ts',
    }
})

tsconfig.json

{
  "compilerOptions": {
    ...
    "paths": {
      ...
      "demos": ["src/demos/index.ts"]
    }
  }
}

目录结构如下