但因热爱,愿迎万难,OpenTiny Vue Playground正式上线🎉
我们非常高兴地宣布,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 同学也是一位热爱技术的程序媛,以下是她的博客地址:
- 博客:https://mengqiuleo.github.io/portfolio
- GitHub:https://github.com/mengqiuleo
- CSDN:https://blog.csdn.net/weixin_52834435
OpenTiny Vue Playground 源码地址:https://github.com/opentiny/tiny-vue-playground(欢迎 Star 🌟)
关于 OpenTiny
OpenTiny 是一套华为云出品的企业级组件库解决方案,适配 PC 端 / 移动端等多端,涵盖 Vue2 / Vue3 / Angular 多技术栈,拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具,可帮助开发者高效开发 Web 应用。
核心亮点:
跨端跨框架
:使用 Renderless 无渲染组件设计架构,实现了一套代码同时支持 Vue2 / Vue3,PC / Mobile 端,并支持函数级别的逻辑定制和全模板替换,灵活性好、二次开发能力强。组件丰富
:PC 端有80+组件,移动端有30+组件,包含高频组件 Table、Tree、Select 等,内置虚拟滚动,保证大数据场景下的流畅体验,除了业界常见组件之外,我们还提供了一些独有的特色组件,如:Split 面板分割器、IpAddress IP地址输入框、Calendar 日历、Crop 图片裁切等配置式组件
:组件支持模板式和配置式两种使用方式,适合低代码平台,目前团队已经将 OpenTiny 集成到内部的低代码平台,针对低码平台做了大量优化周边生态齐全
:提供了基于 Angular + TypeScript 的 TinyNG 组件库,提供包含 10+ 实用功能、20+ 典型页面的 TinyPro 中后台模板,提供覆盖前端开发全流程的 TinyCLI 工程化工具,提供强大的在线主题配置平台 TinyTheme
联系我们:
- 官方公众号:
OpenTiny
- OpenTiny 官网:https://opentiny.design/
- OpenTiny 代码仓库:https://github.com/opentiny/
- Vue 组件库:https://github.com/opentiny/tiny-vue (欢迎 Star)
- Angluar组件库:https://github.com/opentiny/ng (欢迎 Star)
- CLI工具:https://github.com/opentiny/tiny-cli (欢迎 Star)
更多视频内容也可以关注OpenTiny社区,B站/抖音/小红书/视频号。