我们非常高兴地宣布,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 )

往期文章推荐

但因热爱,愿迎万难,OpenTiny 社区增加一枚前端程序媛贡献者🎉的更多相关文章

  1. No-Touch Integration 在SharePoint中使用社区支持的Silverlight应用程序

    No-Touch Integration 在SharePoint中使用社区支持的Silverlight应用程序         No-Touch Integration应该是最简单的方法了.将Silv ...

  2. 重磅!华为云社区·CSDN【寻找黑马程序员】有奖征文活动奖项公布!!

    华为云社区·CSDN[寻找黑马程序员]第一期有奖征文活动在大家的鼎力支持下顺利落幕啦,非常感谢大家一直以来的支持~现在小宅就要隆重公布本次活动的奖项了!! 请各位获奖的伙伴在8月18日前私信联系提供联 ...

  3. 副业收入是我做程序媛的3倍,工作外的B面人生

    到“程序员”,多数人脑海里首先想到的大约是:为人木讷.薪水超高.工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是 ...

  4. 面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序

    面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序 Ajax 为更好的 Web 应用程序铺平了道路 在 Web 应用程序开发中,页面重载循环是最大的一个使用障碍,对于 Java™ ...

  5. 弄啥嘞?热爱你的Bug

    有人喜欢创造世界,他们做了开发者:有的人喜欢开发者,他们做了测试员.什么是软件测试?软件测试就是一场本该在用户面前发生的灾难提前在自己面前发生了,这会让他们生出一种救世主的感觉,拯救了用户,也就拯救者 ...

  6. OpenTiny 跨端、跨框架组件库升级TypeScript,10万行代码重获新生

    摘要:一份精心准备的<JS项目改造TS指南>文档供大家参考,顺便介绍TS 基础知识和 TS 在 Vue 中的实践. 本文分享自华为云社区<历史性的时刻!OpenTiny 跨端.跨框架 ...

  7. 参与开源之夏 x OpenTiny 跨端跨框架 UI 组件库贡献,可以赢取奖金🏆!这份《OpenTiny 开源贡献指南》请收好🎁!

    大家好,我是 Kagol. 近期有几位朋友在 OpenTiny 技术交流群里询问我们在开源之夏(OSPP)的项目,希望能提前做一些准备工作. 这里给大家简单介绍下开源之夏. 开源之夏是由中科院软件所& ...

  8. Vim 中文社区:期待你的加入

    我们的愿景 Vim 中文社区一直比较零散,缺少凝聚力,现有的一些群经常也是水的可以的,讨论各种无关紧要的内容,于是导致很大一部分人,将这些群丢入了群助手,渐渐地他们也淡出了 vim 中文社区. 而我理 ...

  9. 华为云 OpenTiny 跨端、跨框架企业级开源组件库项目落地实践直播即将开启!

    大家好,我是 Kagol,公众号:前端开源星球. "你们这个产品怎么只能在电脑上适配呀?我想在手机上看都不行,太麻烦了!!" "你们这个产品看起来太简单了,我想要@@功能 ...

  10. 程序员的复仇:11行代码如何让Node.js社区鸡飞狗跳

    来源自:http://www.techug.com/node-js-community 几天前,一名 NPM(Node.js Package Manager)社区的贡献者 Azer Koçulu 出于 ...

随机推荐

  1. MySQL(Zip版)安装配置

    MySQL官网下载地址:MySQL 将压缩包内文件夹解压至任意目录,以mysql-5.7.40版本为例 第一步 添加环境变量 将mysql-5.7.40-winx64文件夹内的bin文件夹添加到环境变 ...

  2. 自建CA和公共CA有什么不同?

    据统计,全球有数百个公共CA,通常它们是按国家地区进行划分的.这类CA受大众的广泛认可和使用,也被称为公共信任的证书颁发机构.但是由于一些大型企业拥有许多站点,为了更轻松高效的管理以及考虑到维护成本, ...

  3. 2022-10-07:给定员工的 schedule 列表,表示每个员工的工作时间。 每个员工都有一个非重叠的时间段 Intervals 列表,这些时间段已经排好序。 返回表示 所有 员工的 共同,正

    2022-10-07:给定员工的 schedule 列表,表示每个员工的工作时间. 每个员工都有一个非重叠的时间段 Intervals 列表,这些时间段已经排好序. 返回表示 所有 员工的 共同,正数 ...

  4. 2022-08-30:给你一个字符串化学式 formula ,返回 每种原子的数量 。 原子总是以一个大写字母开始,接着跟随 0 个或任意个小写字母,表示原子的名字。 如果数量大于 1,原子后会跟着数

    2022-08-30:给你一个字符串化学式 formula ,返回 每种原子的数量 . 原子总是以一个大写字母开始,接着跟随 0 个或任意个小写字母,表示原子的名字. 如果数量大于 1,原子后会跟着数 ...

  5. Django笔记四十之运行Django环境的python脚本

    本文首发于公众号:Hunter后端 原文链接:Django笔记四十之运行Django环境的python脚本 这一篇笔记介绍如何在 Django 中运行脚本. 假设说我们要实现一个功能,需要获取 blo ...

  6. .NET6项目连接数据库方式方法

    前言 接上一篇Linux系统下创建dotnet项目,这一篇我们聊聊.NET6环境下dotnet项目连接数据库的方式方法,包括数据库字符串该如何配置.看了很多博主写的文章,连接数据库字符串配置的方式和位 ...

  7. SpringMVC 解决中文乱码问题以及前后端Json格式数据交互的测试

    1.今日遇到的报错: 跳转网页出现404原因: 1.检查project structure里面的webapp路径是否正确: 2.检查project structure里的artifaccts里的WEB ...

  8. java(方法定义、调用、重载)

    1.方法 Java方法是语句的集合,它们在一起执行一个功能 方法是解决一类问题的步骤的有序组合 方法包含于类或对象中 方法在程序中被创建,在其他地方被引用 设计方法的原则:就是一个方法只完成一个功能, ...

  9. Kubernetes(k8s)定时任务:CronJob

    目录 一.系统环境 二.前言 三.Kubernetes CronJob简介 四.kubernetes CronJob和Linux crontab对比 五.CronJob表达式语法 六.创建CronJo ...

  10. spring-boot集成mybatis真的很简单吗?

    在日常的后端开发中,使用mybatis作为DAO层的持久框架已经是惯例.但很多时候都是在别人搭好的框架中进行开发,对怎么搭建环境是一知半解,今天就来实践下. 一.集成分哪些步骤 来看下集成mybati ...