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

但因热爱，愿迎万难，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 应用。

核心亮点：

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 官网：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站/抖音/小红书/视频号。