dumi 如何使用？一文教你使用，高效写出你的博客、组件库文档

文章目录

一、dumi介绍

关于对

dumi

的介绍我们就可以简单的理解为快速开发文档的一种便捷开发工具，里面囊括了多种配置，我们不需要再去手动的编写组件这种，所以为我们开发组件库文档，官方文档，个人博客介绍这种网站提供了很便捷的帮助。

有兴趣的同学也可以去看下 tinkerbell-ui 这套手搭组件库文档，满满的😭血泪史😭。

现在dumi推出了2的版本，当然我们在这里已经引入了dumi1的版本，所以此文我们针对dumi1进行简单介绍，2的版本，我们在后续的升级中会有所体现，文档地址参照如下。

dumi1官方文档

二、使用 dumi 的两种方式（着重在已成型项目中使用dumi）

2.1、基于 dumi 官网带有的脚手架去进行开发

这一块不是咱们今天主要介绍的主题，当然官网也给了我们很好的实例，针对引用组件等等，我们可以直接根据路由等然后抛出、引用，然后把菜单完善好即可。
参考如下：
dumi 快速上手

我们可以根据上方的流程，得到一个dumi的脚手架

2.2、在已成型的项目中引用 dumi 插件，运行项目

参照文档，我们执行两步操作

npm i [email protected] -S

完成之后我们在package.json的script中添加

    "dumi": "cross-env APP_ROOT=dumi dumi dev",
    "dumi-build": "cross-env APP_ROOT=dumi dumi build",

随即我们可以再项目的根目录创建一个dumi的文件夹，这个时候我们需要参照文档去进行对应的路由匹配，暴露组件等

具体可以参照文档，对应的文件对照都在文档中有所体现
目录介绍

github 对应的实例（docs中的index.md,简单配置等可以直接copy过来）
dumi-template

我这边的 .umirc.ts 大家也可以参照 dumi 的配置去进行使用

import{ defineConfig }from'dumi';const path =require('path');const chainWebpack =require('webpack-chain');const repo ='tinkerbell-ui-react';exportdefaultdefineConfig({
  title: repo,chainWebpack(memo){// 设置 alias
    memo.resolve
      .alias
      .set('tinkerbell-ui-react', path.resolve(__dirname,'src'))},
  resolve:{
    previewLangs:['js','jsx','ts','tsx'],},
  favicon:'https://user-images.githubusercontent.com/9554297/83762004-a0761b00-a6a9-11ea-83b4-9c8ff721d4b8.png',
  logo:'https://user-images.githubusercontent.com/9554297/83762004-a0761b00-a6a9-11ea-83b4-9c8ff721d4b8.png',
  outputPath:'docs-dist',
  mode:'site',
  hash:true,// Because of using GitHub Pages
  base:`/${repo}/`,
  publicPath:`/${repo}/`,
  navs:[null,// {//   title: '组件',//   path: 'components',//   // 可通过如下形式嵌套二级导航菜单，目前暂不支持更多层级嵌套：// },],// more config: https://d.umijs.org/config});

2.3、dumi中使用scss

安装 @umijs/plugin-sass

npm i @umijs/plugin-sass

随即在 dumi 处直接可以声明对应的scss即可

2.4、如何在组件内写 tsx | md 文档

2.4.1、button/index.tsx

我们要引入组件然后将对应的组件暴露出来，给外部的index进行引用解析

2.4.1、button/index.md

正常的md编写即可，头部需要将对应的配置写上

最后会有一个总的组件去把暴露出来的组件进行一个全部抛出

2.5、运行 npm run dumi 效果

结语

附上项目：tinkerbell-ui-react

✨ 每天创作一点点
✨ 开心快乐一整天
✨ 点赞关注加收藏
✨ 美好一天又一天

铁铁们 感谢支持 我需要你们的三连 👍👍👍