docker原理详解_dumi文档

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

一、dumi介绍

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

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

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

dumi1官方文档
在这里插入图片描述

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

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

这一块不是咱们今天主要介绍的主题,当然官网也给了我们很好的实例,针对引用组件等等,我们可以直接根据路由等然后抛出、引用,然后把菜单完善好即可。
参考如下:
dumi 快速上手
在这里插入图片描述
我们可以根据上方的流程,得到一个dumi的脚手架

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

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

npm i dumi@1.1.48 -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';

export default defineConfig({ 
   
  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

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

铁铁们 感谢支持 我需要你们的三连 👍👍👍
请添加图片描述

今天的文章docker原理详解_dumi文档分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/80730.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注