文章目录
一、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