简介

dumi 是啥，啥是dumi，相信react的忠实粉，都有这么几个痛点：

1. 憋了几年的技术和业务积累写了一套贴合自身业务的组件库。吭哧吭哧...终于写完了。队友：看不懂大湿的代码啊。

emmm.....好吧。这个函数是.......这个class是......这个组件要......用。 好吧看来是时候整个文档了。

搜索引擎啊，请你告诉我是一名优秀的程序员吗？
搜索引擎：嗯，算.....是吧。
我刚造了个火箭，他需要一本书起飞的说明书，帮我找个文档工具吧，要react的。
搜索引擎：抱歉，你想要的，我给不了你。
你怎么能这样？

2. 做技术好多年了，走的时候是不是该留下点什么？嗯 ，那就博客吧。来,用我最擅长的react自己的造一个.
   

不知不觉，几年过去了.....一入前端深似海啊......

我：    他来了,他来了，他身披金甲圣衣，脚踏七彩云来娶我来了。
搜索引擎:       他？姓甚名谁？
我：    他就是dumi(嘟米)啊
搜索引擎:      嗯？一款基于 Umi 打造、为组件开发场景而生的文档工具，与 father 一起为开发者提供一站式的组件开发体验，father 负责构建，而 dumi 负责组件开发及组件文档生成 。小伙子不错，大有前途啊。我记下了。
（好了，接下来言归正传）

实践

我们先用它来写个博客,把之前的文章整理整理吧
首先得有 node，并确保 node 版本是 10.13 或以上。

1. 初始化一个站点模式的组件库开发脚手架

npx @umijs/create-dumi-lib --site
复制代码

2. 安装依赖

cnpm i
复制代码

3. 启动项目

npm start
复制代码

哇哇哇！！！ 惊艳到了.... 果然是美美的。

项目结构简介

既然是写博客，做内容输出，我们先来改吧改吧。

首先改下主页的内容：

1. 打开 docs/index.md修改如下

---
hero:
  title: XXX的博客
  desc: XXX的简介
  actions:
    - text: 开始启动
      link: /blog
features:
  - icon: https://gw.alipayobjects.com/zos/bmw-prod/881dc458-f20b-407b-947a-95104b5ec82b/k79dm8ih_w144_h144.png
    title: Feature 1
    desc: 高内聚
  - icon: https://gw.alipayobjects.com/zos/bmw-prod/d60657df-0822-4631-9d7c-e7a869c2f21c/k79dmz3q_w126_h126.png
    title: Feature 2
    desc: 低耦合
  - icon: https://gw.alipayobjects.com/zos/bmw-prod/d1ee0c6f-5aed-4a45-a507-339a4bfe076c/k7bjsocq_w144_h144.png
    title: Feature 3
    desc: 可伸缩
footer: Open-source MIT Licensed | Copyright © 2020<br />Powered by [dumi](https://d.umijs.org)
---
复制代码

2. 修改.umirc.ts如下

import { defineConfig } from 'dumi';

export default defineConfig({
  title: 'xxx的博客',
  mode: 'site',
  // more config: https://d.umijs.org/config
});

复制代码

保存看效果：

1. 添加菜单路由.umirc.ts

import { defineConfig } from 'dumi';

export default defineConfig({
  title: 'xxx的博客',
  mode: 'site',
  menus: {
    '/blog': [
      {
        title: '简介',
      },{
        title: '辟邪剑谱',
        children: ['blog/sword/test'],
      },{
        title: '降龙十八掌',
        children: ['blog/eighteen/test'],
      }
    ],
  }
});

复制代码

2. 新建文件
   blog/sword/test.md

# 辟邪剑谱

欲练此功，必先.....先........
复制代码

blog/eighteen/test.md

# 降龙十八掌

### 亢龙有悔

说着左腿微屈，右臂内弯，右掌划了个圆圈，呼的一声，向外推去，手掌扫到面前一棵松树，喀喇一响，松 树应手断折。
他左手划个半圆，右手一掌推出，正是生平得意之作“降龙十八掌”中的「亢龙有悔」。
大丑不及逃避，明知这一招不能硬接，却也只得双掌一并，奋力抵挡。

### 飞龙在天

洪七公把“降龙十八掌”中的第二招「飞龙在天」教了郭靖。
这一招跃起半空，居高下击，威力奇大，郭靖花了三天工夫，方才学会。

### 见龙在田

郭靖见他越逼越近，早有提防，当他右手离黄蓉身前尺许之际，左掌圆劲，右掌直势，使招「见龙在田」，挡在黄蓉身前。
这一招纯是防御，却是在黄蓉与渔人之间布了一道坚壁，敌来则挡，敌不至则消于无形。

### 潜龙勿用

郭靖暗叫：“不好！”全身已感酸麻，危急中右手屈起食中两指，半拳半掌，向她胸口打去，那是「潜龙勿用」的半招，本来左手同时向里钩拿，右推左钩，敌人极难闪避，现下左腕被拿，只得使了半招。

### 震惊百里

欧阳锋叫声：“好！”第二推又已迅速异常的赶到，前劲未衰，后劲继至。
郭靖猛觉得劲风罩上身来，心知不妙，一招「震惊百里」，也是双掌向前平推，这是降龙十八掌中威力极大的一招。

### 或跃在渊

这第二掌「或跃在渊」，却再也不敢留力，吸一口气，呼的一响，左掌前探，右掌倏地从左掌底下穿了出去，直击他小腹。

### 突如其来

郭靖听得她呼叫，精神忽振，左掌拍出，那是降龙十八掌中的第十一掌「突如其来」。

### 双龙取水

郭靖刚从小艇艇首爬上甲板，眼见势急，已自不及抢上相救，双掌齐发，一招「双龙取水」，猛击欧阳锋后腰

### 神龙摆尾

黎生听得背后风响，衣上也已微有所感，就在这一瞬之间，反手横劈，仍是刚才使过的“降龙十八掌”中那一招「神龙摆尾」。

### 利涉大川、鸿渐于陆

郭靖连发两招「利涉大川」、「鸿渐于陆」，将梅超风远远逼开，抬头只见黄蓉绕着柱子而奔，连打手势，一时还不明白。

### 密云不雨

郭靖使一招「密云不雨」，双掌交替连拍，击向裘千仞头顶，左臂格开篙头，身子续向敌船落去。

复制代码

ok 保存最后我们来看效果。

怎么样是不是应有尽有....ok，话说回来根据dumi的官方文档介绍，它是负责组件开发及组件文档生成的一个工具，做博客是大才小用了。最后感谢开源dumi团队为的开源。 最后附上我的个人博客，欢迎各位大佬品尝指导。

注：dumi(嘟米)官方文档