我們非常高興地宣布，OpenTiny Vue Playground 正式上線啦！

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

在此非常感謝 xiaoy 同學(xué)對(duì) OpenTiny Vue Playground 項(xiàng)目的貢獻(xiàn)！

xiaoy 同學(xué)是一名大三的學(xué)生，今年3月份與 OpenTiny 結(jié)緣，給我們提了很多改進(jìn)建議，并貢獻(xiàn)了 OpenTiny Vue Playground 項(xiàng)目，該項(xiàng)目主要用于在線體驗(yàn) OpenTiny 的組件，并支持以鏈接形式分享出去，這對(duì)于復(fù)現(xiàn)組件問(wèn)題非常有幫助。

以下是該項(xiàng)目支持的特性：

• 基于 @vue/repl 和 @opentiny/vue 搭建

• 支持 Vue2、Vue3

• 支持 JSX

• 支持 Less

• 支持切換 Vue / OpenTiny / TypeScript 版本

• 支持切換 CDN 源

• 支持深色模式

• 支持鏈接分享

以下是 xiaoy 同學(xué)分享的開(kāi)源經(jīng)驗(yàn)。

我的開(kāi)源經(jīng)歷

Hi，這里是 xiaoy。

我是從今年三月份開(kāi)始有了參與開(kāi)源的想法，之前一直想自己學(xué)習(xí)一下組件庫(kù)，也參考一些技術(shù)文章自己搭建了一個(gè)組件庫(kù)框架，可是后來(lái)覺(jué)得與其一個(gè)人單打獨(dú)斗，不如參與到真正的項(xiàng)目里面去，于是就萌生給組件庫(kù)提 issue 和 pr 的想法。正好，三月多看到了 OpenTiny 的宣傳，了解了這個(gè)組件庫(kù)，就覺(jué)得這個(gè)組件庫(kù)和別的不太一樣，

我覺(jué)得一個(gè)好的開(kāi)源項(xiàng)目是要有自己的設(shè)計(jì)理念在里面的。很巧的是，我當(dāng)時(shí)也在了解 vue-demi，它也是用來(lái)實(shí)現(xiàn)同時(shí)支持vue2和vue3的，于是就想進(jìn)一步的了解 OpenTiny。在三四月份，自己比較忙，沒(méi)有多少時(shí)間了解這個(gè)項(xiàng)目，同時(shí)想要給 OpenTiny 提一些 pr 也是有點(diǎn)門檻的，另外當(dāng)時(shí)我對(duì)參與開(kāi)源的流程是不清楚的，如何提pr，如何同步上游倉(cāng)庫(kù)... 那么參與開(kāi)源的想法就被擱置了。

五月份，我因事回學(xué)校，在寫(xiě)自己的項(xiàng)目的時(shí)候，一個(gè)我在項(xiàng)目里引用的 npm 包有了bug，我看了對(duì)應(yīng)倉(cāng)庫(kù)的issue，發(fā)現(xiàn)問(wèn)題不是很難，就嘗試自己修復(fù)了bug，提了 pr, 當(dāng)我的代碼被合并的時(shí)候，我內(nèi)心是十分激動(dòng)的，就這樣，我陸陸續(xù)續(xù)給一些自己遇到bug的倉(cāng)庫(kù)提了issue 和 pr，雖然只是更改了幾行代碼而已。

我之前就知道開(kāi)源之夏這個(gè)活動(dòng)，并且今年也是準(zhǔn)備要申請(qǐng)項(xiàng)目的，結(jié)果 OpenTiny 也參與了開(kāi)源之夏，這再好不過(guò)了，最后我選擇了給 OpenTiny 增加 playground 這個(gè)項(xiàng)目，也提交了項(xiàng)目申請(qǐng)書(shū)。可是因?yàn)橐恍┰?，這個(gè)項(xiàng)目不能參與開(kāi)源之夏活動(dòng)了，那我在想，規(guī)矩是死的，人是活的，我也可以不通過(guò)開(kāi)源之夏這個(gè)途徑，直接提pr也是參與開(kāi)源，接著我就聯(lián)系了 kagol 老師，后來(lái)就是實(shí)現(xiàn) OpenTiny 的 playground了。

之后，我也會(huì)持續(xù)關(guān)注 OpenTiny 組件庫(kù)的。

參與開(kāi)源，并沒(méi)有想象中的那么難，可以從一些??good first issue開(kāi)始。

從開(kāi)源中學(xué)到什么？

我現(xiàn)在是大三，如果自己參與了開(kāi)源，那么這部分經(jīng)歷寫(xiě)在簡(jiǎn)歷上，更能證明你的代碼能力，這是一部分原因。

