OpenTiny——提升前端开发效率的利器

已于 2023-03-31 10:35:51 修改
阅读量796 收藏
点赞数
文章标签： 前端
于 2023-03-30 20:50:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LLI025/article/details/129866428
版权
OpenTiny是一个2023年3月开源的组件库，包括TinyVue和TinyNG，支持Vue2/3和Angular多技术栈。它提供多端适配、主题配置系统、中后台模板和CLI工具，拥有丰富的组件且可独立升级。对这个新项目感兴趣的话，可以加入相关社区进行交流。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前端业务的开发往往离不开组件库的加持，一套审美在线又好用的组件库会让程序员和设计师们事半功倍。当然目前业界组件库有很多，最广为人知的阿里的Ant Design，饿了么的ElementUI，谷歌的Material UI等等，各家有各自的审美和设计。不过最近我发现了一个新的组件库，到底有多新呢! 2023年3月初才开源！

那就是OpenTiny，这玩意到底是个啥？

OpenTiny总共包括三个产品，TinyVue 组件库，TinyNG 组件库，以及 TinyCLI 脚手架，看看它都有什么特点？


-适配PC端/移动端等多端
-涵盖Vue2/ Vue3/ Angular 多技术栈
-拥有主题配置系统/ 开箱即用的中后台模板/ CLI命令行等效率提升工具
-组件丰富！TinyNG组件数量 70+，TinyVue组件数量 65+
-通过 CSS Var进行主题定制，免编译！
-每个组件都有独立的版本号，可以根据需求单独升级，免去了每次都要全部升级的繁琐
-以及很多很多很多···优点，一试便知！


如果你对今年3月这个新开源的项目OpenTiny感兴趣，欢迎添加小助手：opentiny-official，拉你进群，一起交流前端技术，一起玩开源。
组件库官网：https://opentiny.design/
Vue组件库：https://opentiny.design/tiny-vue/zh-CN/os-theme/docs/envprepa...
Angular组件库：https://opentiny.design/tiny-ng/overview
Github： https://github.com/opentiny/

