OpenTiny社区的 TinyVue 组件库终于突破1000+star~
感谢所有支持 OpenTiny 开源社区的朋友们！

对此，参与 OpenTiny 开源的各位项目成员也是十分激动和开心，因此也是在内部进行了一个小小的庆祝。同时大家也希望持续不断的将项目做的越来越好，拓展其能力边界，让更多开发者受益，帮助大家高效搭建web页面！共建开源生态~

大家也一起喊出了对于 OpenTiny 的期待。

TinyVue 组件库开源历程

2023年2月16日，OpenTiny Vue 组件库正式开源。

和业界组件库相比，TinyVue 最大的特色就是使用 Renderless 无渲染组件设计架构，实现了一套代码同时支持 Vue2 / Vue3 / React，支持 PC / Mobile 端，并支持函数级别的逻辑定制和全模板替换，灵活性好、二次开发能力强。

我们拥有更丰富的组件，目前组件数量已经超过100个，除了业界常见组件之外，我们还提供了一些独有的特色组件，如：Split 面板分割器、IpAddress IP 地址输入框、Calendar 日历、Crop 图片裁切等。

经过9个多月的持续打磨，我们发布了6个大版本，支持了更加丰富的特性，能力更强、体验更好。

1. 完成 Monorepo 和 TypeScript 工程改造
2. 支持 Vue2.7
3. 支持 VitePress 服务端渲染
4. 官网提供 Composition API 写法的示例
5. 提供 Playground 代码演练场
6. 提供 XDesign / Aurora / Infinite 3套新主题
7. 增加 RichTextEditor / ColorPicker / Anchor / Guide 等13个新组件

开源不易，请给 TinyVue 点个 Star ⭐ 鼓励下，感谢你对我们 OpenTiny 的大力支持🌹

源码：https://github.com/opentiny/tiny-vue

1、围绕开发者需求，不断完善自身能力

开源的 9 个多月以来，我们收到了非常多友好、耐心的开发者的反馈，这些宝贵的反馈意见对于我们优化 TinyVue 组件库，打造真正有竞争力的开源项目提供了非常大的帮助，感谢所有耐心地给我们 TinyVue 提交 Issue 的开发者们🌹

****

1.1 Monorepo 和 TypeScript 工程改造

今年2月份刚开源时，我们的项目结构还不是 Monorepo 工程，整个组件库分成了 4 个仓库：

1. tiny-vue // 组件模板
2. tiny-vue-renderless // 组件逻辑
3. tiny-theme // PC端组件样式
4. tiny-theme-mobile // 移动端组件样式

这样会带来以下问题：

1. 第一次 clone 代码比较麻烦，需要 clone 4个仓库的代码
2. clone 完代码之后，还需要切换 develop 分支 4 次，npm i 安装 4 次依赖包
3. 这 4 个工程安装的依赖包如果有重复的，会在各自的工程目录下安装多次，导致更多的磁盘空间占用
4. 增加新组件或给组件增加新特性，一般都会涉及模板/逻辑/样式的同时修改，提交 MR 时需要在三个仓库都提交一个MR，不太方便
5. 填写 MR 的描述信息时也需要在多个仓库填写多次
6. 检视 MR 时也需要在多个仓库进行检视、提交检视意见，比较分散

由于我们是一个开源项目，希望能够团结社区开发者一起共同建设，肯定希望大家参与贡献的门槛尽可能降低，贡献的体验尽可能流畅，所以我们在 3 月份对项目进行了一次大改造，将原来分散在 4 个代码仓库的代码集中到一个仓库，通过 Monorepo 方式进行管理。除此之外，我们还将原来的 JavaScript 工程改造成了 TypeScript 工程，并在持续补充组件的 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 官网提供 Composition API 写法的示例

TinyVue 是一个能同时支持 Vue2 和 Vue3 的组件库，但是之前我们官网的组件 Demo 只有 Options API 的版本，使用 Vue3 的开发者会觉得很不方便，拷贝 Demo 代码之后还需要手动转换成 Composition API 的写法。

于是我们优化了文档的呈现，参考 Vue 官网，增加了 Options(选项式) 和 Composition(组合式) 两种写法的切换。

欢迎朋友们到我们官网体验：https://opentiny.design/tiny-vue/zh-CN/os-theme/components/button

** **

1.4 提供 Playground 代码演练场

早期我们的组件 Demo 代码是可以直接在页面上编辑，然后查看组件渲染效果的，但是编辑之后的代码没法通过链接形式分享出来。

我们缺少代码演练场功能，这个问题4月份就有朋友提 Issue #182，8月初，xiaoy 同学给我们贡献了 TinyVue Playground 项目。

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

