参与Vue DevUI开源项目的小故事

1,234 阅读6分钟

与DevUI的相遇

初见DevUI

要说最早接触DevUI的时间,那可以追溯到2020年1月份左右吧,那时在华为云官网上买了个学生价的服务器,那时倒是挺经常上华为云官网的,当时我觉得华为云官网的UI还是不错的,相比阿里云官网的UI好多了。后来在某篇文章上有看到Angular的UI框架DevUI,就到DevUI官网看了一下,感觉也还不错,不过因为自己没有学过Angular,做项目也用不上它,之后就没有关注了。

image.png

再次邂逅DevUI

再次邂逅DevUI是在掘金文章 Vue DevUI 已经有10个组件成员啦~🥳😋 一文中,当时看完文章之后有很想加入的冲动。但是当时心中想自己技术还很菜,今年刚刚毕业,没有什么经验积累,所以不敢马上评论说想加入,于是便先评论询问自己是个刚毕业的应届生能否加入。

image.png

没想到DevUI团队的回答很爽快,于是我便添加了DevUI小助手的微信,加入了Vue DevUI项目核心成员群。

image.png

加完群还不算完,还需要到仓库里领组件,当时我加入的时候,想着领个Avatar、Input简单等组件练练手的,当我进入仓库时,我傻眼了,没有什么简单组件了。

image.png

认领组件

进群之后发现,只剩下Gantt、Form、Mention、NavSprite组件了,Gantt图这种想想就觉得很复杂、NavSprite手慢被人抢先认领了。

image.png

最后选择了Form组件。

image.png

参与DevUI开源项目的初心

目的

要说参与开源项目的目的,很简单

  • 提升自己技术能力,积累更多开发经验
  • 为以后跳槽面试,简历里增加点加分项
  • 为了可以跟大佬走得更近

影响

其实,最主要的还是想提升自己的技术。

刚毕业从学校出来,参加工作之后,发现自己掌握的、自己所了解的东西都只是凤毛麟角,解决问题的能力还不够强...

所以给自己选了座右铭 “努力提升自己,比仰望别人更有意义。” 以此来激励自己。

这句话我也写到自己微信签名和公司企业微信的签名中、以及个人博客封面中

微信签名: 微信签名

企业微信签名: 企业微信签名

个人博客封面: image.png

感受

轻松

这里说的轻松,并不是说开发任务很简单的那种轻松,而是指开发时间节点上的轻松。

对比工作上的项目,工作上的项目开发时间紧,工期短,公司希望产品能尽快上线。而做开源项目,比较轻松一点,都是每个成员利用业余时间进行开发的。

挑战

刚开始开发Form组件时,我去看了Angular版的Form组件,发现Form组件好多API呀,也好多功能要实现,细节小功能多。

于是硬着尝试着去开发,比较头疼的是表单验证的功能,表单验证分两类,一个是模板驱动验证,另一个是响应式表单验证。

响应式表单验证还好,Zcating大佬分享了一篇文章 一种简单的响应式表单设计,再自己去参考element-plus源码form表单的实现,最后实现了响应式表单验证。

image.png

比较头疼的是模板驱动表单验证,当时看了ng版的模板驱动表单验证验证,验证代码直接是写在单个组件里,例如输入框需要验证,就直接写在input组件中的。我当时就想,这难道是在单个组件里去实现表单验证的吗?然后找Wailen大佬确认模板驱动验证是否在d-input组件里去实现的,最后Wailen表示这个功能不是在d-input组件去实现的。所以,最后自己思考了下,可以用vue的指令的方式去实现模板驱动表单验证。

image.png

坚持

当时,觉得开发模板驱动表单验证功能对于我来说比较难,曾向kagol哥提出过想跟其他人替换组件来开发的想法。

image.png

image.png

还好,最后坚持下来了。

方法

就像kagol哥说的,做这个复杂的组件需要先做设计的,先做一个最小可用版本,然后不断去完善它。这个思想确实很管用,我在工作上也常常使用这个法则。

在设计Form组件时,我在决策群里看陈建峰大佬(DataTable田主)梳理了DataTable的细节之后,我自己也模仿着写了个简单的Form组件的思维导图。 image.png 按着思维导图去做,思路确实清晰了很多。

收获

实物

收获了DevUI团队赠送的一个小礼物,DevUI定制抱枕~

image.png

image.png

个人成长

这里借用Vue DevUI仓库的介绍,因为确实如此~

  • 🔥 学习最新的 Vite+Vue3+TypeScript+JSX 技术
  • 🎁 学习如何设计和开发组件
  • ⭐ 参与到开源社区中来
  • 🎊 结识一群热爱学习、热爱开源的朋友

思考

一定要追求完美吗?

我大概是在8月8日左右开始着手开发Form组件的,直到10月7日才提交Form表单基础版的PR。

其实,我在8月底就已经完成了Form组件的基础版,但是我一直想要把组件写得更好一点再提交的,刚好9月初这会工作上有个新项目,开发时间比较紧,一个多月都是9116工作时间,所以Form开发进度就停滞了一个多月,于是趁着国庆假期赶紧提交Form表单基础版的PR。直到工作上的项目结束后才有空余时间去修复一些大佬检视提出的问题。

image.png

回过头来反思自己的做法,我觉得应该先做一个最小可用Form版本先提交,然后不断去完善它,而不是一直要做到很完美的情况下才去提交。

Form组件的思考

按照ng版的form组件,它被拆分为了form-label、form-item、form-control、form-operation几个子组件,我个人觉得可以参考element-plus,只保留form和form-item组件就好了,将其余的功能整合到form-item组件,这样在编写模板代码时可以少写几个标签,更舒服些。