LLI025
关注
Vue.js 组件开发 - 实现图片裁剪
走向CTO的路上...
01-16 660
通过本教程，你已经学会了如何使用 Vue.js 开发一个图片裁剪组件，并了解了其在不同场景下的应用。图片裁剪功能在 Web 应用中非常常见，通过组件化开发，可以轻松地在不同项目中复用和扩展。
第五章 【前端】样式及图标（5.5）——UnoCSS
qdbest的专栏
08-13 850
它提供了一套简洁、易于使用的样式类，帮助开发者快速搭建漂亮且功能强大的界面。解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。参考：https://unocss.dev/presets/icons。参考：https://unocss.dev/presets/uno。如果属性模式的名称与元素或组件的属性冲突，可以添加特定于。默认情况下，前缀是可选的，如果要强制使用前缀，请设置。等具有与前缀相同的实用程序，
简介：基于 OpenTiny 组件库的 rendereless 无渲染组件架构
通达的博客
03-09 908
在 HAE 自研阶段，我们实现的数据双向绑定、面向对象的 JS 库、配置式开发的注册表等特性，随着前端技术的高速发展现在已经失去存在的意义，但是在 AUI 阶段探索的新思路新架构，经过大量的业务落地验证，再次推动前端领域的创新。TinyVue 继承了 HAE、AUI，OpenTiny 是一套企业级组件库解决方案，适配 PC 端 / 移动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具，可帮助开发者高效开发 Web 应用。
力软的前端_你想要提升前端效率的方法，都在这里
weixin_28755847的博客
12-24 236
你想要提升前端效率的方法，都在这里前端工程师是近5年来发展起来的职业。旧系统将其定义为Web前端工程师。主要技术包括：HTML、JavaScript和CSS，但是IT技术是一个快速变化的领域。前端工程师似乎是一个非常异类的位置，不仅是上述技术，而且还有一系列的浏览器兼容性问题和网页性能优化。因此，提高前端工程师的开发效率势在必行。那么，如何提高前端工程师的开发效率呢？下面，小编就谈谈提高前端工程师...
部署TinyVue/TinyEngine的完整指南【OpenTiny】
weixin_46011290的博客
03-06 151
部署TinyVue/TinyEngine的完整指南【OpenTiny】 项目地址
什么是OpenTiny？
软件行业技术文化交流。
08-17 1133
在具体实践中，开发者可以基于 OpenTiny 快速构建企业级的前端项目，例如模仿华为云的官方界面，使用 TinyEngine 低代码引擎进行页面布局、表单组件、按钮组件等开发，并通过主题配置系统快速调整页面样式。：一个丰富的组件库，支持 Vue2、Vue3，适配 PC 和移动端，拥有 100 多个组件和 6 套主题，支持国际化，适用于多种开发环境和项目需求。：一个灵活的低代码开发平台，支持在线实时构建和二次开发，允许开发者快速定制低代码平台，适用于资源编排、服务端渲染、模型驱动等多种场景。
前端开发效率提升思路
heyeqingquan的博客
04-17 1745
选一款好的ide 工欲善其事必先利其器，选择IDE来开发是至关重要的。好的IDE 可以大大提高编码效率，避免重复劳动。甚至有让代码起飞的感觉。 比如 WebStorm，Atom，VS Code，Sublime Text 等等。各种工具各有千秋。不妨多试试，找找它们的特点，慢慢地你会知道什么适合自己。 3 前端自动化 谈到提高开发效率，不得不提到一些自动化工具。毕...
能提升你前端工作效率的工具总结
凤凰人
07-13 785
一. nvm node版本管理工具 1.1 nvm简介 目前主流的node版本管理工具有两种，nvm和n。两者差异挺大的，具体分析可以参考《管理 node 版本，选择 nvm 还是 n？》 总的来说，nvm有点类似于 Python 的 virtualenv 或者 Ruby 的 rvm，每个node版本的模块都会被安装在各自版本的沙箱里面（因此切换版本后模块需重新安装），因此考虑到需要时常对no...
OpenTiny HUICharts 正式开源发布，一个简单、易上手的图表组件库
OpenTiny的博客
08-05 2758
用户可通过当前页面右侧的操作面板调整相应样式变量（如：字体、间距、各类颜色等）实时预览定制效果。
0基础玩转OpenTiny跨框架组件库
03-09
此外，OpenTiny还提供了一系列开发辅助工具，如主题配置系统、中后台模板、CLI命令行工具等，这些工具能够显著提高开发效率。 #### 二、OpenTiny的特点与优势 1. **跨框架支持**：OpenTiny不仅支持Vue.js，还提供了...
最近风很大的 OpenTiny 有什么功能？组件库？那是什么东西？框架又是什么？
LLI025的博客
04-11 476
先说结论，主要包括两个前端组件库，包括 Angular 框架和 Vue 框架两种。或许有一些不了解前端的朋友就会问了，，这两个？笔者理解，当我们在手机或电脑屏幕上看到丰富美丽的画面时，或者是我们需要在网页中提交某个表格或者信息产生交互动作时，这些画面的背后就是多个组件结合而成的效果。比如头像组件使我们可以设置自己的专属形象，比如新手引导组件又会在最初带领我们探索某个事物，等等诸如此类的场景。那么框架又是什么呢？引用维基百科中的解释，软件框架是指一种抽象形式，它提供了一个。
OpenTiny 跨端、跨框架组件库升级TypeScript，10万行代码重获新生
华为云官方博客
04-10 795
一份精心准备的《JS项目改造TS指南》文档供大家参考，顺便介绍TS 基础知识和 TS 在 Vue 中的实践。
OpenTiny 推出开源低代码引擎 TinyEngine 在 KubeCon China 2023 蓄力云原生生态
OpenTiny的博客
10-09 509
TinyEngine 低代码引擎作为开发低代码平台的核心基座，为低码平台开发人员提供重要驱动力，使能开发者定制低码平台。
open-tiny-orm_初探Atlas-提供的ORM
culh2177的博客
09-01 267
open-tiny-ormThis article was peer reviewed by Paul M. Jones and Scott Molinari. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be! 本文由Paul M. Jones和Scott Mo...
[lua][openresty][open-tiny-orm]开源一个简单的orm
程序空间
03-26 1616
序去年开始接触openresty,手里接过来的项目使用了lor,但是没有用orm,一切全部是手撸sql,各种拼接的语句充斥在业务代码中，让我非常的不能忍。因为之前有过框架...
号外号外！OpenTiny 将在HDC华为开发者大会正式发布！
kagol的博客
07-07 232
OpenTiny将在华为开发者大会2023正式发布，并通过展台、Codelabs训练营和极客挑战赛等形式参与大会，欢迎大家来现场。
OpenTiny Vue 组件库实现主题配置和UX交互规范自定义
OpenTiny的博客
08-18 455
本文向我们介绍了如何在OpenTiny Vue组件库中进行UX规范的定制修改。学会使用该方法后，开发者可以更精准地控制或修改用户体验规范的范围，提高开发效率，同时降低维护成本和代码复杂度。
Tiny前端展现框架开源了~~~
weixin_34223655的博客
06-30 194
2019独角兽企业重金招聘Python工程师标准>>> ...
Tinypro 前端组件和后端模块的开发
最新发布
03-25
### 关于 TinyPro 的前后端开发方法 #### 前端开发方案 TinyPro 是基于 Vue.js 构建的一套开箱即用的中台前端/设计解决方案[^1]。它提供了丰富的组件库以及灵活的设计工具，能够快速搭建复杂的业务界面。以下是关于其前端开发的一些要点： - **模块化开发** 前端工程推荐采用模块化的开发方式，将代码拆分成多个独立的小模块，每个模块专注于完成单一功能[^2]。这种方式不仅提高了代码的可读性和复用性，还降低了维护成本。 - **组件化设计** TinyPro 提供了一系列高质量的 UI 组件，这些组件可以直接用于页面构建。通过组合不同的组件，可以迅速实现复杂的功能需求。例如，表格、表单、图表等常用组件已经经过优化，适合大规模企业级应用的需求。 - **响应式布局** 随着设备多样性的增加，TinyPro 支持响应式布局设计，确保在各种屏幕尺寸下都能保持良好的用户体验。 ```javascript // 示例：使用 TinyPro 表格组件展示数据 <template> <tiny-table :data="tableData"> <tiny-table-column prop="name" label="姓名"></tiny-table-column> <tiny-table-column prop="age" label="年龄"></tiny-table-column> </tiny-table> </template> <script> import { Table, TableColumn } from '@opentiny/vue'; export default { components: { 'tiny-table': Table, 'tiny-table-column': TableColumn }, data() { return { tableData: [ { name: '张三', age: 28 }, { name: '李四', age: 30 } ] }; } }; </script> ``` --- #### 后端模块实现方案 后端部分可以通过微服务架构来实现，具体如下： - **业务接口微服务（webService）** 这一模块主要负责汇总各个子系统的功能，并对外暴露统一的 API 接口。它可以调用其他微服务的数据和服务，从而形成完整的业务逻辑链条[^4]。 - **数据中心（data-center）** 数据中心作为整个系统的核心基础设施之一，承担了数据存储、管理和分发的任务。它的职责是为所有的微服务提供一致性高的数据支持，减少重复劳动和潜在错误风险。 - **扩展能力** 得益于微服务的特点，开发者可以根据实际需求轻松扩展并定制自己的 `TinyEngine` 服务端架构。这种灵活性使得即使面对不断变化的企业场景也游刃有余。 --- ### 总结 综上所述，TinyPro 不仅具备强大的前端组件体系，而且配合合理的后端微服务设计方案，可以帮助团队高效地交付高质量的产品。无论是从前端到后端的技术选型还是具体的实践路径，都体现了现代软件开发的最佳实践原则。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值