从0到1400star，从阮一峰周刊到尤雨溪推荐，小透明开源项目的2021年总结

@超人

发布于 2022-04-14 13:59:57

7050

发布于 2022-04-14 13:59:57

引言

年度征文来了，想想这一年还是蛮充实的，写写自己这一年的心路历程，扯扯闲篇。作者是四川人，在无锡工作，是一个专科毕业的前端开发，2021年做了一个小项目叫Varlet[1],是一个Vue3开源组件库，这一年大部分精力也都在这个上面。

决定搞个事儿

去年的日子过的相对比较颓废，作者当时所在的公司相对也比较清闲。每天上班写一会儿业务，下班逗一会儿猫，时间刺溜一下就过去了。

想想这样的生活也没有特别大的乐趣，作者暗自决定要做点有意义的事情。但是做什么事情还没有什么头绪，直到公司有开发组件库并且拥抱Vue3的期望，作者对组件库的开发也颇有兴趣，就揽下了这个活儿。

公司觉得回报不高，不想做，那就自己做

毕竟开发组件库也不是一蹴而就的事情，加上没有这方面经验，一时间看不到回报，这个事情就暂时搁置(弃坑)了。作者不是一个半途而废的人，既然公司不愿意提供支持，那作者就自己搞，抱着什么不会学什么的态度，拉了两个朋友，到github上开了个repo，开干！！！

image.png

对于开源的迷茫

众所周知，做什么事情仅凭一腔热血是没意义的，我们对一个开源项目应该具备什么东西完全不清楚，所以我们花费了将近一个月的时间去看了一些开源组件库的实现，去摸索他们的细节，去学习他们的经验。可以说大家脑海里能想到的开源组件库，几乎都是我们的老师，我们也抱有对他们的无比尊重。

UI相关的资源受限

我们是一个个体，我们没有企业支撑，加上我在內的三个早期开发者都不具备很强的设计能力，UI组件库对视觉效果和交互体验的要求很强，怎么办呢？抠细节!。

因为我们的组件库是基于Material Design的设计规范的，我们找到了我们能力范围內所有能找到的设计资源，并且参考社区已有的实现，慢慢摸索怎么样的效果是最合适的，这里的像素应该是多少，其他库是多少，其他库的取值和api设计在我们这里到底适合不适合，我们国内开发者最喜欢看到什么样的api。

我们每个组件都是这么反复推敲出来的，会花费不少时间和精力，但是在这个时候没有企业支撑反而成了我们的优势，因为没有人催着我们赶紧上线。方式虽然笨，但是有用。

image.png

当然为了一些细枝末节吵架也是有的

世界上就没有观念完全一致的人，决定不了的事情，该吵还得吵，吵完了还是好兄弟

48E4CF66-8B45-4DD8-89BB-0904D4CECC5F.png

8DC72B14-2115-4D5C-A6E3-9DCF8C0082A1.png

9C382F61-6CFE-4929-AE39-D38E19C295CC.png

正式开源

在开发了大半年之后，我们的组件库已经是"麻雀虽小,五脏俱全"，我们决定把他正式开源，从而能让更多有兴趣的同学们参与其中，一来可以认识更多的朋友，开拓眼界。二来也能吸引更多的贡献者来给组件库添砖加瓦，都是好事儿。

这也是作者第一次开始在掘金投稿，分享一些组件库开发的心得体会，让有兴趣的同学也能了解一些组件库搭建的知识，详情可以看这篇文章, 如何从0到1开发一个开源组件库[2]

阮一峰技术周刊推荐

抱着试一试的态度，我们成员中的小伙伴跑到了阮一峰老师的技术周刊仓库下面刷存在感。每个开源作者都喜欢刷存在感，对于一个新的开源项目大部分情况都是在求着别人用自己的东西，对开源没有概念的同学可能会不太理解这种感受。这其实是一种分享欲，在你付出了精力做了一件事情的时候，是非常希望得到别人认可的。好巧不巧，我们被选入了阮一峰的技术周刊，这也是我们第一次因为开源收获到了喜悦。因为我们都是读者阮一峰老师的es6书籍长大的。

科技爱好者周刊（第 156 期）：显卡缺货与异业竞争[3]

image.png

阮老师的影响力是很厉害的，我们因为这个周刊，走过了0-100star的阶段，我们非常的开心，甚至开心的云了一波奶茶。

工作变动

这里作者经历了一次工作变动，不得不说，这个开源项目对作者这次工作变动也是有不少的助力，虽然当时star也就300多点，但是明显可以感觉到，很大一部分企业都对这个项目十分的感兴趣。作者是个专科毕业的开发者，但是不少企业也愿意因为这个开源项目破格录取，这也是作者没想到的事情，也算是积极意义了，作者内心也十分感激，毕竟吃饭也是一件很重要的事情。

国外技术社区的认可

我们的组件库一开始就设计了国际化api, 我们也编写了相对完善的英文文档（虽然大部分都是通过翻译软件加上自己修正），这引起了国外的一些开发者的兴趣。记得是在一个周末的下午，成员中的一个小伙子在看数据统计的时候发现了来自国外的流量，随后看到了这篇文章。

image.png

image.png

这是一种从未有过的体验，这篇文章甚至说我们的组件库是针对移动平台的Vuetify, 真的是太抬举我们了，详细的文章在这里。The best new Vue 3 UI libraries of 2021[4]

Antfu大神接受了PR

Antfu是Vite核心团队的全职开发者，致力于Vite的生态构建，是unplugin-vue-components[5]作者。unplugin-vue-components是一个可以实现组件和指令免注册和自动按需引入的插件，并且可以跨构建工具使用。是未来组件库按需引入方案的首选。

我尝试的向这个插件pr了我们组件库的第一方解析器支持。本来没觉得会被合并，当时我们的库也就200、300的star，也不是什么名企项目，是小透明中的小透明。没想到的是Antfu大神并不计较这些东西，直接合并了我的pr(后续Antfu为我们分配了相应的代码控制权限，我们修改自己的解析器甚至可以不通过pr直接commit)，从此我们的组件库使用这个插件变得更加平滑，更加自由。这里也可以看出Vue团队的开源精神，对新库的包容度很高。

第一次接触VSCode插件开发

我们都知道Vue3和Volar配合可以得到十分舒服的开发体验，在IDE层面解决一些问题也是趋势所在。作者也因此第一次接触了VSCode插件的开发，虽然最后实现功能看起来十分脑瘫，就是一个文档速查，代码实现也很简单，但是确实解决了不少问题，有明显的开发体验的提高，也是值得进一步深耕的方向。

尤雨溪的推荐

这应该是作者今年最开心的一件事情了，也比较意外。在今年的Vue JS Live上尤大分享了目前Vue3的生态和未来的展望，也相当于是Vue3的2021年度总结。我们的组件库赫然的出现在尤大的演讲稿上，这让我们受宠若惊，也让我们备受鼓舞。这次大会国内外都有，但是视频不算好找，国外的在油管上，国内的在早早聊。