感恩有你|恭喜 OpenTiny Vue 开源组件库喜迎1000+star！！！

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标签，一起参与开源贡献~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/188623.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

原生javascript实现放大镜效果

原生javascript实现放大镜效果

效果图 完整代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>放大镜</title><style&g…
阅读更多...
Robots 元标签与 X-Robots 标签

Robots 元标签与 X-Robots 标签

Robots Meta Tag 和 X-Robots-Tag 是两个常用的 HTML 标签&#xff0c;它们对观察机动爬虫和其他网络机器人很有启发性。这些标签可以控制您的网页如何被记录和显示。 什么是机器人元标记&#xff1f; 机器人元标记是一个 HTML 标签&#xff0c;它提供信息来查看电机爬虫和其…
阅读更多...
【Python篇】详细讲解正则表达式

【Python篇】详细讲解正则表达式

文章目录 &#x1f339;什么是正则表达式&#x1f354;语法字符类别重复次数组合模式 ✨例子 &#x1f339;什么是正则表达式 正则表达式&#xff08;Regular Expression&#xff09;&#xff0c;简称为正则或正则表达式&#xff0c;是一种用于匹配、查找和操作文本字符串的工…
阅读更多...
LemMinX-Maven：帮助在eclipse中更方便地编辑maven的pom文件

LemMinX-Maven：帮助在eclipse中更方便地编辑maven的pom文件

LemMinX-Maven&#xff1a;https://github.com/eclipse/lemminx-maven LemMinX-Maven可以帮助我们在eclipse中更方便地编辑maven工程的pom.xml文件&#xff0c;例如补全、提示等。不用单独安装&#xff0c;因为在安装maven eclipse插件的时候已经自动安装了&#xff1a; 例…
阅读更多...
鸿蒙开发板——环境搭建（南派开发）

鸿蒙开发板——环境搭建（南派开发）

概述 为了帮大家理清楚鸿蒙开发的套路&#xff0c;我们从头再梳理一遍相关的脉络。并为大家总结一些重点性的内容。在介绍OpenHarmony特性前&#xff0c;需要大家先明确以下两个基本概念&#xff1a; 子系统 OpenHarmony整体遵从分层设计&#xff0c;从下向上依次为&#xf…
阅读更多...
移动家庭云电脑只能24小时不关机

移动家庭云电脑只能24小时不关机

DD转换Linux也不行&#xff0c;北京地区套餐为家庭云电脑畅享版月包&#xff0c;客服回复目前只能设置24小时不关机。 24小时必须关机这是很严重的问题&#xff0c;不能随时保持在线连接&#xff0c;也没有公网IP。
阅读更多...
如何在Linux系统安装Nginx并启动

如何在Linux系统安装Nginx并启动

Nginx的介绍 Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件&#xff08;IMAP/POP3&#xff09;代理服务器。其特点是占有内存少&#xff0c;并发能力强&#xff0c;事实上nginx的并发能力在同类型的网页服务器中表现较好。官网&#xff1a;nginx newsNginx的下载 前往…
阅读更多...
深度学习+不良身体姿势检测+警报系统+代码+部署(姿态识别矫正系统)

深度学习+不良身体姿势检测+警报系统+代码+部署(姿态识别矫正系统)

正确的身体姿势是一个人整体健康的关键。然而&#xff0c;保持正确的身体姿势可能很困难&#xff0c;因为我们经常忘记这一点。这篇博文将引导您完成为此构建解决方案所需的步骤。最近&#xff0c;我们在使用 POSE 进行身体姿势检测方面玩得很开心。它就像一个魅力&#xff01;…
阅读更多...
uniapp H5、小程序、APP端自定义不同运行环境（开发、测试、生产）、自定义条件编译平台、以及动态修改manifest.json值讲解

uniapp H5、小程序、APP端自定义不同运行环境（开发、测试、生产）、自定义条件编译平台、以及动态修改manifest.json值讲解

文章目录 前言一、自定义条件编译平台是什么&#xff1f;二、新增自定义条件编译平台三、动态设置服务器请求地址四、动态修改manifest.json1.根目录新增文件 modifyManifest.js2.vue.config.js引入modifyManifest.js 总结示例代码 前言 企业项目开发流程上一般都要配置多个运…
阅读更多...
【Linux】 sudo命令使用

【Linux】 sudo命令使用

sudo sudo是linux系统管理指令&#xff0c;是允许系统管理员让普通用户执行一些或者全部的root命令的一个工具&#xff0c;如halt&#xff0c;reboot&#xff0c;su等等。这样不仅减少了root用户的登录 和管理时间&#xff0c;同样也提高了安全性。sudo不是对shell的一个代替…
阅读更多...
ubuntu修改系统语言

ubuntu修改系统语言