我们将这个项目集成到了 TinyVue 的官网，现在你可以在每个组件 Demo 的右上角点击“打开演练场”的按钮，在演练场中编辑这个 Demo，实时查看修改后的组件效果，并通过链接形式分享出去。

这样提交 Issue 时，可以在 Playground 中实现最小可复现 Demo，并将链接贴到 Issue 描述中，大大降低了沟通成本，提升了缺陷修复的效率。

** **

1.5 四套主题，总有一套是你喜欢的

为了满足不同业务的需求，我们内置了四套主题，大家可以挑选自己喜欢的一款，如果这四套主题依然没有一款能完全符合自己的要求，你也可以基于现有主题，修改部分主题变量，扩展出一套自己的主题，或者从0到1自定义一套主题，都是可以的。

具体如何自定义主题，可以参考以下文章：

自定义 TinyVue 主题

温馨提醒：主题切换入口在组件页面右上角

欢迎朋友们在 TinyVue 官网体验不同主题：https://opentiny.design/tiny-vue/zh-CN/os-theme/components/button

** **

1.6 更加丰富的组件

有很多开发者在 Issue 给我们提出新组件的诉求，经过仔细评估，我们实现了其中一部分通用的组件。

1. Anchor 锚点 by @chenxi-20
2. CalendarView 日历视图 by @kagol
3. ColorPicker 颜色选择器 by GaoNeng-wWw
4. ConfigProvider 全局设置 by GaoNeng-wWw
5. Divider 分隔线 by @vaebe
6. Drawer 抽屉 by @Huangyilin19
7. Guide 引导 by @yuanningning
8. PopConfirm 确认框 by @gimmyhehe
9. RichTextEditor 富文本编辑器 by Caesar-ch
10. …

还有好多组件未实现，欢迎感兴趣的朋友们一起参与共建！

1. Skeleton 骨架屏 #355
2. BackTop 回到顶部 #576
3. TagInput 标签输入框
4. LoadingBar 加载进度条 #724
5. Card 卡片
6. Chat 对话组件
7. IpSection 分段IP输入框
8. Video 视频播放 #294
9. Mindmap 思维导图 #312
10. ProcessDesigner 流程设计器 #363

如果你想参与 TinyVue 项目贡献，可以在对应的 Issue 下评论认领，并仔细阅读我们的贡献指南。

2、酒香也怕巷子深

俗话说：酒香不怕巷子深，但是在前端组件库开源方面可能不太适用，近几年开源的前端组件库越来越多，这其实是一件好事，百花齐放，前端人也有更多的选择。

但是不熟悉这些组件库的开发者会觉得这些组件库好像都差不多，何必又要重复造轮子呢？

因此有必要做一些宣传，让大家了解 TinyVue 组件库的核心设计理念，TinyVue 与其他组件库的不同，有什么竞争优势。

** **

2.1 开发者大会

从今年4月份开始，OpenTiny 参加了17场开发者大会、开源峰会、高校行活动，包括：

1. 5.13 重庆的开源未来发展峰会
2. 5.27 上海的 GOTC
3. 6.11 北京的开放原子全球峰会
4. ⭐ 7.7 东莞的 HDC 大会
5. 9.20 上海的 HC 大会
6. 9.26 上海的 KubeCon China
7. 10.24 长沙的中国程序员节
8. 10.28 成都的中国开源年会
9. …

通过在大会分享议题，我们能将 TinyVue 的理念传递给广泛的开发者；通过展台互动，我们可以近距离与开发者互动，给大家分享 OpenTiny 的独特优势，倾听开发者的声音，了解用户的痛点问题；通过编程训练营，可以带着开发者一起体验 TinyVue 组件，快速搭建 Web 应用。

值得一提的是，7月份在东莞华为溪村的 HDC 大会真是一场开发者的盛宴，各种开发者活动非常丰富，只要你有心，可以学到很多技术知识，认识超多业界大佬，哪怕只是去“欧洲小镇”逛一圈，我觉得也是非常值得推荐的。

虽然那几天天气很热，也很累，但是却是非常难忘的一段经历，OpenTiny 有演讲议题、展台、训练营和挑战赛，参加人数都非常多，开发者们都很活跃。

非常高兴，TinyVue 也是在 HDC 大会上正式进行发布！

OpenTiny 前端组件库正式开源啦！面向未来，为开发者而生

大家可以关注 OpenTiny 公众号，随时掌握 OpenTiny 最新活动动态。

2.2 直播

除了线下开发者大会之外，线上直播也是一种向开发者传递项目价值的方式，今年共做了 8 次直播。

