感恩有你|恭喜 OpenTiny Vue 開源組件庫喜迎1000+star?。?！
OpenTiny社區(qū)的 TinyVue 組件庫終于突破1000+star~
感謝所有支持 OpenTiny 開源社區(qū)的朋友們！
對此，參與 OpenTiny 開源的各位項目成員也是十分激動和開心~因此也是在內(nèi)部進行了一個小小的慶祝。同時大家也希望持續(xù)不斷的將項目做的越來越好，拓展其能力邊界，讓更多開發(fā)者受益，幫助大家高效搭建web頁面！共建開源生態(tài)~
大家也一起喊出了對于 OpenTiny 的期待。
TinyVue 組件庫開源歷程
2023年2月16日，OpenTiny Vue 組件庫正式開源。
和業(yè)界組件庫相比，TinyVue?最大的特色就是使用 Renderless 無渲染組件設計架構(gòu)，實現(xiàn)了一套代碼同時支持 Vue2 / Vue3 / React，支持 PC / Mobile 端，并支持函數(shù)級別的邏輯定制和全模板替換，靈活性好、二次開發(fā)能力強。
我們擁有更豐富的組件，目前組件數(shù)量已經(jīng)超過100個，除了業(yè)界常見組件之外，我們還提供了一些獨有的特色組件，如：Split 面板分割器、IpAddress IP 地址輸入框、Calendar 日歷、Crop 圖片裁切等。
經(jīng)過9個多月的持續(xù)打磨，我們發(fā)布了6個大版本，支持了更加豐富的特性，能力更強、體驗更好。
完成 Monorepo 和 TypeScript 工程改造
支持 Vue2.7
支持 VitePress 服務端渲染
官網(wǎng)提供 Composition API 寫法的示例
提供 Playground 代碼演練場
提供 XDesign / Aurora / Infinite 3套新主題
增加 RichTextEditor / ColorPicker / Anchor / Guide 等13個新組件
開源不易，請給?TinyVue?點個 Star ? 鼓勵下，感謝你對我們 OpenTiny 的大力支持??
源碼：https://github.com/opentiny/tiny-vue
1、圍繞開發(fā)者需求，不斷完善自身能力
開源的 9 個多月以來，我們收到了非常多友好、耐心的開發(fā)者的反饋，這些寶貴的反饋意見對于我們優(yōu)化 TinyVue 組件庫，打造真正有競爭力的開源項目提供了非常大的幫助，感謝所有耐心地給我們 TinyVue 提交 Issue 的開發(fā)者們??
1.1 Monorepo 和 TypeScript 工程改造
今年2月份剛開源時，我們的項目結(jié)構(gòu)還不是 Monorepo 工程，整個組件庫分成了 4 個倉庫：
tiny-vue // 組件模板
tiny-vue-renderless // 組件邏輯
tiny-theme // PC端組件樣式
tiny-theme-mobile // 移動端組件樣式
這樣會帶來以下問題：
第一次 clone 代碼比較麻煩，需要 clone 4個倉庫的代碼
clone 完代碼之后，還需要切換 develop 分支 4 次，npm i 安裝 4 次依賴包
這 4 個工程安裝的依賴包如果有重復的，會在各自的工程目錄下安裝多次，導致更多的磁盤空間占用
增加新組件或給組件增加新特性，一般都會涉及模板/邏輯/樣式的同時修改，提交 MR 時需要在三個倉庫都提交一個MR，不太方便
填寫 MR 的描述信息時也需要在多個倉庫填寫多次
檢視 MR?時也需要在多個倉庫進行檢視、提交檢視意見，比較分散
由于我們是一個開源項目，希望能夠團結(jié)社區(qū)開發(fā)者一起共同建設，肯定希望大家參與貢獻的門檻盡可能降低，貢獻的體驗盡可能流暢，所以我們在 3 月份對項目進行了一次大改造，將原來分散在 4 個代碼倉庫的代碼集中到一個倉庫，通過 Monorepo 方式進行管理。除此之外，我們還將原來的 JavaScript 工程改造成了 TypeScript 工程，并在持續(xù)補充組件的 TypeScript 類型聲明。
目前組件 TypeScript 類型聲明還未全部補充完，歡迎朋友們一起參與貢獻。#370
1.2 支持 Vue 2.7
說來慚愧，支持 Vue 2.7 的訴求從今年 4 月份就有人提?#141，我們在最近的大版本 v2.11.0 才正式支持。
OpenTiny Vue 支持 Vue2.7 啦！
Vue2.7 是升級 Vue3 的一個過渡版本，支持了 Composition API 寫法，相較于 Vue2.6 差異較大，并且目前是 Vue 2.x 的默認版本，在 Vue2 項目中默認會安裝 Vue 2.7.x，這時安裝和使用 TinyVue v2.x 版本，項目會報錯。
v2.11.0 版本之后將不再有這個問題，歡迎還在使用 Vue2 的朋友們體驗和使用。
1.3 官網(wǎng)提供 Composition API 寫法的示例
TinyVue 是一個能同時支持 Vue2 和 Vue3 的組件庫，但是之前我們官網(wǎng)的組件 Demo 只有 Options API 的版本，使用 Vue3 的開發(fā)者會覺得很不方便，拷貝 Demo 代碼之后還需要手動轉(zhuǎn)換成 Composition API 的寫法。
于是我們優(yōu)化了文檔的呈現(xiàn)，參考 Vue 官網(wǎng)，增加了 Options(選項式) 和 Composition(組合式) 兩種寫法的切換。
歡迎朋友們到我們官網(wǎng)體驗：https://opentiny.design/tiny-vue/zh-CN/os-theme/components/button
1.4 提供 Playground 代碼演練場
早期我們的組件 Demo 代碼是可以直接在頁面上編輯，然后查看組件渲染效果的，但是編輯之后的代碼沒法通過鏈接形式分享出來。
我們?nèi)鄙俅a演練場功能，這個問題4月份就有朋友提 Issue #182，8月初，xiaoy?同學給我們貢獻了 TinyVue Playground 項目。
但因熱愛，愿迎萬難，OpenTiny Vue Playground正式上線??
我們將這個項目集成到了 TinyVue 的官網(wǎng)，現(xiàn)在你可以在每個組件 Demo 的右上角點擊“打開演練場”的按鈕，在演練場中編輯這個 Demo，實時查看修改后的組件效果，并通過鏈接形式分享出去。
這樣提交 Issue 時，可以在 Playground 中實現(xiàn)最小可復現(xiàn) Demo，并將鏈接貼到 Issue 描述中，大大降低了溝通成本，提升了缺陷修復的效率。
1.5 四套主題，總有一套是你喜歡的
為了滿足不同業(yè)務的需求，我們內(nèi)置了四套主題，大家可以挑選自己喜歡的一款，如果這四套主題依然沒有一款能完全符合自己的要求，你也可以基于現(xiàn)有主題，修改部分主題變量，擴展出一套自己的主題，或者從0到1自定義一套主題，都是可以的。
具體如何自定義主題，可以參考以下文章：
自定義 TinyVue 主題
溫馨提醒：主題切換入口在組件頁面右上角
歡迎朋友們在 TinyVue 官網(wǎng)體驗不同主題：https://opentiny.design/tiny-vue/zh-CN/os-theme/components/button
1.6 更加豐富的組件
有很多開發(fā)者在 Issue 給我們提出新組件的訴求，經(jīng)過仔細評估，我們實現(xiàn)了其中一部分通用的組件。
Anchor 錨點 by?@chenxi-20
CalendarView 日歷視圖 by?@kagol
ColorPicker 顏色選擇器 by GaoNeng-wWw
ConfigProvider 全局設置 by GaoNeng-wWw
Divider 分隔線 by?@vaebe
Drawer 抽屜 by?@Huangyilin19
Guide 引導 by?@yuanningning
PopConfirm 確認框 by?@gimmyhehe
RichTextEditor 富文本編輯器 by Caesar-ch
...
還有好多組件未實現(xiàn)，歡迎感興趣的朋友們一起參與共建！
Skeleton 骨架屏?#355
BackTop 回到頂部?#576
TagInput 標簽輸入框
LoadingBar 加載進度條?#724
Card 卡片
Chat 對話組件
IpSection 分段IP輸入框
Video 視頻播放?#294
Mindmap 思維導圖?#312
ProcessDesigner 流程設計器?#363
如果你想?yún)⑴c TinyVue 項目貢獻，可以在對應的 Issue 下評論認領，并仔細閱讀我們的貢獻指南。
2、酒香也怕巷子深
俗話說：酒香不怕巷子深，但是在前端組件庫開源方面可能不太適用，近幾年開源的前端組件庫越來越多，這其實是一件好事，百花齊放，前端人也有更多的選擇。
但是不熟悉這些組件庫的開發(fā)者會覺得這些組件庫好像都差不多，何必又要重復造輪子呢？
因此有必要做一些宣傳，讓大家了解 TinyVue 組件庫的核心設計理念，TinyVue 與其他組件庫的不同，有什么競爭優(yōu)勢。
2.1 開發(fā)者大會
從今年4月份開始，OpenTiny 參加了17場開發(fā)者大會、開源峰會、高校行活動，包括：
5.13 重慶的開源未來發(fā)展峰會
5.27 上海的 GOTC
6.11 北京的開放原子全球峰會
? 7.7 東莞的?HDC 大會
9.20 上海的?HC 大會
9.26 上海的 KubeCon China
10.24 長沙的中國程序員節(jié)
10.28 成都的中國開源年會
...
通過在大會分享議題，我們能將 TinyVue 的理念傳遞給廣泛的開發(fā)者；通過展臺互動，我們可以近距離與開發(fā)者互動，給大家分享 OpenTiny 的獨特優(yōu)勢，傾聽開發(fā)者的聲音，了解用戶的痛點問題；通過編程訓練營，可以帶著開發(fā)者一起體驗 TinyVue 組件，快速搭建 Web 應用。
值得一提的是，7月份在東莞華為溪村的 HDC 大會真是一場開發(fā)者的盛宴，各種開發(fā)者活動非常豐富，只要你有心，可以學到很多技術(shù)知識，認識超多業(yè)界大佬，哪怕只是去“歐洲小鎮(zhèn)”逛一圈，我覺得也是非常值得推薦的。
雖然那幾天天氣很熱，也很累，但是卻是非常難忘的一段經(jīng)歷，OpenTiny 有演講議題、展臺、訓練營和挑戰(zhàn)賽，參加人數(shù)都非常多，開發(fā)者們都很活躍。
非常高興，TinyVue 也是在 HDC 大會上正式進行發(fā)布！
OpenTiny 前端組件庫正式開源啦！面向未來，為開發(fā)者而生
大家可以關(guān)注?OpenTiny?公眾號，隨時掌握 OpenTiny 最新活動動態(tài)。
2.2 直播
除了線下開發(fā)者大會之外，線上直播也是一種向開發(fā)者傳遞項目價值的方式，今年共做了 8 次直播。
華為云DTT直播 2 次
與前端知名UP主前端楊村長聯(lián)合直播 3 次
與 ToB Dev / Dooring 低代碼聯(lián)合直播 1 次
受邀參加中國開源社區(qū) landscape 直播分享 1 次
自主策劃 TinyEngine 線上答疑 1 次
大家感興趣可以關(guān)注 OpenTiny 的B站賬號，我們會將直播的錄播視頻上傳上去。
OpenTiny B站：space.bilibili.com/15284299
2.3 寫文章
相比參加開發(fā)者大會和組織直播活動，寫文章相對比較容易，并且寫文章能夠更加全面、細致地傳遞開源項目價值，也是一種細水長流的傳播方式，門檻相對也比較低，幾乎任何人都可以做。
從4月份我們發(fā)布第一篇 OpenTiny 的介紹文章至今，共發(fā)布了75篇文章，平均每周2篇。其中有關(guān)于大前端技術(shù)知識、OpenTiny 技術(shù)內(nèi)容、OpenTiny 實時動態(tài)、OpenTiny 版本更新等內(nèi)容~都是體驗技術(shù)團隊成員自己在實戰(zhàn)中的總結(jié)及心血，想了解的同學也可以關(guān)注下 OpenTiny 公眾號。
開源不易，寫文章也不易，也給我們 TinyVue 開源項目點個 Star 鼓勵下??
https://github.com/opentiny/tiny-vue
感謝朋友們對 TinyVue 的支持！
如果你有一個開源項目，千萬不能抱著酒香不怕巷子深的觀念，而是積極主動地走出去，接觸廣大的開發(fā)者，不斷對外宣傳你的開源項目的價值和核心優(yōu)勢，讓大家了解你的開源項目，讓大家評判你的開源項目，讓大家使用你的開源項目。
3、規(guī)劃
2024年我們將繼續(xù)根據(jù)用戶需求優(yōu)化組件庫。
一方面繼續(xù)完善組件庫能力，提供更多實用組件和特性，滿足更廣泛的業(yè)務場景；
另一方面持續(xù)優(yōu)化組件庫工程架構(gòu)和質(zhì)量，完善組件的 TypeScript 類型聲明、E2E測試用例、單元測試用例。
以下是我們2024年的規(guī)劃。
3.1 新特性
根據(jù)用戶提交的 Issue 持續(xù)修復組件缺陷、完善組件能力。
新組件：
Skeleton 骨架屏?#355
BackTop 回到頂部?#576
TagInput 標簽輸入框
LoadingBar 加載進度條?#724
Card 卡片
Chat 對話組件
IpSection 分段IP輸入框
Video 視頻播放?#294
Mindmap 思維導圖?#312
ProcessDesigner 流程設計器?#363
新特性：
支持 Nuxt3?#577
支持 unplugin-vue-components?#304
支持深色主題?#415
Tree 支持虛擬滾動?#256?#317
RichTextEditor 富文本組件功能增強
CalendarView 組件功能增強
3.2 工程優(yōu)化
工程優(yōu)化的目的是提升質(zhì)量和效率，主要包含以下幾個方面：
完善組件的 TypeScript 類型聲明?#370
優(yōu)化組件的 Demo/API 文檔?#484
完善 E2E 測試用例
完善單元測試用例?#206
Grid 組件抽離 renderless 邏輯層
3.3 生態(tài)擴展
2023年我們完成了 TinyReact 組件庫的基礎適配，包括基礎版本的 React 適配層、本地開發(fā)和部署流程，提供了 Button / Alert / Switch / Badge 4個組件，并發(fā)布第一個 alpha 版本。
2024年我們將持續(xù)擴展組件庫生態(tài)，主要包含：
持續(xù)完善 TinyReact 組件庫，完善 react-common 適配層，增加更豐富的組件模板
適配?openInula?框架，增加 inula-common 適配層
完善移動端組件庫并部署官網(wǎng)，為?TinyEngine?低代碼引擎提供移動端組件物料
探索和擴展?Solid?/?Svelte?等新興框架的組件庫
歡迎廣大開發(fā)者朋友一起參與 TinyVue 開源共建！
如果你有意向參與 TinyVue 開源貢獻，請在對應的 Issue 下面評論，并在參與貢獻之前閱讀貢獻指南
最后，再一次感謝所有支持 OpenTiny 的朋友們！
關(guān)于 OpenTiny
OpenTiny 是一套企業(yè)級 Web 前端開發(fā)解決方案，提供跨端、跨框架、跨版本的 TinyVue 組件庫，包含基于 Angular+TypeScript 的 TinyNG 組件庫，擁有靈活擴展的低代碼引擎 TinyEngine，具備主題配置系統(tǒng)TinyTheme / 中后臺模板 TinyPro/ TinyCLI 命令行等豐富的效率提升工具，可幫助開發(fā)者高效開發(fā) Web 應用。
歡迎加入 OpenTiny 開源社區(qū)。添加微信小助手：opentiny-official 一起參與交流前端技術(shù)～
OpenTiny 官網(wǎng)：https://opentiny.design/
OpenTiny 代碼倉庫：https://github.com/opentiny/
TinyEngine 源碼：?https://github.com/opentiny/tiny-engine
歡迎進入代碼倉庫 Star??TinyEngine、TinyVue、TinyNG、TinyCLI~
如果你也想要共建，可以進入代碼倉庫，找到?good first issue標簽，一起參與開源貢獻~
