Dumi从0到1搭建属于自己的组件库

项目地址在末尾

初始化组件库

Dumi(官网)

使用dumi可以在开发组件库的同时,生成文档和demo

  1. 创建一个目录
mkdir test_demo
cd test_demo
  1. 使用dumi脚手架创建组件库
npx @umijs/create-dumi-lib --site
  1. 安装依赖,运行展示
npm install   #yarn
npm start     #yarn start

运行后
在这里插入图片描述

启动展示图

设计组件

在组件设计时,具体参考dumi官方文档
index.md
对应侧边栏的目录、组件代码块等
index.test.tsx
单元测试使用
index.tsx
组件
在这里插入图片描述

在这里插入图片描述

打包发布

发布前需要有npm的账号(如何注册)

打包
npm run build
在这里插入图片描述

发布
未登录

npm login

已登录

npm publish

遇到报错

在这里插入图片描述
删除package.jsonprivate
在这里插入图片描述

使用

npm i test_demo_maomao

在这里插入图片描述
显示效果
在这里插入图片描述

项目地址

组件demo:https://gitee.com/maomaonb/components_demo.git
使用项目:https://gitee.com/maomaonb/components_demo.git

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/112359.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mock数据:单元测试中的心灵鸡汤

在当今的软件开发领域,质量控制已经成为了一个不可或缺的环节。为了确保软件的稳定性和可靠性,开发者们投入了大量的时间和精力进行各种测试。其中,单元测试作为最基础的测试方法,其重要性不言而喻。然而,单元测试中的…

插件化原理

插件化技术和热修复技术都属于动态加载,从普及率的角度来看,插件化技术还没有热修复的普及率高,主要原因是占大多数的中小型应用很少也没有必要去采用插件化技术。 Android P preview(Android 9)开始限制调用隐藏 API…

解决 010Edittor 复制问题

遇到的问题: 使用010Edittor做CTF题目的时候 复制Nex Text File 复制的内容在右边 解决方法: 如果要复制到左边是复制的问题 需要ctrlshift c 然后ctrlshift v粘贴即可。 具体操作如下: 这边复制过来就可以看到是RAR的文件格式另存为 修…

肖sir__mysql之索引__010

mysql之索引 一、什么是索引? 索引是一种数据结构设计 一个索引是存储的表中数据结构; 索引是建立在表字段上, 索引包含了一列值,这个值保存在一个数据结构中 二、索引作用 1、保证数据记录的唯一性 2、实现表与表之间的参照性 3…

Python入门-pack和unpack的用法

struct.calcsize(format) 返回与格式字符串format相对应的结构体的大小(以及由 生成的字节对象的大小 ) 使用大端顺序打包和解包三种不同大小的整数: from struct import *pack(">bhl", 1, 2, 3)unpack(>bhl, b\x01\x00\x…

ETH01-ETH驱动的配置01

总目录链接==>> AutoSAR入门和实战系列总目录 总目录链接==>> AutoSAR BSW高阶配置系列总目录 1 配置参数 /MICROSAR/Eth_Enet/Eth/EthConfigSet/EthCtrlConfig/EthTxBufConfig/EthTxBufTotal/MICROSAR/Eth_Enet/Eth/EthConfigSet/EthCtrlConfig/EthTxBufConf…

【数据结构】C++实现二叉搜索树

二叉搜索树的概念 二叉搜索树又称为二叉排序树,它或者是一棵空树,或者是具有以下性质的二叉树: 若它的左子树不为空,则左子树上所有结点的值都小于根结点的值。若它的右子树不为空,则右子树上所有结点的值都大于根结…

深度学习——线性神经网络一

深度学习——线性神经网络一 文章目录 前言一、线性回归1.1. 线性回归的基本元素1.1.1. 线性模型1.1.2. 损失函数1.1.3. 解析解1.1.4. 随机梯度下降1.1.5. 用模型进行预测 1.2. 向量化加速1.3. 正态分布与平方损失1.4. 从线性回归到深度网络 二、线性回归的从零开始实现2.1. 生…

charles报错Not allowed GET http://xx.xx.com/xx - connection dropped

现象:手机抓包时,charles提示Not allowed GET http://xx.xx.com/xx - connection,请求status显示block 排查原因: 1、换手机连接抓包工具,现象也是同上,可以排除手机的原因 2、检索网络上关于报错的解决方…

(UI资源)4k Full Fantasy GUI + over 400 png + samples

资源包含超400个4k高清png文件 窗口资源包含:登录、角色创建、探索日志、库存、商店、设定、手工艺、NPC对话、技能、6个弹出窗口 72个独特的图标 4种颜色主题的56个图标 按钮:大按钮(3种色)、小按钮(5种颜色)、复选框和单选按钮 其他要素 使用简单的填充脚本轻松自定义健康与…

探索状态驱动开发的奇妙世界——Cola-StateMachine的介绍与使用

文章目录 1. 前言2. Cola-StateMachine概述3. Cola-StateMachine相关API4. Cola-StateMachine实战5. 其他 1. 前言 前面接受了Spring实现的状态机Spring StateMachine,这个状态机的优点在于功能很完备,缺点也是功能十分完备。 完备到什么程度了&#x…

ddtrace 系列篇之 dd-trace-java 项目编译

dd-trace-java 是 Datadog 开源的 java APM 框架,本文主要讲解如何编译 dd-trace-java 项目。 环境准备 JDK 编译环境(三个都要:jdk8\jdk11\jdk17) Gradle 8 Maven 3.9 (需要 15G 以上的存储空间存放依赖) Git >2 (低于会出现一想不到的异常&#xf…