當(dāng)我嘗試參與開(kāi)源開(kāi)始，嘗試去閱讀一些源碼，我是可以感受到自己的能力是在顯著的提升，其實(shí)當(dāng)時(shí)對(duì)于開(kāi)源之夏，我最初是想為 OpenTiny 的 tree 組件實(shí)現(xiàn)虛擬滾動(dòng)的，為此，我還順著網(wǎng)線去學(xué)習(xí) dev-ui 的tree組件源碼，還順手提了個(gè)pr，dev-ui 是通過(guò) tsx 實(shí)現(xiàn)的，另外它每個(gè)文件代碼都很少，200行左右，學(xué)習(xí)起來(lái)更簡(jiǎn)單，它的 tree 組件中一些方法的實(shí)現(xiàn)，用了 hook 的寫(xiě)法，代碼看起來(lái)是更清晰的，b站還有 kagol 老師的講解。之后我去簡(jiǎn)單了解了一下 OpenTiny 組件庫(kù)的 tree 組件，發(fā)現(xiàn)tree組件好像沒(méi)有拍平，在這種情況下為tree組件增加虛擬滾動(dòng)，對(duì)我來(lái)說(shuō)難度太大了，因此放棄。但在學(xué)習(xí)源碼的過(guò)程中，我的收獲很大，學(xué)編程的過(guò)程，就是需要不斷的寫(xiě)，可以造輪子，可以復(fù)刻 github 上感興趣的項(xiàng)目，唯一要注意的是，需要不斷突破自己的舒適區(qū)。

參與開(kāi)源會(huì)隱形地不斷 push 我自己，之前我對(duì) vue 的源碼只是停留在面試豆腐塊，可是當(dāng)我去實(shí)現(xiàn) playground這個(gè)項(xiàng)目的時(shí)候，因?yàn)?OpenTiny 是同時(shí)支持 vue2 和 vue3 的，那么 playground 也要有相同的功能，在實(shí)現(xiàn)這個(gè)需求的時(shí)候，我對(duì) vue 的源碼有了更清晰的認(rèn)識(shí)，比如編譯時(shí)干了什么，運(yùn)行時(shí)怎么做，為了讓?@vue/repl支持 vue2, 我也看了它的源碼，這是我第一次獨(dú)立的讀懂一個(gè)項(xiàng)目的源碼，真的成就感滿滿，同時(shí)做開(kāi)源和寫(xiě)自己的項(xiàng)目不一樣，使用這個(gè)項(xiàng)目的人很多，那么考慮的細(xì)節(jié)也就很多，代碼不要有一些壞味道，這也無(wú)形中提升了我的能力，也讓我更用心的去打磨一個(gè)項(xiàng)目。

以上就是 xiaoy 同學(xué)的開(kāi)源經(jīng)驗(yàn)，也歡迎你參與到 OpenTiny 開(kāi)源中來(lái)??，一起共建項(xiàng)目，一起研討前端技術(shù)。

xiaoy 同學(xué)也是一位熱愛(ài)技術(shù)的程序媛，以下是她的博客地址：

• 博客：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 ??）

關(guān)于 OpenTiny

OpenTiny 是一套華為云出品的企業(yè)級(jí)組件庫(kù)解決方案，適配 PC 端 / 移動(dòng)端等多端，涵蓋 Vue2 / Vue3 / Angular 多技術(shù)棧，擁有主題配置系統(tǒng) / 中后臺(tái)模板 / CLI 命令行等效率提升工具，可幫助開(kāi)發(fā)者高效開(kāi)發(fā) Web 應(yīng)用。

核心亮點(diǎn)：

1. 跨端跨框架：使用 Renderless 無(wú)渲染組件設(shè)計(jì)架構(gòu)，實(shí)現(xiàn)了一套代碼同時(shí)支持 Vue2 / Vue3，PC / Mobile 端，并支持函數(shù)級(jí)別的邏輯定制和全模板替換，靈活性好、二次開(kāi)發(fā)能力強(qiáng)。

2. 組件豐富：PC 端有80+組件，移動(dòng)端有30+組件，包含高頻組件 Table、Tree、Select 等，內(nèi)置虛擬滾動(dòng)，保證大數(shù)據(jù)場(chǎng)景下的流暢體驗(yàn)，除了業(yè)界常見(jiàn)組件之外，我們還提供了一些獨(dú)有的特色組件，如：Split 面板分割器、IpAddress IP地址輸入框、Calendar 日歷、Crop 圖片裁切等

3. 配置式組件：組件支持模板式和配置式兩種使用方式，適合低代碼平臺(tái)，目前團(tuán)隊(duì)已經(jīng)將 OpenTiny 集成到內(nèi)部的低代碼平臺(tái)，針對(duì)低碼平臺(tái)做了大量?jī)?yōu)化

4. 周邊生態(tài)齊全：提供了基于 Angular + TypeScript 的 TinyNG 組件庫(kù)，提供包含 10+ 實(shí)用功能、20+ 典型頁(yè)面的 TinyPro 中后臺(tái)模板，提供覆蓋前端開(kāi)發(fā)全流程的 TinyCLI 工程化工具，提供強(qiáng)大的在線主題配置平臺(tái) TinyTheme

聯(lián)系我們：

• 官方公眾號(hào)：OpenTiny

• OpenTiny 官網(wǎng)：https://opentiny.design/

• OpenTiny 代碼倉(cāng)庫(kù)：https://github.com/opentiny/

• Vue 組件庫(kù)：https://github.com/opentiny/tiny-vue?（歡迎 Star）

• Angluar組件庫(kù)：https://github.com/opentiny/ng?（歡迎 Star）

• CLI工具：https://github.com/opentiny/tiny-cli?（歡迎 Star）

更多視頻內(nèi)容也可以關(guān)注OpenTiny社區(qū)，B站/抖音/小紅書(shū)/視頻號(hào)。