乐趣区

关于前端:2022年度总结-我的Vuejs生态开源之旅

本文参加了 SegmentFault 思否年度征文「一名技术人的 2022」,欢送正在浏览的你也退出。

前言

大家好,转瞬又到一年的尾巴了。好久没写文章了,因为往年工作之余更多的是沉闷在开源社区,借着年底 思考 狐疑人生 (偷懒) 的闲暇工夫想跟大家分享往年我在 Vue.js 生态的做的事件和对开源的认识,也算是「2021」我给 Vue.js 生态奉献代码的这一年的续篇吧。

参加开源原因

在参加开源之前其实我就对开源社区存在向往,我感觉做开源是一件很酷很有意思的事件。折腾 GitHub 其实有几年了,但之前更多的是做一些本人的小玩具和浏览一些我的项目的优良实际。真正开始参加开源奉献是 2021 年 7 月给 vuejs/composition-api 提交了一个文档格局谬误的 PR,过后因为某个业务我的项目用的是 Vue2,并且咱们想在我的项目中应用组合式 API,所以跟它结下了“缘分”。从那时起有一段时间就是下班用它糊业务,上班给它水 PR,从此开始了开源之路。

如何参加开源

对于这个问题其实在「2021」我给 Vue.js 生态奉献代码的这一年这篇文章里曾经讲过了,这里就简略啰嗦两句。

1. 找准切入点

找到一个适合的切入点开始蛮重要的,这很大水平上会决定你能不能保持下来。我倡议从感兴趣的畛域和我的项目开始,因为开源大多时候都是靠爱发电,没有肯定的激情和趣味撑持,大多时候都没法保持下来。

2. 寻找参照物

这里说的参照物其实有两方面,一方面是物,另一方面是人,人的话用参照物来比喻可能有点不适合,或者应该说是楷模,我感觉找到一个楷模能更好的撑持你后退和解决问题。物的话其实就是代码,遇到一些比拟辣手的问题时很多时候咱们都能够通过浏览一些代码来找到答案。

3. 建设信念

循序渐进的从一些简略的点开始,并在这个过程中建设信念能帮忙咱们更好的参加进来,比方从给我的项目修复错别字和补充测试用例开始。如果一开始就上天堂难度的话,大多时候只会让咱们受挫和播种负反馈,那可能还没开始就曾经完结了。

4. 相熟规定

每一个畛域都有本人的一套规定,咱们首先须要相熟游戏规则能力玩懂游戏。拿开源奉献来说,提 Issue 时带最小复现、提 PR 前浏览奉献指南等就是规定。

5. 端正心态

以一个好的心态参加开源其实是最重要的,因为一开始在学习和尝试的过程中咱们可能得不到正反馈甚至是有一些负反馈,保持吧,总会有播种的。还有就是不要以功利的心态去参加开源,我本人就迷失过,这样会很累并且没有播种。抱着学习和摸索的心态去做可能会有意想不到的播种。

参加开源能失去什么

咱们常说做开源全凭“为爱发电”,其实是有肯定情理的,靠开源取得比拟可观的物质支出的相对来说会比拟少。然而保持参加开源肯定能取得的就是技术成长和成就感。

2022 开源之旅

后面啰嗦了一堆,总算是要进入正题了,上面就跟大家分享过来一年我在 Vue.js 生态做的一些事件和播种。

退出 VueUse 团队

咱们都晓得 Vue3 引入了组合式 API 大大晋升了逻辑复用能力,咱们能够通过封装一些组合式函数从而以较强扩展性和可维护性来实现性能逻辑。我在学习组合式 API 的时候,在社区发现了 VueUse,一个提供了实用的组合式函数汇合库,通过浏览它的设计与实现加深了我对组合式 API 的了解。在这个过程中,因为给 VueUse 做了一些微薄的奉献,在 2022/02/14 收到了 @AnthonyFu 的邀请,退出了 VueUse 团队。这对我来说不止是一个特地的情人节礼物:),它激励我持续沉闷在开源社区(我想咱们总是须要一些能源来放弃咱们后退)。对于 VueUse,我写了一篇浅谈 VueUse 设计与实现,有趣味的小伙伴能够看看。

写了一个 Vite 插件

