但因热爱,愿迎万难,OpenTiny 社区增加一枚前端程序媛贡献者🎉

原创
2023/08/03 07:45
阅读数 6.2K

我们非常高兴地宣布,OpenTiny Vue Playground 正式上线!

链接:https://opentiny.github.io/tiny-vue-playground/

在此非常感谢 xiaoy 同学对 OpenTiny Vue Playground 项目的贡献!

xiaoy 同学是一名大三的学生,今年3月份与 OpenTiny 结缘,给我们提了很多改进建议,并贡献了 OpenTiny Vue Playground 项目,该项目主要用于在线体验 OpenTiny 的组件,并支持以链接形式分享出去,这对于复现组件问题非常有帮助。

以下是该项目支持的特性:

  • 基于 @vue/repl 和 @opentiny/vue 搭建
  • 支持 Vue2、Vue3
  • 支持 JSX
  • 支持 Less
  • 支持切换 Vue / OpenTiny / TypeScript 版本
  • 支持切换 CDN 源
  • 支持深色模式
  • 支持链接分享

以下是 xiaoy 同学的开源经验。

我的开源经历

Hi,这里是 xiaoy。

我是从今年三月份开始有了参与开源的想法,之前一直想自己学习一下组件库,也参考一些技术文章自己搭建了一个组件库框架,可是后来觉得与其一个人单打独斗,不如参与到真正的项目里面去,于是就萌生给组件库提 issue 和 pr 的想法。正好,三月多看到了 opentiny 的宣传,了解了这个组件库,就觉得这个组件库和别的不太一样,

我觉得一个好的开源项目是要有自己的设计理念在里面的。很巧的是,我当时也在了解 vue-demi,它也是用来实现同时支持vue2和vue3的,于是就想进一步的了解 opentiny。在三四月份,自己比较忙,没有多少时间了解这个项目,同时想要给 opentiny 提一些 pr 也是有点门槛的,另外当时我对参与开源的流程是不清楚的,如何提pr,如何同步上游仓库... 那么参与开源的想法就被搁置了。

五月份,我因事回学校,在写自己的项目的时候,一个我在项目里引用的 npm 包有了bug,我看了对应仓库的issue,发现问题不是很难,就尝试自己修复了bug,提了 pr, 当我的代码被合并的时候,我内心是十分激动的,就这样,我陆陆续续给一些自己遇到bug的仓库提了issue 和 pr,虽然只是更改了几行代码而已。

我之前就知道开源之夏这个活动,并且今年也是准备要申请项目的,结果 opentiny 也参与了开源之夏,这再好不过了,最后我选择了给 opentiny 增加 playground 这个项目,也提交了项目申请书。可是因为一些原因,这个项目不能参与开源之夏活动了,那我在想,规矩是死的,人是活的,我也可以不通过开源之夏这个途径,直接提pr也是参与开源,接着我就联系了 kagol 老师,后来就是实现 opentiny 的 playground了。

之后,我也会持续关注 opentiny 组件库的。

参与开源,并没有想象中的那么难,可以从一些 good first issue开始。

从开源中学到什么?

我现在是大三,如果自己参与了开源,那么这部分经历写在简历上,更能证明你的代码能力,这是一部分原因。

当我尝试参与开源开始,尝试去阅读一些源码,我是可以感受到自己的能力是在显著的提升,其实当时对于开源之夏,我最初是想为 opentiny 的 tree 组件实现虚拟滚动的,为此,我还顺着网线去学习 dev-ui 的tree组件源码,还顺手提了个pr,dev-ui 是通过 tsx 实现的,另外它每个文件代码都很少,200行左右,学习起来更简单,它的 tree 组件中一些方法的实现,用了 hook 的写法,代码看起来是更清晰的,b站还有 kagol 老师的讲解。之后我去简单了解了一下 opentiny 组件库的 tree 组件,发现tree组件好像没有拍平,在这种情况下为tree组件增加虚拟滚动,对我来说难度太大了,因此放弃。但在学习源码的过程中,我的收获很大,学编程的过程,就是需要不断的写,可以造轮子,可以复刻 github 上感兴趣的项目,唯一要注意的是,需要不断突破自己的舒适区。

参与开源会隐形地不断 push 我自己,之前我对 vue 的源码只是停留在面试豆腐块,可是当我去实现 playground这个项目的时候,因为 opentiny 是同时支持 vue2 和 vue3 的,那么 playground 也要有相同的功能,在实现这个需求的时候,我对 vue 的源码有了更清晰的认识,比如编译时干了什么,运行时怎么做,为了让 @vue/repl支持 vue2, 我也看了它的源码,这是我第一次独立的读懂一个项目的源码,真的成就感满满,同时做开源和写自己的项目不一样,使用这个项目的人很多,那么考虑的细节也就很多,代码不要有一些坏味道,这也无形中提升了我的能力,也让我更用心的去打磨一个项目。

以上就是 xiaoy 同学的开源经验,也欢迎你参与到 OpenTiny 开源中来👏

xiaoy 同学也是一位热爱技术的程序媛,以下是她的博客地址:

OpenTiny Vue Playground 源码地址:https://github.com/opentiny/tiny-vue-playground(欢迎 Star 🌟)

关于 OpenTiny

OpenTiny 是一套华为云出品的企业级组件库解决方案,适配 PC 端 / 移动端等多端,涵盖 Vue2 / Vue3 / Angular 多技术栈,拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具,可帮助开发者高效开发 Web 应用。

核心亮点:

  1. 跨端跨框架:使用 Renderless 无渲染组件设计架构,实现了一套代码同时支持 Vue2 / Vue3,PC / Mobile 端,并支持函数级别的逻辑定制和全模板替换,灵活性好、二次开发能力强。
  2. 组件丰富:PC 端有80+组件,移动端有30+组件,包含高频组件 Table、Tree、Select 等,内置虚拟滚动,保证大数据场景下的流畅体验,除了业界常见组件之外,我们还提供了一些独有的特色组件,如:Split 面板分割器、IpAddress IP地址输入框、Calendar 日历、Crop 图片裁切等
  3. 配置式组件:组件支持模板式和配置式两种使用方式,适合低代码平台,目前团队已经将 OpenTiny 集成到内部的低代码平台,针对低码平台做了大量优化
  4. 周边生态齐全:提供了基于 Angular + TypeScript 的 TinyNG 组件库,提供包含 10+ 实用功能、20+ 典型页面的 TinyPro 中后台模板,提供覆盖前端开发全流程的 TinyCLI 工程化工具,提供强大的在线主题配置平台 TinyTheme

欢迎加入 OpenTiny 开源社区。

添加微信小助手:opentiny-official,一起参与共建!

OpenTiny 官网:https://opentiny.design/

Vue组件库https://opentiny.design/tiny-vue

Angular组件库https://opentiny.design/tiny-ng

OpenTiny 代码仓库:https://github.com/opentiny/ (欢迎 Star ⭐)

往期文章推荐

展开阅读全文
加载中
点击加入讨论🔥(3) 发布并加入讨论🔥
打赏
3 评论
0 收藏
0
分享
返回顶部
顶部