博客 / 列表

OpenTiny社區 - Vue2/Vue3 遷移頭禿？Renderless 架構讓組件 “無縫穿梭”

本文由體驗技術團隊劉坤原創。 "一次編寫，到處運行" —— 這不是 Java 的專利，也是 Renderless 架構的座右銘！ 開篇：什麼是 Renderless 架構？ 🤔 傳統組件的困境 想象一下，你寫了一個超棒的 Vue 3 組件： !-- MyAwesomeComponent.vue -- template div button @click="handleClick

vue.js , 開源 , 前端 , Javascript

OpenTiny社區 - 2025年OpenTiny年度人氣貢獻者評選正式開始

前言 攜手共創，致敬不凡！ 2025年，OpenTiny持續在前端開源領域紮根，每一位開發者都是推動項目共同前行的寶貴力量。從bug修復，到技術探討；從參與開源活動，到輸出技術文章；從使用項目，到參與共建，每一步跨越，都凝聚了開發者的智慧與汗水。 致敬所有在OpenTiny社區裏默默付出、積極貢獻、引領創新的傑出個人，我們正式啓動“OpenTiny年度貢獻者評選”活動！快為你喜愛的人氣貢獻者

vue.js , 前端 , Javascript

OpenTiny社區 - TinyEngine2.9版本發佈：更智能，更靈活，更開放!

前言 TinyEngine 是一款面向未來的低代碼引擎底座，致力於為開發者提供高度可定製的技術基礎設施——不僅支持可視化頁面搭建等核心能力，更可通過 CLI 工程化方式實現深度二次開發，幫助團隊快速構建專屬的低代碼平台。 無論是資源編排、服務端渲染、模型驅動應用，還是移動端、大屏端、複雜頁面編排場景，TinyEngine 都能靈活適配，成為你構建低代碼體系的堅實基石。 最近我們正式發佈TinyEn

vue.js , 低代碼 , 前端

OpenTiny社區 - 從千問靈光 App 看生成式 UI 技術的發展

本文由體驗技術團隊OpenTiny項目負責人莫春輝老師原創。 引言 2025 年 11 月 18 日，螞蟻集團全模態通用 AI 助手——靈光 App 發佈，上線兩週用户已創建 330 萬個閃應用。這一現象級數據的背後，不僅是開發效率的提升，更是人機交互範式正在從圖形用户界面（GUI）向生成式用户界面（GenUI）的跨越。在新的範式下，應用不再是預先固化的靜態資產，而是根據用户自然語言意圖實時生成。

vue.js , 人工智能 , 前端

OpenTiny社區 - 揭秘！TinyEngine低代碼源碼如何玩轉雙向轉換？

本文由TinyEngine低代碼源碼轉換功能貢獻者張珈瑜原創。 背景 當前主流低代碼平台普遍採用“單向出碼”模式，僅支持將 DSL（Domain Specific Language，領域特定語言）轉換為 Vue 或 React 源代碼。一旦開發者在生成代碼後手動修改了源碼，平台通常無法將這些修改同步回可視化編輯器，導致代碼與可視化配置割裂，嚴重影響開發效率與協同維護。本項目旨在構建低代碼 Vue/

vue.js , 低代碼 , 前端

OpenTiny社區 - 從理論到實踐：TinyEngine低代碼運行時渲染全攻略

本文由TinyEngine運行時渲染解決方案貢獻者龔昱帆同學原創。 前言 運行時渲染器用於在瀏覽器中直接渲染低代碼 Schema，提供與“出碼”並行的即時運行路徑，可在設計階段獲得接近真實的交互與數據效果。 1.啓動流程與案例講解 下面用一個非常簡單的示例頁面，串聯起從 Schema 到運行時渲染的完整流程。這個頁面包含： 一段提示文案； 一個顯示計數的按鈕； 點擊按鈕時，計數加一。 1

vue.js , 低代碼 , 前端

