Vue 终端开发桌面 vue-tui JavaScript 写一个像 Claude Code、Gemini CLI 那样的终端应用绕不开的名字通常是 React Inkvue-tui 安装运行时npm install vue-tui/runtime vuescript setup langts import { shallowRef } from vue import { Box, Text, useInput } from vue-tui/runtime const count shallowRef(0) useInput((input) { if (input ) count.value if (input -) count.value-- }) /script template Box TextCount: /Text Text bold colorgreen{{ count }}/Text Text dimColor (/- to change)/Text /Box /template项目同时支持 Vue SFC 和 JSX。喜欢模板语法的开发者可以继续写templatevue-tui 使用 Yoga 计算布局也就是 React Native 和 Ink 背后的 Flexbox 引擎。核心组件Box负责方向、对齐、间距、边框和背景Text负责文字样式、截断和换行。这意味着前端开发者熟悉的flexDirection、justifyContent、alignItems等布局思路可以继续沿用。它不是用 CSS 画终端而是把 Flexbox 的布局模型映射到字符网格。这一步很关键因为复杂 TUI 真正难维护的部分通常就是布局系统vue-tui 0.1 一组偏完整的交互能力键盘与焦点管理支持按键监听、Tab 导航和组件级焦点控制现代终端输入支持 Kitty keyboard protocol 和 bracketed paste动画能力提供基于帧的动画驱动窗口响应式终端尺寸变化后可以重新计算界面无障碍支持能够检测屏幕阅读器并提供线性化输出组件测试在隔离的模拟终端中渲染组件、输入按键、逐帧断言结果vue-tui/testing。开发者可以渲染组件模拟用户按下、-或方向键再检查最后一帧输出是否符合预期vue-tui 提供了实验性的 CLI执行vue-tui dev后可以通过 Vite 驱动终端里的 HMR。修改app.vue界面会立即更新。vue-tui 大量参考了 React Ink 的成熟设计包括组件模型、Yoga 布局、焦点系统和渲染管线。参考TuiVue TermUI | The Modern Terminal UI FrameworkGitHub - vuejs-ai/vue-tui: The Vue framework for terminal UIs. SFC JSX, Yoga flexbox, HMR, and testing out of the box. · GitHubGitHub - Simon-He95/vue-tui: Vue 3 terminal UI toolkit for browser DOM and CLI stdout: components, ANSI rendering, markdown transcripts, log views, and agent consoles. · GitHub