修改ubuntu系统语言 操作指令修改系统设置总结 操作 ubuntu系统自带的英文环境&#xff0c;个人觉得用起来不方便。改掉吧。换成中文 指令修改 参考了一些博客的解决方式 ctrlartT 打开终端。 sudo apt-get install language-pack-zh-hans 输入下载汉化包的指令。 但是&…
阅读更多...
Spring 拾枝杂谈—Spring原生容器结构剖析（通俗易懂）

Spring 拾枝杂谈—Spring原生容器结构剖析（通俗易懂）

目录 一、前言 二、Spring快速入门 1.简介 : 2. 入门实例 : 三、Spring容器结构分析 1.bean配置信息的存储 : 2.bean对象的存储 : 3.bean-id的快捷访问 : 四、总结 一、前言 开门见山&#xff0c;11.25日开始我们正式进入Java框架—Spring的学习&#xff0c;此前&…
阅读更多...
作为Java初学者，如何快速学好Java？

作为Java初学者，如何快速学好Java？

作为Java初学者&#xff0c;如何快速学好Java&#xff1f; 开始的一些话 对于初学者来说&#xff0c;编程的学习曲线可能相对陡峭。这是正常现象&#xff0c;不要感到沮丧。逐步学习&#xff0c;循序渐进。 编程是一门实践性的技能&#xff0c;多写代码是提高的唯一途径。尽量…
阅读更多...
从入门到精通：JMeter接口测试全流程详解！

从入门到精通：JMeter接口测试全流程详解！

利用Jmeter做接口测试怎么做呢&#xff1f;过程真的是超级简单。 明白了原理以后&#xff0c;把零碎的知识点填充进去就可以了。所以在学习的过程中&#xff0c;不管学什么&#xff0c;我一直都强调的是要循序渐进&#xff0c;和明白原理和逻辑。这篇文章就来介绍一下如何利用…
阅读更多...
[Java]线程详解

[Java]线程详解

Java线程 一、线程介绍 程序 是为完成特定任务、用某种语言编写的一组指令的集合&#xff08;简单来说就是写的代码&#xff09;。 进程 进程是指运行中的程序&#xff0c;比如我们使用的QQ&#xff0c;就启动了一个进程&#xff0c;操作系统会对该进程分配内存空间。当我…
阅读更多...
音频——S/PDIF

音频——S/PDIF

文章目录 BMC 编码字帧(sub-frame)格式帧(frame)格式参考S/PDIF 是 SONY 和 Philips 公司共同规定的数字信号传输规范，其实就是在 AES/EBU 上进行改动的家用版本。IEC60958 的标准规范囊括了以上两个规范。spdif 采用了双相符号编码（BMC），是将时钟信号和数据信号混合在一起…
阅读更多...
Python---函数的参数类型----位置参数（不能顺序乱）、关键词参数（键值对形式，顺序可乱）

Python---函数的参数类型----位置参数（不能顺序乱）、关键词参数（键值对形式，顺序可乱）

位置参数 理论上&#xff0c;在函数定义时&#xff0c;可以为其定义多个参数。但是在函数调用时&#xff0c;也应该传递多个参数&#xff0c;正常情况&#xff0c;要一一对应。 相关链接&#xff1a;Python---函数的作用&#xff0c;定义&#xff0c;使用步骤&#xff08;调用…
阅读更多...
【Java程序员面试专栏 专业技能篇 】Java SE核心面试指引（四）：Java新特性

【Java程序员面试专栏 专业技能篇 】Java SE核心面试指引（四）：Java新特性

关于Java SE部分的核心知识进行一网打尽，包括四部分：基础知识考察、面向对象思想、核心机制策略、Java新特性，通过一篇文章串联面试重点，并且帮助加强日常基础知识的理解，全局思维导图如下所示 本篇Blog为第四部分：Java新特性，子节点表示追问或同级提问 Java8新特性…
阅读更多...
Linux内核中的overlay文件系统

Linux内核中的overlay文件系统

一、简介 Docker 内核实现容器的功能用了linux 内核中的三个特性 Namespace、Cgroup、UnionFs&#xff0c;今天我们来说一下UnionFs。 linux UnionFs 实现的是overlay 文件系统 OverlayFs 文件系统分为三层&#xff0c; lower 是只读层 Upper 是可读写 Merged 是 lower 和U…
阅读更多...
[AutoSAR 存储] 汽车智能座舱的存储需求

[AutoSAR 存储] 汽车智能座舱的存储需求

公知及经验整理&#xff0c;原创保护&#xff0c;禁止转载。 专栏 《AutoSAR 存储》 <<<< 返回总目录 <<<< 1 智能座舱的发展&#xff1a; 1.1 发展历史 车辆信息娱乐系统的发展可以分为三个阶段。 机械化阶段 在上世纪90年代&#xff0c;车辆仪表盘…
阅读更多...
最新文章

Copyright @ 2022~2023