OpenTiny社區 - TinyEngine低代碼多人實時協作“原理”+“實操”全攻略

本文由周天意同學原創。 一般的多人協作業務需求一般是針對文檔，表格或者是製圖之類的，場景比較簡單，協同操作的對象為文字或者圖片，對象比較單一。 乍一看低代碼的多人協作看似無從下手，因為低代碼不僅涉及到頁面 canvas 中一些文字屬性的同步，還涉及到組件拖拽，樣式，綁定事件，高級屬性，甚至是代碼協同編輯的編輯與同步。那我們是如何在低代碼這個場景下實現多人協同編輯的呢。 TinyEngine低

低代碼開發平台 , 開源 , 前端

OpenTiny社區 - 不止按鈕和表格！TinyVue 偷偷上線 Space 組件，直接搞定「彈性+間距」佈局

本文由TinySpace組件貢獻者夏雯斐同學原創。 前言 近期，TinyVue正式發佈 v3.27.0版本，這次版本更新也增加了很多新特性，space組件就是其中比較重要的一個特性。 Space組件 是 OpenTiny Vue組件庫中的一個佈局容器組件，用於在子元素之間提供靈活的間距控制。 它支持水平與垂直方向排列、自動換行、對齊與分佈控制、以及順序調整等功能，能幫助開發者輕鬆實現響

vue.js , 組件庫 , 前端

OpenTiny社區 - 告別代碼焦慮，單元測試讓你代碼自信力一路飆升！

本文由體驗技術團隊董福俊原創。 背景 一次偶然，我看到了 Kent C. Dodds 的文章中的一個觀點：寫測試代碼的原因，是為了獲得對自己代碼的信心。我覺得深有感觸，於是翻看了kent的所有文章，結合我自己的開發體會，總結了一些關於前端單元測試的觀點。 認識單元測試 單元測試是什麼？ 單元測試（UT）是測試系統中的一環，測試系統還包含很多其它環，例如：端到端測試E2E、集成測試Integrati

單元測試 , 開源 , 前端

OpenTiny社區 - OpenTiny技術直播講師招募：與開源同行，點亮技術影響力！

OpenTiny企業級前端開發解決方案，正在尋找熱愛分享的技術達人！加入我們的直播講師團，與眾多開發者一起分享你的經驗，推動技術普惠，同時打造個人技術影響力！ 報名鏈接：https://www.wjx.cn/vm/tw7FOgC.aspx#

低代碼 , 組件化 , 開源 , 前端

OpenTiny社區 - “Performance面板”一文通，解鎖前端性能優化工具基礎用法！

本文由體驗技術團隊董福俊原創。 一、背景 在做前端頁面性能優化時，Performance面板是一個必不可少的工具。這個工具比較強大，既可以從全局視角分析整個網頁加載情況，又可以從代碼細節，挖掘某個具體環節的性能情況。但這個工具的結果可能讓人看着感覺難以理解，因為它本質上是將各種運行信息呈現給我們，而不是直接告訴我們問題在哪兒。我們需要將各類信息：瀏覽器加載過程、框架打包(webpack)、代碼編譯

性能優化 , 前端

OpenTiny社區 - TinyVue表格重構5大關鍵幀一次曝光！內存節省 27%，JS 執行時間減少 43% ，FPS 提升 110%

本文由體驗技術團隊岑灌銘原創。 前言 表格作為組件庫高頻使用的組件，它作為承載、展示和交互數據的核心載體,每一次卡頓都可能意味着時間的浪費與耐心的消磨。 然而有小夥伴反饋説，表格組件樹表數據滾動場景卡頓，偶爾會出現白屏現象，甚至會出現表頭和表體滾動不同步的情況。 後來據瞭解是小夥伴的機器性能較為普通，加上表格樹表大數據虛擬滾動確實存在較大的性能瓶頸，存在大量的計算與dom操作。

