vuejs-ai/vue-tui

解決的問題

vue-tui 是一個專為建構互動式終端使用者介面（TUI）而設計的 Vue 原生應用框架。它讓開發者能使用與現代 Web 開發相同的元件化架構與反應式狀態管理，來建立複雜的終端應用，無需手動管理終端轉義碼或低階畫面繪製。

工作原理

此框架提供一個自訂的 Vue 3 渲染器，將 Vue 元件轉換為終端輸出。它使用 Yoga 排版引擎（與 React Native 使用的引擎相同）在終端中實作 Flexbox 排版。開發者可使用 Vue 單一檔案元件（SFC）或 JSX/TSX 來撰寫介面，框架則透過一組專用的組合式函數與元件，處理渲染、輸入處理與焦點管理。

適用對象

針對希望以專業開發體驗建構複雜終端應用的 Node.js 開發者，包含透過 Vite 插件實作的熱模組取代（HMR）與決定性測試環境。

主要特色

• Vue 原生工作流程：支援 Vue SFC、JSX 與 TSX 來建構終端 UI。
• Flexbox 排版：整合 Yoga 引擎，實現響應式終端排版。
• 開發者體驗：透過 @vue-tui/vite 提供實驗性 HMR 支援，實現終端介面的即時更新。
• 完整的工具鏈：包含專用測試套件 @vue-tui/testing，可模擬終端輸入並檢視畫格內容。
• 豐富的元件庫：提供 <ScrollBox>、<Spinner> 與 <Table> 等高階元件。
• 輸入處理：提供標準化的組合式函數，用於管理文字、貼上與鍵盤事件。