一个基于dumi搭建的react组件库,特别的开源组件项目,主要用于学习

前言

在日常开发中，肯定会积累许许多多的业务组件在项目内，部分可以作为公共组件被抽离到公共组件库，但大部分或许与业务强相关，或许带有接口请求，并不适合抽离为公共组件，但仍需要有一个地方去展示这些组件的效果和用法，dumi 除了单独作为组件库文档外，也是支持和项目集成，展示项目内的业务组件的。

什么是 dumi？

dumi，中文发音嘟米，是一款为组件开发场景而生的文档工具，与 father 一起为开发者提供一站式的组件开发体验，father 负责构建，而 dumi 负责组件开发及组件文档生成。

特性

开箱即用，将注意力集中在组件开发和文档编写上
丰富的 Markdown 扩展，不止于渲染组件 demo
基于 TypeScript 类型定义，自动生成组件 API
主题轻松自定义，还可创建自己的 Markdown 组件
支持移动端组件库研发，内置移动端高清渲染方案
一行命令将组件资产数据化，与下游生产力工具串联

更详细得介绍还是查看官网吧 dumi地址

wskco

这是一款由 React + TypeScript 开发的组件库

至于 wskco 是什么意思 ❓

wsk这是我名字的缩写,co 为component ,然后就是我的代码component 哈哈

这其实只是单纯为了个人进阶学习 React 所构建的，用于记录个人在学习、开发路上的所想所得

作为一个组件库来说，它并不完美，在此也不推荐投入生产环境 ⚠

当然，也可以以其中部分源码（or 思路）为地基，从而完善成自己的作品

所以，wskco 更希望展现的是一种实现思路 而非 UI 设计 ️

在 UI 方面主要借鉴 Ant Design 组件库

wskco 前端组件库

使用

yarn install wskco --save

目录介绍

├─ .editorconfig
├─ .fatherrc.ts         father 配置
├─ .gitignore
├─ .prettierignore
├─ .prettierrc
├─ docs                              文档存放路径
│  ├─ guide
│  ├─ index.en-US.md
│  └─ index.md                       首页展示
├─ LICENSE
├─ package.json
├─ README.en-US.md
├─ README1.md
├─ src                               组件主目录
│  ├─ animate-component              动画组件
│  │  ├─ AnimateLineSimpleText
│  │  ├─ AnimateLineText
│  │  ├─ BreakText
│  │  ├─ NumberCount3D
│  │  ├─ OutlineAnimation
│  │  └─ StringRain
│  ├─ components                     基础组件
│  │  ├─ Alert
│  │  ├─ Button
│  │  ├─ Divider
│  │  ├─ GlobalConfig
│  │  ├─ Layout
│  │  ├─ List
│  │  ├─ Menu
│  │  ├─ Message
│  │  ├─ Pagination
│  │  ├─ Select
│  │  ├─ Skeleton
│  │  ├─ Space
│  │  ├─ Switch
│  │  └─ Transition
│  ├─ design                          设计
│  │  ├─ Colors
│  │  └─ Font
│  ├─ feat-components                 功能组件
│  │  ├─ DownloadButton
│  │  ├─ DragList
│  │  ├─ FPS
│  │  ├─ RightMenu
│  │  ├─ SliceUpload
│  │  ├─ VirtualList
│  │  └─ Watermark
│  ├─ global.scss                     全局样式
│  ├─ index.d.ts
│  ├─ index.ts
│  └─ styles                            自定义样式
├─ tsconfig.json
├─ typings.d.ts
└─ yarn.lock

其余文件可自行查阅了解。

命令介绍

名称	描述	备注
npm run start	项目启动	使用 dumi，组件开发和文档开发在一起
npm run test	组件测试	-
npm run test:coverage	代码覆盖率查看	-
npm run prettier	代码美化	-
npm run build	组件打包	使用 father 工具
npm run release	组件打包发布	-
npm run docs:build	文档打包	-
npm run docs:deploy	文档发布	这里默认是使用了 GitHub Pages
npm run deploy	文档打包发布	-

灵感来源于noteco.

如果它能帮助到你，学习到什么，我会非常开心
欢迎加入或提供意见，此项目将长期更新，你的 star ⭐，是对我最大的鼓励

wskco组件库
在线预览：地址
github地址：地址