性能優化 , vue.js , 開源 , 前端

OpenTiny社區 - 實戰解析前端優化工具Performance面板！

一、背景 關於Performance面板的基礎用法介紹，可參考上一篇文章《“Performance面板”一文通，解鎖前端性能優化工具基礎用法！》。文章中還從一個HTTP請求的四階段的角度來介紹Performance圖的"觀看方式"，並重點介紹了worker線程跟主線程的協作關係 本篇文章中，我們將會以一個實際網頁 ——VPC列表頁為例，介紹Performance抓圖及分析的過程，並將上一篇文章中介

性能優化 , 前端

OpenTiny社區 - 老闆要排名可視化？我反手甩出TinyChart 排名進度圖

本文由張顥嚴同學原創。 前言 OpenTiny HUICharts 是一套功能強大的前端可視化圖表庫，提供豐富的圖表組件、支持 Vue、React、Angular 等主流前端框架，並內置多套主題且可靈活定製，同時完全兼容 ECharts API，使開發高性能、響應式的數據可視化應用變得簡單便捷。 RankProcessChart 基於 HUICharts 開發，專門用於展示排名及流程類數據的可視化

圖表庫 , 前端

OpenTiny社區 - 如何使用 TinyEditor 快速部署一個協同編輯器?

本文由曹裏林同學原創。 簡介 TinyEditor 是一個框架無關的富文本編輯器，既可以在原生 JavaScript 項目中使用，也可以在 Vue、React 等前端框架中使用。 本篇文章帶來的是如何使用 TinyEditor 最新的協同編輯模塊快速部署多人實時協作編輯。 前端集成 1、安裝TinyEditor 首先需要安裝 TinyEditor pnpm i @opentiny/fluent-

vue.js , 富文本編輯器 , 前端

OpenTiny社區 - 產品經理要“通過大小、時間範圍篩選”搜索？我 15 分鐘用 SearchBox 交差！

本文由體驗技術團隊陳家梅原創。 我不太喜歡嚴肅的表達，所以本文描述比較個人化，也希望大家可以放鬆，跟隨本文的思路聯想起來。 好了，瞭解一個東西離不開哲學三問：是什麼？怎麼來的？用來幹什麼？所以主要從這三方面展開描述， 我們將詳細介紹 TinyVue 組件庫的searchBox組件的功能特性。 這裏建議大家進入 SearchBox 文檔地址，跟着本文操作效果更佳，文檔地址：https://op

vue.js , 組件庫 , 開源 , 前端

OpenTiny社區 - TinyEditor v4.0 alpha：表格更強大，表情更豐富，上傳體驗超乎想象！

本文由體驗技術團隊Kagol原創，個人公眾號：前端開源星球。 TinyEditor 是一個基於 Quill 2.0 的富文本編輯器，在 Quill 基礎上擴展了豐富的模塊和格式，框架無關、功能強大、開箱即用。 源碼：https://github.com/opentiny/tiny-editor 官網：https://opentiny.github.io/tiny-editor 對於富文本編

富文本編輯器 , 開源 , 前端

OpenTiny社區 - OpenTiny訓練營實操體驗|輕鬆解鎖TinyVue智能組件開發Web應用

1.背景描述 TinyVue 是一套企業級的 Vue 框架下的組件庫，它具有跨端、跨框架的特性，同時支持 Vue2 和 Vue3，支持 PC 端和移動端瀏覽器。 本次實驗是通過改造一個使用 TinyVue 組件的常規 Web 應用，秒變為一個能夠對接大語言模型的智能應用。這個應用可以讓用户通過自然語言與網頁進行對話，直接“精準”操作網頁上的組件。 2.實驗簡介 首先，我們提供了一個用 Vue3 搭

vue.js , 組件庫 , 前端

OpenTiny社區 - TinyVue 智能組件庫：基於 MCP 協議，實現 AI 代替人操作 Web 組件

