Vue DevUI 是一款基于 DevUI 设计体系的 Vue3 开源组件库，使用最新的Vue3+TypeScript+Vite+JSX技术栈进行开发和构建，使用Jest编写单元测试，使用VitePress搭建官网文档，并支持按需加载、主题定制等功能。

5月1日，我们正式在社区发起Vue DevUI开源项目，并招募贡献者。

让我们一起建设 Vue DevUI 项目吧！🥳

8月3日，我们第一次在掘金同步了Vue DevUI的最新进展。

Vue DevUI 已经有10个组件成员啦～🥳😋

非常感谢Vue DevUI的早期贡献者们：

由于早期参与贡献的小伙伴的辛勤努力，Vue DevUI项目吸引了越来越多的小伙伴参与进来，10天之内61个组件全部认领完，并新增了11个组件。

我们在8月14日同步了这个非常振奋人心的进展。

Vue DevUI 又新添了11位新成员啦～🥳😋

从8月份一直到现在，Vue DevUI一直保持着非常高的活跃度，多次上榜Gitee开源软件首页的今日热门和本周热门，代码活跃度也超过了98%的项目。

截止到10月1日，Vue DevUI一共新增37位贡献者，新增123个PR、604次提交。

欢迎大家加入我们，一起建设一个好用、易用、功能强大的 Vue3 开源组件库，感兴趣的小伙伴可以加 DevUI 小助手微信：devui-official，拉你进我们的核心开发群。

也欢迎关注DevUI团队的Kagol和村长的直播间，一起学习如何建设一个Vue3组件库。

村长直播间

往期录播地址

Vue DevUI开源指南02：做一个有模有样的Tree组件

Vue DevUI开源指南01：提交我的第一次pr

另外也预告下今晚9点，Kagol会和村长一起直播，继续给搭建分享组件的设计与实现，如何为组件编写单元测试，并实现tree组件的展开/收起功能，欢迎大家围观～

以下是Vue DevUI目前的最新进展情况。

组件(36)

Vue DevUI目前的最新版本是：v1.0.0-alpha.1

包含6类共36个组件，并支持组件的按需加载、主题定制等功能。

通用(9)

Button 按钮组件 - zcating
ClickOutside 点击外部元素 - kd554246839
Icon 图标- kagol
Overlay 遮罩层 - zcating
Panel 面板组件 - to0simple
Ripple 水波纹 - ErKeLost
Search 搜索框 - laiweilun
Status 状态 - LiuSuY
Sticky 便贴 - maizhiyuan

导航(3)

Anchor 锚点 - asian-TMac
Pagination 分页 - 对半
Tabs 选项卡组件 - flxy1028

反馈(3)

Alert 警告 - to0simple
Loading 加载提示 - 对半
Toast 全局通知 - iel

数据录入(12)

EditableSelect 可输入下拉框 - chengxi_24
InputNumber 数字输入框 - yqsheng
Upload 上传 - ~zZ.Lucky
Slider 滑块 - httpxiaobocom
Transfer 穿梭框 - guaimeengmengxiaoxiong
DatePicker 日期选择器 - mrundef
Select 下拉选择框 - lookforwhat
CheckBox 复选框 - brenner8023
Radio 单选框 - brenner8023
Switch 开关 - brenner8023
TagInput 标签输入 - brenner8023
TextInput 文本框 - brenner8023

数据展示(8)

Badge 徽标 - duqingyu
QuadrantDiagram 象限图 - nowisfuture
ImagePreview 图片预览 - sise209
Card 卡片 - Vergil
Carousel 走马灯 - onlyoupon
Progress 进度条 - lao--hu
Rate 评分 - ~zZ.Lucky
Avatar 头像 - to0simple

布局(1)

Splitter 分割器 - Jecyu

工程化

主题定制功能 - kagol
使用VitePress搭建官网网站 - kagol
demo文件代码收起功能 - laiweilun
增加自动生成sidebar.ts组件导航文件的脚本 - iel
组件的按需打包功能 - kagol
使用AST优化DevUI CLI文件解析方式 - 对半
增加DevUI CLI用来创建组件和组件库导出文件 - iel
Jest单元测试 - brenner8023
eslint代码规范约束 - brenner8023
stylelint样式规范约束 - brenner8023
lslint文件夹/文件命名规范约束 - brenner8023
commitlint代码提交规范约束 - kagol

经过这一个月多的开发，除了组件总数突破36个（组件数占比55%，组件总数为66个）之外，Vue DevUI组件库也迎来了第一个超复杂组件DatePicker的突破，目前DatePicker已完成：

date模式日期面板的显示和基本交互
range日期范围选择器即成模式的基本功能

感谢DatePicker组件的田主Marvin的辛勤贡献，Marvin同学也因此成为提交总数最多的contributor🎉🎉。

Marvin同学是苏宁易购的大佬，他在社区也非常活跃，很喜欢分享技术，他的掘金账号是JS老狗，欢迎大家关注Marvin同学。

他近期也分享了2篇参与Vue DevUI项目的实践文章，欢迎大家给他点赞支持👍～

DevUI中VUE的TSX函数式组件实践

再聊Vue的TSX函数式组件

DatePicker日期选择器是一个很常用、却不简单的组件，也希望小伙伴们一起参与到DatePicker的建设中来，与Marvin同学一起，一方面是对自身的锻炼，另一方面也可以跟着Marvin大佬学点东西，他经验非常丰富！

参与开源项目，不仅仅是为我们的简历添加浓墨重彩的一笔，更是对我们自身的一种提升：

让我们学会与别人一起协作，共同完成一件事情
通过检视别人的代码，学习他人优秀的实践和经验
培养持续迭代和优化的意识，培养追求精品的精神
重新认识自我，自我封闭永远无法突破，而参与开源能让我们通过与他人的协作，认识全新的自我

感谢所有参与Vue DevUI组件库建设的小伙伴们！

以下是贡献者名单（排名不分先后）：

预告

今晚9点，Kagol将做客村长的B站直播间，与大家分享组件设计和开发的经验，本次直播主要有两个主题：

如何给组件编写单元测试
延续上一次的直播内容，完善tree组件，增加节点展开/收起功能

以下是之前的录播地址：

Vue DevUI 已经有36个组件啦～😋🥳🎉