但因热爱,愿迎万难,OpenTiny Vue Playground正式上线

但因热爱,愿迎万难,OpenTiny Vue Playground正式上线🎉

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

链接:opentiny.github.io/tiny-vue-pl...

在此非常感谢 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 源码地址:github.com/opentiny/ti... 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社区,B站/抖音/小红书/视频号。

相关推荐
zhougl9961 小时前
html处理Base文件流
linux·前端·html
花花鱼1 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_1 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo3 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之4 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端4 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡4 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木5 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!6 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷6 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript