- 博客(92)
- 收藏
- 关注
RSS订阅原创 探索 TinyVue 组件库系列之设计系统实现
前端开源星球。TinyVue 实现了一套精密的多变体设计系统，在支持不同产品生态系统的同时，通过集中化的 token 架构保持一致性。该设计系统将设计意图与实现分离，使主题变体（Aurora、SaaS、SMB）能够以最少的重复共存。
2026-01-22 14:07:07
965
原创 探索 TinyVue 组件库系列之低代码平台集成
低代码平台通常需要使用自定义组件扩展标准组件库。组合方法：组合现有组件创建新的复合组件。可以重用无渲染层以保持与标准组件的一致性。继承方法：扩展标准组件模板并覆盖特定部分，同时继承无渲染逻辑。插件方法：使用设计配置系统向标准组件注入自定义行为，而无需修改其代码。
2026-01-21 14:19:30
727
原创 探索 TinyVue 组件库系列之PC与移动端优先模式
前端开源星球。TinyVue 实现了一套精密的双架构模式，能够在保持统一 API 表面的同时，实现组件在 PC 和移动优先平台上的无缝部署。这种方法允许开发者使用单一的组件库构建响应式应用程序，该库能够根据目标平台模式自动调整其行为和表现。
2026-01-20 10:18:44
594
原创 探索 TinyVue 组件库系列之组件演示与 API 文档
前端开源星球。组件演示和 API 文档系统为所有 TinyVue 组件提供了交互式示例和全面的 API 参考。该文档基础设施支持多种部署模式（PC、Mobile-First、SaaS），并实现了实时演示与详细技术规范的无缝集成。
2026-01-19 20:22:03
722
原创 探索 TinyVue 组件库系列之本地开发环境搭建
前端开源星球。本文将指导你搭建 TinyVue 的本地开发环境。TinyVue 是一个企业级 UI 组件库，同时支持 Vue 2 和 Vue 3。无论你是为项目贡献代码还是探索组件，此环境都能让你在本地运行、测试和修改组件库。
2026-01-17 09:33:50
853
原创 探索 TinyVue 组件库系列之开发工具3：测试工具与配置
单元测试用于组件和工具函数，E2E 测试用于视觉回归和用户流程，以及跨版本兼容性层确保在 Vue 2 和 Vue 3 中保持一致的测试体验。该架构使开发者只需编写一次测试，即可在两个框架版本上运行，且只需最少的配置更改。该架构体现了关注点分离原则，单元测试专注于隔离的组件行为和工具函数，而 E2E 测试验证集成的用户体验。兼容性层抽象了版本特定的差异，为挂载组件和运行断言提供了统一的 API。
2026-01-16 14:57:41
623
原创 探索 TinyVue 组件库系列之开发工具2：虚拟模板的 Vite 插件
前端开源星球。TinyVue 的构建工具链包含精密的 Vite 插件，支持虚拟模板管理和跨平台模板转换。这些插件为构建无缝支持多平台（PC、移动端、移动优先）和不同渲染范式（Vue、JSX/Solid）的组件库提供了基础。虚拟模板系统允许组件根据运行时或构建时配置动态选择合适的模板，同时保持最优的打包体积。
2026-01-15 10:23:09
702
原创 探索 TinyVue 组件库系列之开发工具1：CLI 与构建脚本
前端开源星球。tiny-vue 中的 CLI 和构建脚本为组件开发、包生成和部署自动化提供了一套精密的工具链。这些工具简化了从创建新组件到发布跨多个 Vue 版本、设计系统和包格式的包的工作流程。
2026-01-14 14:19:59
741
原创 探索 TinyVue 组件库系列之国际化 (i18n) 支持
i18n 系统采用集中式包设计，以作为所有国际化操作的基础。该架构利用适配器模式无缝支持 Vue 2 和 Vue 3，通过虚拟模块解析来抽象特定框架的实现。系统通过虚拟模块策略解决框架兼容性问题。入口点从导入，该模块根据构建时检测到的 Vue 版本动态选择合适的实现。这种方法确保了相同的 API 表面在 Vue 2 和 Vue 3 环境中一致地工作，而无需在应用程序组件中编写特定版本的代码。对于具有现有 i18n 基础设施的应用程序，i18n()})
2026-01-13 12:13:50
574
原创 探索 TinyVue 组件库系列之实用 Vue 组合式 API
vue-hooks 包遵循高阶函数模式，实现跨框架兼容性。每个 hook 接受 Vue 的组合 API 函数（reactivewatchonMounted等）作为参数，并返回实际的 hook 实现。这种设计允许相同的 hook 代码通过不同的运行时适配器在 Vue 2 和 Vue 3 环境中工作。这种架构使 hooks 能够与框架无关，同时仍利用每个框架的响应式系统。hooks 主要由无渲染组件使用，但也可以直接在自定义组件中使用。包中的所有 hooks 都遵循一致的高阶函数模式：框架独立性。
2026-01-12 15:58:10
936
原创 探索 TinyVue 组件库系列之实用 Vue 指令
TinyVue指令集合(@opentiny/vue-directive)提供了一套跨Vue2/Vue3兼容的实用指令，包含6个核心功能：v-auto-tip(文本溢出提示)、v-clickoutside(外部点击检测)、v-highlight-query(搜索高亮)、v-infinite-scroll(无限滚动)、v-observe-visibility(可视区域观察)和v-repeat-click(重复点击)。该集合采用模块化设计，每个指令都实现了性能优化策略，如单例模式、事件委托和节流控制，并统一支持V
2026-01-11 08:50:48
820
原创 探索 TinyVue 组件库系列之实用函数库
【摘要】@opentiny/utils是一个专为TinyVue设计的工具函数库，提供100+模块化工具函数，涵盖类型检查、数组/对象操作、字符串处理、日期管理、DOM操作、表单验证等功能。核心特性包括：1）支持Tree-shaking的模块化架构；2）提供XSS防护等安全工具；3）包含节流/防抖等性能优化方案；4）支持深拷贝和树形数据处理。该库通过npm安装，采用按需导入方式，可作为Vue应用的底层工具集。典型应用场景包括表单验证、数据转换、性能优化等，适合需要构建健壮前端应用的开发者。
2026-01-10 12:13:57
972
原创 探索 TinyVue 组件库系列之图标系统3：SaaS 图标
SaaS 图标系统作为 monorepo 中的独立包进行组织，旨在为企业级应用提供业务特定的图标设计。该架构遵循每个图标一个组件的模式，每个 SVG 图标都封装在独立的 Vue 组件中，支持细粒度导入和 tree-shaking 功能。该包结构利用 pnpm 工作区依赖与 TinyVue 生态系统无缝集成，确保 SaaS 图标从包继承一致的样式和主题变量，同时保持其专门的图标设计。
2026-01-10 11:58:45
995
原创 探索 TinyVue 组件库系列之图标系统2：多色图标
前端开源星球。多色图标系统提供了一套专门面向业务场景的图标集合，具备可配置的双色样式功能。此包扩展了OpenTiny的图标基础设施，以支持需要增强视觉层次和色彩语义的场景，尤其适用于企业应用中的费用管理、差旅预订和行政工作流。
2026-01-08 10:33:25
581
原创 探索 TinyVue 组件库系列之图标系统1：图标组件库
TinyVue提供了一套模块化SVG图标组件库，包含500+图标，分为标准(@opentiny/vue-icon)、SaaS业务(@opentiny/vue-icon-saas)和多色(@opentiny/vue-icon-multicolor)三个专用包。采用无渲染架构设计，支持TreeShaking优化和TypeScript类型安全，图标可继承父元素样式并自动适配主题。提供PascalCase/camelCase双命名模式，支持动态加载和ARIA无障碍访问。
2026-01-07 10:49:30
670
原创 探索 TinyVue 组件库系列之主题系统3：SaaS 主题实现
主题系统使用一致的 CSS 变量前缀约定--tiny-为所有主题变量命名空间，防止与其他库或用户定义样式冲突。前缀在中定义并应用于所有生成的 CSS 变量。组件特定变量在组件类前缀（图标字体前缀（特殊组件的组件特定前缀类，如日期容器、时间旋转器和下拉菜单这些变量确保组件库中一致的类命名，同时保持未来自定义的灵活性。CSS 变量前缀约定（--tiny-）结合格式为的回退值实现优雅降级。如果 CSS 变量未定义，则使用回退的十六进制值，确保即使主题配置不完整，组件也能正确渲染。
2026-01-06 11:24:36
701
原创 探索 TinyVue 组件库系列之主题系统2：主题自定义与设计令牌
TinyVue 广泛使用 CSS 自定义属性（CSS 变量）来实现主题定制。基础主题在全局作用域中定义了一套全面的变量。:root,:host {/* 品牌色 *//* 中性色 *//* 功能色 */组件特定变量每个组件定义自己的作用域变量集，引用全局设计令牌。这种模式在保持设计系统一致性的同时支持组件级定制。/* 排版 *//* 间距 *//* 颜色 - 主主题 *//* 颜色 - 成功主题 *//* 状态变体 */
2026-01-05 17:31:17
894
原创 探索 TinyVue 组件库系列之主题系统1：主题系统架构
TinyVue 提供多种自定义方法，以适应不同的主题需求和开发者偏好。这些策略范围从简单的变量覆盖到完整的设计令牌替换。:root {此方法需要最少的配置更改，并且适用于所有主题变体。动态主题切换通过 CSSStyleSheet API 和运行时性能优化多个主题变体包括旧版、现代和深色模式实现双重样式方法结合传统 LESS 预处理与现代 Tailwind CSS 实用程序设计令牌系统实现系统化自定义和设计系统一致性复杂的构建流水线针对开发工作流和生产部署进行优化组件级主题。
2026-01-04 09:47:26
900
原创 探索 TinyVue 组件库系列之组件系统3：组件配置驱动开发
配置系统采用分层注入模型，配置从全局设置逐级传递到单个组件实例。ConfigProvider 组件作为核心配置中心，利用 Vue 的 provide/inject 机制在整个组件树中分发配置。
2026-01-03 10:13:39
979
原创 探索 TinyVue 组件库系列之组件系统1：组件包组织
该组件库在总包下组织，将独立组件包聚合到三个策略性入口点。这种设计使开发者能够根据应用程序需求，在全库引入、平台特定包或独立组件导入之间进行选择。主要组件定义（）利用来自的共享工具，包括用于标准属性的$props对象、用于命名的$prefix常量以及用于平台特定模板解析的$setup函数。组件使用虚拟模板导入，根据当前模式动态选择适当的渲染模板。导入语法支持编译时模板选择，而不会捆绑未使用的模板，从而优化平台特定构建的包大小。
2026-01-01 21:30:00
1009
原创 探索 TinyVue 组件库系列之架构设计3：Monorepo 源码仓库管理
前端开源星球。OpenTiny TinyVue 采用了一套由 pnpm workspaces 驱动的复杂 monorepo 架构，旨在管理一个支持 Vue 2 和 Vue 3、PC 和移动平台的企业级组件库。这种结构能够在保持构建效率和依赖一致性的同时，协调多个相互依赖的包的开发。
2025-12-31 09:09:49
935
原创 探索 TinyVue 组件库系列之架构设计2：无渲染组件架构
前端开源星球。TinyVue 中的无渲染组件架构代表了一种精密的关注点分离模式，它将组件逻辑与表现层分离，实现了在多个平台、框架和设计变体间前所未有的代码复用性。该架构作为 TinyVue 跨平台能力的基础层，允许单一逻辑实现同时服务于 PC、移动端和移动优先组件，并支持 Vue 2 和 Vue 3 框架。
2025-12-30 09:13:25
1031
原创 探索 TinyVue 组件库系列之架构设计1：跨平台与跨框架设计
该架构采用无渲染组件模式，其中业务逻辑独立于渲染逻辑存在，并结合虚拟模块解析，通过统一的导入路径提供特定于框架的 API。
2025-12-29 10:27:25
723
原创 探索 TinyVue 组件库系列之入门指南4：基础组件使用
前端开源星球。本页面介绍了 Tiny Vue 组件的基本使用模式，包括安装方法、导入策略和实际示例。你将学习如何高效地将组件集成到 Vue 2 或 Vue 3 应用程序中。
2025-12-28 12:42:42
894
原创 探索 TinyVue 组件库系列之入门指南2：快速开始
本指南将带你快速上手 TinyVue，一个企业级 UI 组件库，支持 Vue 2 和 Vue 3，同时兼容 PC 和移动端平台。你将学习如何安装该库、导入组件，并在几分钟内创建你的第一个应用程序。
2025-12-26 11:19:48
935
原创 探索 TinyVue 组件库系列之入门指南1：概述
前端开源星球。TinyVue 是一个企业级 UI 组件库，旨在为构建现代 Web 应用程序提供全面的解决方案。它以灵活性和跨平台兼容性为核心设计理念，提供，可无缝运行于 Vue.js 2 和 Vue.js 3，以及 PC 和移动设备。该库强调的理念——相同的组件代码可在不同的 Vue 版本和设备平台上运行，显著降低了企业应用的维护成本。
2025-12-25 14:10:58
826
原创 TinyEditor v4.0 alpha 版本发布：表格更强大，表情更丰富，上传体验超乎想象！
前端开源星球。是一个基于 Quill 2.0 的富文本编辑器，在 Quill 基础上扩展了丰富的模块和格式，框架无关、功能强大、开箱即用。对于富文本编辑器来说，插入图片、视频、表情，插入和编辑表格，这些都是非常常见的功能，因此我们对这几个模块做了重点优化和重构。
2025-07-19 08:46:26
1001
原创 TinyVue 智能组件库：基于 MCP 协议，实现 AI 代替人操作 Web 组件
2025年6月21日，我在华为开发者大会2025（HDC2025）开源论坛做了一场主题分享，给开发者们介绍我们 OpenTiny 团队**基于 MCP 协议实现 AI 代替人操作 Web 应用**的技术。
2025-06-26 08:00:00
1269
原创 macOS 和 Windows 操作系统下如何安装和启动 MySQL / Redis 数据库
前端开源星球（欢迎关注我，分享更多前端开源知识）。后台管理系统的 NestJS 后端依赖 MySQL 和 Redis 数据库，本文主要带大家安装和启动 MySQL 和 Redis 数据库。
2025-04-12 11:28:26
532
原创 Fluent Editor v3.25.0 正式发布！2025年第一个版本，增加标题列表导航、分隔线、多图多文件上传等实用特性
前端开源星球。是一个基于 Quill 2.0 的富文本编辑器，在 Quill 基础上扩展了丰富的模块和格式，框架无关、功能强大、开箱即用。今天是2025年1月2日，也是2025年的第一个工作日，我们很高兴地宣布 Fluent Editor v3.25.0 正式发布！我们一起来看下都有哪些更新吧！
2025-01-13 10:27:41
912
原创 2024年终总结：5000 Star，10w 下载量，这是我交出的开源答卷
前端开源星球。2024年，我做前端开发工作满啦！这10年我一直在开发前线，做过电商项目、广告平台、项目管理系统等业务，目前主要专注于前端组件库建设和开源社区运营，OpenTiny 开源社区运营，Fluent Editor 和 Vue DevUI 作者，前端开源星球公众号运营者，热爱开源和写作，活跃于掘金、知乎、B站等社区，发表100多篇技术文章，有4个 Star 超千的开源项目。开源运营创作分享健康生活。
2025-01-09 19:23:15
700
原创 优化永不止步：TinyVue v3.20.0 正式发布，更美观的官网UI，更友好的文档搜索，更强大的主题配置能力~
ThemeData是自定义主题数据格式，用户可以通过data属性，传入覆盖的全局CSS 变量， 通过css属性，传入有效的 CSS 规则块。/** 主题的ID */ id?: string /** 主题的名称 */ name?: string /** 主题的中文名称 */ cnName?* 需要追加的全局css变量的对象* 比如： { 'tv-base-color-brand' : '#1476ff' } 会追加到 :root { --tv-base....... }* */ data?
2025-01-08 19:15:44
811
原创 让我们一起来建设 Fluent Editor 开源富文本编辑器吧！
前端开源星球。是一个基于 Quill 2.0 的富文本编辑器，在 Quill 基础上扩展了丰富的模块和格式，框架无关、功能强大、开箱即用。2024年8月12日，Fluent Editor 正式开源！开源之后，有不少用户开始使用我们的 Fluent Editor 富文本编辑器，并且给我们提了很多和支持了i18n 国际化和三个重要的特性。
2024-11-30 21:02:00
989
原创 TinyPro Vue v1.1.0 正式发布：增加细粒度权限管理、页签模式、多级菜单，支持 Webpack/Vite/Rspack/Farm 多种构建工具
前端开源星球。为了提升前端开发效率，OpenTiny 提供了一个跨平台的前端工程化 CLI 工具，为开发者提供一系列开发套件及工程插件，覆盖前端开发的整个链路，保证团队开发过程的一致性和可复制性。我们非常高兴地宣布，2024年11月23日，发布了🎉。本次版本主要由指导，完成开发👏和在 TinyPro Vue 项目中作出的杰出贡献！你可以更新进行体验！
2024-11-29 20:17:08
809
原创 重磅更新！Fluent Editor 开源富文本支持 LaTeX 可编辑公式啦~
前端开源星球。是一个基于 Quill 2.0 的富文本编辑器，在 Quill 基础上扩展了丰富的模块和格式，框架无关、功能强大、开箱即用。
2024-11-14 15:55:51
1186
原创 TinyVue v3.19.0 正式发布！Tree 组件终于支持虚拟滚动啦！UI 也升级啦，更更符合现代审美~
前端开源星球。我们非常高兴地宣布，2024年10月28日，发布了🎉。本次版本共有16位贡献者参与开发，其中是新朋友👏你可以更新进行体验！我们一起来看看都有哪些更新吧！
2024-11-10 10:09:52
1019
原创 焕然一新！TinyVue 组件库 UI 大升级，更符合现代的审美！
前端开源星球。自从 TinyVue 组件库去年开源以来，一直有小伙伴反馈我们的 UI 不够美观，风格陈旧，不太满足现阶段审美。“TinyVue 给我的感觉就是一个没啥审美能力、但是很努力的老程序员开发的”看到这个评价，我是哭笑不得，一方面对小伙伴们真诚、友好的反馈充满感激，另一方面也为我们没有做好 UI 感到惭愧。
2024-11-09 10:19:25
512
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人