Vue3 组件库 Varlet 开源两周年随笔，个人开源爱好者的两年开源历程。

序言

2020 年末的百无聊赖

也许作者参加工作前几年度过的光阴和大部分同学情况一样，就是在日复一日的完成着上级分配的任务，那些任务是重复的，枯燥且乏味的。流程是固定的，是前辈长年积累的总结，是大部分同事懒的去改变的。技术栈工具链是没人关心的、能用就行的，代码和人有一个能跑就可以的。作者内心是不太情愿一直这样过日子的，平平淡淡的光阴一点一滴的让作者内心躁动的种子慢慢发了芽。

开源契机，三人小队初成

作者参与开源的起因是因为作者的一个高中同学去参与了某知名开源组件库的贡献，并且被 merge 了很多 pr，他认为这是一件很酷的事情，也经常拉作者一起来讨论一些 issue，作者也慢慢感受到了开源的独特魅力所在。当时 Vue3 刚刚进入 beta，社区十分需要框架的生态建设。作者不经思索，为什么我们就不能自己开源一个项目出来贡献给社区呢？有多少能力做多少的事情，总是没错的。我俩商量了一下最后决定要做这件事情，并且找到了和我们关系很好的一位志同道合的朋友，三人小队初成。为了鼓励自己，我们定下了一个 100 star 的目标，只要达成，就算我们大成功了！

选择做什么，怎么才能做。

当时 Vue3 组件库是有空白的，尤其是移动端的组件库，可选的十分有限。我们缺少设计资源，所以会去选择一些成熟的，公开的设计系统。我们都很喜爱 Material Design, 这套设计系统常应用于国外的站点，是相当有用户基础和成熟度的一套设计系统，并且在当时缺少 Vue3 的移动端实现。由于当时我们对于组件库的开发并没有太多经验，我们选择了 Vant 和 Vuetify 作为了第一学习的对象。Vant 十分的优秀，应该是国内第一个支持 Vue3 的移动端组件库，并且有着相当大的用户基础。而 Vuetify 有着多年的 Material Design 的交互实践经验，也非常值得我们学习。再配合 google 官方的设计指南，我们也就有了第一阶段的技能储备，并且足够让我们写下第一行代码。

充满激情的五个多月，肝代码。

组建社区团队

厚着脸皮自荐，踏踏实实迭代。

听说阮一峰(ES6 入门教程作者，业界大佬)阮老师有一个技术周刊，我们厚着脸皮去写了自我推荐，运气非常好侥幸被录入了科技爱好者周刊（第 156 期）：显卡缺货与异业竞争，五一节期间收获了几百个 star，每次刷新页面都能看到有几个陌生的开发者认可了我们的项目，这种感觉是无以言表的。而后几天又在国外的社交平台看到了相关文章 The best new Vue 3 UI libraries of 2021 也提及了 varlet，这也让我们欣喜若狂。在受到国内外的鼓舞之后，我们有了信念感并保持着高强度迭代，那个时期也是 Vue3 生态爆发的时候，我们也一直在其中吸收着养分，也认识到了库作者应该时刻迎合生态发展，及时修补和更新自己的项目，这样才能保证技术不会出现断层，不会背上越来越多的技术债。虽然我们至今一直也没能做的很好，但是我们会继续努力。

尤雨溪推荐

如果说能获得几百个 star 对于我们来说是梦幻的。那被尤雨溪推荐，在当时真的是做梦也不敢想的，因为我们的距离是那么的遥远..... 当时非常激动，以至于拿起键盘就开始乱写，写了一篇语无伦次的文章。而且作者第一次在 twitter 上宣传 varlet 的时候，尤大第一时间点了 follow，也让作者十分受鼓舞。可见尤大也是很鼓励个人开发者对 Vue3 生态做出贡献的，同时包容性也很强。

建立 varletjs 组织

我们在不断的迭代中，遇见了很多新朋友，其中还有一些善于项目管理的同学。我们建立起了一些工作流，以便更好的协同开发。至今我们已经有了将近 30 名核心成员。他们有在读大学生、精通算法的大佬、小破站的up主、工作多年的老同志、还有很可爱的小姐姐。。。。。。，他们活跃在 varlet 的各个角落，解决了大大小小的 issue，并且我们是完全非盈利的组织，一切的任务都是在处理完本职工作之后去完成的，说是用爱发电也不为过，很感谢他们的付出。

说个题外话，上面提到的小破站up主名叫阿阳，最近自行构建了一个 chatgpt桌面端工具，作者感觉很是不错，同学们感兴趣也可以去支持一下。

作者工作变动

作者因一些不可抗力从上一家公司离职了，不得不承认的是，开源项目让作者的求职过程顺利了不少，很多企业开源项目是加分项，而且加了相当多的分。

将内部积累的工具一并开源，获得 Gitee GVP 证书

我们在构建组件库的过程中，封装了很多的实用工具，我们将其一并开源了出去。所有的工具都在我们的 npm @varlet 组织下面。包括控制组件库全生命周期的脚手架也在其中，如果同学们希望构建一个和 varlet 差不多的组件库，只需要安装 varlet-cli 就可以轻松实现。这段时间我们还运气非常好的获得了 Gitee 颁发的 GVP 证书，十分感谢 Gitee 的支持，我们没少白PIAO Gitee 的 Pages 服务。Gitee 真是仁义无双！

探索通过 VSCode 插件给组件库赋能

说实话，作者真的不太想用赋能这个词，但是实在想不到更贴切的形容方式。我们去学习了 VSCode 的插件开发，并且我们官方提供了服务于 Varlet 开发者的 VSCode 插件，希望帮助开发者在代码补全和属性提示上有良好的体验，事实上效果确实不错，证明我们在这个方向上的投入也是值得的。特性可以参考官方文档-VSCode插件

全面重构！升级 varlet 2.0

在我们有了少量的用户之后，我们也积累了一些反馈，我们这时候不得不重新思考 varlet 的方方面面。在我们组织内部研究之后，决定做一些破坏性的变更。又经历了一段每日每夜的编码之后，成功升级到 varlet 2.0，进一步的增强用户体验。最后的结果作者也写了一篇文章, Vue3 组件库 | Varlet v2.0.0 发布了 🎉🎉🎉。

两周年的今天，感谢路上的人们

项目相关地址如下，欢迎同学们加入我们，支持我们的话留下一个 star 就好～ 同时欢迎在 issue 里与我们讨论，项目的 project 也是公开的，可以随时查看我们的迭代进度。

varlet 官方文档: varlet.gitee.io/varlet-ui/#… varlet github: github.com/varletjs/va…