1. 华为云DTT直播 2 次
2. 与前端知名UP主前端杨村长联合直播 3 次
3. 与 ToB Dev / Dooring 低代码联合直播 1 次
4. 受邀参加中国开源社区 landscape 直播分享 1 次
5. 自主策划 TinyEngine 线上答疑 1 次

大家感兴趣可以关注 OpenTiny 的B站账号，我们会将直播的录播视频上传上去。

OpenTiny B站：space.bilibili.com/15284299

2.3 写文章

相比参加开发者大会和组织直播活动，写文章相对比较容易，并且写文章能够更加全面、细致地传递开源项目价值，也是一种细水长流的传播方式，门槛相对也比较低，几乎任何人都可以做。

从4月份我们发布第一篇 OpenTiny 的介绍文章至今，共发布了75篇文章，平均每周2篇。其中有关于大前端技术知识、OpenTiny 技术内容、OpenTiny 实时动态、OpenTiny 版本更新等内容~都是体验技术团队成员自己在实战中的总结及心血，想了解的同学也可以关注下 OpenTiny 公众号。

开源不易，写文章也不易，也给我们 TinyVue 开源项目点个 Star 鼓励下🌹

https://github.com/opentiny/tiny-vue

感谢朋友们对 TinyVue 的支持！

如果你有一个开源项目，千万不能抱着酒香不怕巷子深的观念，而是积极主动地走出去，接触广大的开发者，不断对外宣传你的开源项目的价值和核心优势，让大家了解你的开源项目，让大家评判你的开源项目，让大家使用你的开源项目。

3、规划

2024年我们将继续根据用户需求优化组件库。

一方面继续完善组件库能力，提供更多实用组件和特性，满足更广泛的业务场景；

另一方面持续优化组件库工程架构和质量，完善组件的 TypeScript 类型声明、E2E测试用例、单元测试用例。

以下是我们2024年的规划。

3.1 新特性

根据用户提交的 Issue 持续修复组件缺陷、完善组件能力。

新组件：

1. Skeleton 骨架屏 #355
2. BackTop 回到顶部 #576
3. TagInput 标签输入框
4. LoadingBar 加载进度条 #724
5. Card 卡片
6. Chat 对话组件
7. IpSection 分段IP输入框
8. Video 视频播放 #294
9. Mindmap 思维导图 #312
10. ProcessDesigner 流程设计器 #363

新特性：

1. 支持 Nuxt3 #577

2. 支持 unplugin-vue-components #304

3. 支持深色主题 #415

4. Tree 支持虚拟滚动 #256 #317

5. RichTextEditor 富文本组件功能增强

6. CalendarView 组件功能增强

3.2 工程优化

工程优化的目的是提升质量和效率，主要包含以下几个方面：

1. 完善组件的 TypeScript 类型声明 #370
2. 优化组件的 Demo/API 文档 #484
3. 完善 E2E 测试用例
4. 完善单元测试用例 #206
5. Grid 组件抽离 renderless 逻辑层

** **

3.3 生态扩展

2023年我们完成了 TinyReact 组件库的基础适配，包括基础版本的 React 适配层、本地开发和部署流程，提供了 Button / Alert / Switch / Badge 4个组件，并发布第一个 alpha 版本。

2024年我们将持续扩展组件库生态，主要包含：

1. 持续完善 TinyReact 组件库，完善 react-common 适配层，增加更丰富的组件模板
2. 适配 openInula 框架，增加 inula-common 适配层
3. 完善移动端组件库并部署官网，为 TinyEngine 低代码引擎提供移动端组件物料
4. 探索和扩展 Solid / Svelte 等新兴框架的组件库

欢迎广大开发者朋友一起参与 TinyVue 开源共建！

如果你有意向参与 TinyVue 开源贡献，请在对应的 Issue 下面评论，并在参与贡献之前阅读贡献指南

最后，再一次感谢所有支持 OpenTiny 的朋友们！

关于 OpenTiny

OpenTiny 是一套企业级 Web 前端开发解决方案，提供跨端、跨框架、跨版本的 TinyVue 组件库，包含基于 Angular+TypeScript 的 TinyNG 组件库，拥有灵活扩展的低代码引擎 TinyEngine，具备主题配置系统TinyTheme / 中后台模板 TinyPro/ TinyCLI 命令行等丰富的效率提升工具，可帮助开发者高效开发 Web 应用。

---

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～更多视频内容也可关注B站、抖音、小红书、视频号

OpenTiny 也在持续招募贡献者，欢迎一起共建

OpenTiny 官网：https://opentiny.design/

OpenTiny 代码仓库：https://github.com/opentiny/

TinyVue 源码：https://github.com/opentiny/tiny-vue

TinyEngine 源码： https://github.com/opentiny/tiny-engine

欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~

如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~