本文由體驗技術團隊 Kagol 原創。 2025年6月21日，我在華為開發者大會2025（HDC2025）開源論壇做了一場主題分享，給開發者們介紹我們 OpenTiny 團隊基於 MCP 協議實現 AI 代替人操作 Web 組件的技術。 傳統的 Web 應用都是由人來操作的，用户需要學習幫助文檔，操作成本相對較高，如果能讓 AI 來幫我們操作，我們只需要在關鍵節點進行確認的動作即可，是不是就非常

vue.js , 組件庫 , 前端

OpenTiny社區 - OpenTiny 體驗官實操活動 | 快速體驗 TinyVue 組件庫的智能化交互能力

實驗簡介 通過體驗基於標準 MCP 協議的Web 智能組件庫——TinyVue，開發者可以瞭解 AI 智能體控制 TinyVue 智能組件的各類行為。本次實驗主要是在 TinyVue 官網上，開發者能夠通過 AI 對話框，以語音或文字方式與網站組件進行互動，並且還能借助 VSCode Copilot、Cursor 等 IDE 工具，Dify、Coze 等智能體平台來操作這些組件。 實驗目標 按

vue.js , 組件庫 , 開源 , 前端

OpenTiny社區 - TinyVue v3.22.0 正式發佈：深色模式上線！集成 UnoCSS 圖標庫！TypeScript 類型支持全面升級！

我們非常高興地宣佈，2025年4月7日，TinyVue發佈了v3.22.0🎉。 本次 3.22.0 版本主要有以下重大變更： 支持深色模式 增加基於 UnoCSS 的圖標庫 更豐富的 TypeScript 類型聲明 支持 XSS 配置 詳細的 Release Notes 請參考：https://github.com/opentiny/tiny-vue/releases/tag/v3.

vue.js , 組件庫 , 前端

OpenTiny社區 - 直播分享|TinyVue 多端實戰與輕量圖標庫分享

TinyVue是一個跨端跨框架的企業級UI組件庫，基於renderless無渲染組件設計架構，實現了一套代碼同時支持Vue2和Vue3，支持PC和移動端，包含100多個功能豐富的精美組件，可幫助開發者高效開發Web應用。 4月22日19點，雲計算高級前端開發工程師，TinyVue 項目成員鄭志超、申君健老師，將為大家分享TinyVue多端模板與模式切換，並與大家介紹TinyVue輕量圖標庫的使用。

vue.js , 組件庫 , 開源 , 前端

OpenTiny社區 - 貢獻者招募|朋友你好，一起加入OpenTiny社區吧~

🌟開發者朋友你好！我們誠摯邀請你加入 OpenTiny 開源社區，一起進行項目共建，一起成為 OpenTiny 開源項目的一份子~ 近期，OpenTiny 社區收到很多開發者對於 TinyEngine 低代碼引擎二開教程的建議，項目工程師們根據社區開發者們的建議也緊鑼密鼓的推進項目的演進更新。與此同時，社區開發者們也提出了很多項目 issue，作為開源社區，OpenTiny 也希望邀請更多的開源

vue.js , 組件庫 , 低代碼 , 開源 , 前端

OpenTiny社區 - TinyVue的DatePicker 組件支持日期面板單獨使用啦！

本文由體驗技術團隊劉坤原創。 現代 Web 開發中，日期選擇器是不可或缺的組件之一。無論是用户填寫表單、篩選數據，還是設置預約時間，日期選擇器都能提供便捷的操作體驗。然而，在某些場景下，我們可能需要將日期面板單獨使用，例如在彈窗、浮層或抽屜中展示，以提升用户體驗。 DatePicker 組件全新升級，支持日期面板單獨使用！無論您是需要在複雜頁面中嵌入日期選擇器，還是希望在特定場景下提供獨立的日期選

vue.js , 組件庫 , 開源 , 前端 , Javascript