vue-tui 0.1 发布：Vue 3 终端 UI 框架，集成 Yoga Flexbox 与响应式开发体验

@vue-tui/runtime 已进入公开测试阶段，API 正趋于稳定，目前还在广泛收集社区反馈，以便在 1.0 发布前完成最终定型。CLI 及开发工具仍处于实验阶段，后续可能有所调整，暂不建议用于生产环境。

项目简介

vue-tui 将 Vue 3 的响应式系统与 <script setup> 的开发体验完整迁移至终端——你不仅保留了 Web 端熟悉的组件模型，底层还由纯正的 Yoga Flexbox 驱动布局，最终渲染为终端帧。

目标受众：深耕 Vue 生态的团队。如果你希望用 <script setup> 与响应式能力构建终端 UI，而不愿为了写个 CLI 工具去强行引入 React，那 vue-tui 正是为你准备的。如果技术栈是 React，请直接使用 Ink。vue-tui 的诞生，就是为了终结“终端 UI 开发非 React 不可”的局面。

核心特性

• 终端原生的 Vue 响应式 — 完美支持 <script setup>、shallowRef、computed 和 watch。
• 纯正的 Yoga Flexbox 布局 — 提供 Box / Text 等基础图元组件，底层渲染引擎与 Ink、React Native 一脉相承。
• 吸收 React Ink 久经考验的最佳实践 — 直接对标 Ink v7.0.4，并将其设计哲学融入 Vue 的体系中。
• 强悍的现代终端能力 — 支持 Kitty 键盘协议、安全粘贴模式、帧动画，以及原生面向屏幕阅读器的 ARIA 线性解析器。

快速上手

npm i @vue-tui/runtime vue

<script setup lang="ts">
import { shallowRef } from 'vue'
import { Box, Text, useInput } from '@vue-tui/runtime'

const count = shallowRef(0)

useInput((input) => {
  if (input === '+') count.value++
})
</script>

<template>
  <Box>
    <Text>
      Count: {{ count }} (press + to increment)
    </Text>
  </Box>
</template>

代码库中附带了更多示例：基于 <template> 与 JSX 的计数器、Flappy Bird 小游戏，还有一个 AI 编程助手（Coding-agent）的 UI 界面。

鸣谢

本项目站在 React Ink 的肩膀上构建而成。正是 Ink 定义了“优秀的组件化终端渲染器”，才让 vue-tui 有了成熟的参考与验证依据，在此深表感谢！

如果想持续了解 Vue 3 生态在终端开发与工程化方面的最新实践，欢迎访问 云栈社区 获取更多内容。

参考资料

• [1] Ink: https://github.com/vadimdemedes/ink