如果说 Vue 的组合式 API 是晋升我研发体验的倚天剑,那么 Vite 肯定是那把屠龙刀。Vite 不仅快,它的插件机制实现也很有意思,在理解它的过程中,我实现了 vite-plugin-vue-inspector,它的性能是点击页面元素帮忙咱们主动关上 IDE 并跳转到相应的 Vue 组件,一次连贯 Vue 与 Vite 生态的乏味体验。这两年见证了 Vite 生态的光速倒退,我感觉其中一个起因就是得益于它易用且扩展性强的插件设计机制。

发动 Vue.js 挑战

过来我始终在寻找一个能够让每个人一起学习 Vue.js 的我的项目,所以撸了一个 Vue.js 在线挑战平台,它提供了一些题库,开发者能够在线进行挑战。通过这些挑战,咱们能够进一步理解和相熟 Vue.js,心愿它能对想学习 Vue.js 的同学有所帮忙。如果之前玩过 type-challenges 的童鞋应该会对它感到眼生,它深受 type-challenges 的启发,这个我的项目意在帮忙大家更好地理解 Vue.js,或只是单纯的享受挑战的乐趣。

应用 Vue.js 构建命令行界面

CLI 在前端工程化的利用十分多,那么有没有方法能让前端小伙伴以低成本的形式构建 CLI 利用呢?带着这个思考,继将 Vue 渲染到嵌入式液晶屏后,我将 Vue 渲染到了命令行界面上。Temir,一个应用 Vue 构建命令行界面的库,并且反对 HMR。能够让前端小伙伴像平时应用 Vue 构建 Web 利用一样来构建 CLI 利用。

用 Vue.js 写一个命令行贪吃蛇游戏

后面提到了 Temir,咱们能够应用它来打造本人的工具链,那么摸鱼神器算不算是工具链里的一类呢?:)基于 Temir,我实现了一个贪吃蛇游戏,它能够让咱们在命令行界面上玩贪吃蛇游戏(temir-snake-game)。大家平时在写 Bug 写累的时候能够来上两局(逃。

古代终端用户界面框架

Pinia 的作者 Eduardo 也在摸索应用 Vue 构建 CLI 利用的实际,因为后面有了 Temir 的实际,并且我对这块也比拟感兴趣,通过 @AnthonyFu 的连线,我跟 Eduardo 一起在推动 Vue TermUI。Vue TermUI 是一个基于 Vue.js 的终端 UI 框架,应用它能够帮忙咱们轻松构建古代终端应用程序。

npm 交互式命令行工具

一个基于 Vue TermUI 实现的 npm 交互式命令行工具,能够让咱们在命令行界面中搜寻并下载各种 JS 的 npm 包,简略易用。

在命令行界面中写代码

一个基于 Vue TermUI 实现的 Node.js 交互式解释器终端,能够帮忙咱们疾速的调试一个包和函数。与 Node.js 自带的 REPL 不一样的是它提供了代码高亮、ESM 和多行编辑的反对,同时它能够实时编码实时运行同步查看输入。

命令行界面交互式文档

咱们都晓得一个好的文档对我的项目的重要性,为了帮忙大家更好的了解与上手 Vue TermUI,我实现一个交互式文档,同时还做了实时编码和预览的反对。(体验地址)

退出 Vue.js 团队

往年的双 11 是十分难忘的一天!不是因为要过光棍节,也不是因为剁手了很多货色,而是退出了 Vue Team。圆梦!感激 @尤大的邀请~

VueConf China 2022

往年的 VueConf 因为一些起因提早到了年底,而我刚好赶上了这班车。很荣幸往年能作为演讲嘉宾参加了 VueConf,一次十分贵重的体验(PPT 地址)。感激 @sodatea 的邀请~

致谢

对我来说,这是神奇的一年,我在开源社区经验和播种了很多。这里要特别感谢:

@AnthonyFu,我从他身上学到了很多货色,同时非常感谢他在一些我的项目给予我的倡议和想法。

@Eduardo,在我和他一起推动 vue-termui 的旅程中,他的一些想法和倡议对我很有启发。(顺便一提,他的中文很不错哈哈 👇

结语

本文次要是对本人过来一年开源的回顾和总结,也心愿本人的经验能给想参加开源的小伙伴参考和帮忙。

如果我的文章对你有帮忙,欢送关注我一起折腾。

退出移动版