vue-tui：用 Vue 开发终端界面，3D 旋转 Logo 只是开胃菜
来源：微信公众号
最近，Vue 生态又冒出了一个很离谱的项目。
终端里，一个巨大的 Vue Logo 正在旋转，周围还环绕着大量 Vue 核心贡献者头像。可以拖拽、旋转、缩放，甚至还带实时动画。
更关键的是，这套 3D 效果居然是用 Vue 写的。
尤雨溪看到之后，直接转发并发出灵魂疑问：3D in the terminal with Vue?!
vue-tui 是什么？
vue-tui 是一套用 Vue 开发终端界面的组件库和渲染工具链。
你依然可以使用熟悉的 Vue 能力：ref、computed、watch、Composition API、Vue 组件、模板语法、响应式状态。区别在于，最终渲染目标不再是浏览器中的 DOM，而是终端。
<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<TBox>
<TText>当前数量：{{ count }}</TText>
</TBox>
</template>
写法和普通 Vue 页面非常接近。只需要维护状态和组件结构，底层渲染交给 vue-tui。
内置组件一览
| 组件 | 用途 |
|---|---|
| TBox | 容器盒子 |
| TText | 文本 |
| TInput | 输入框 |
| TList | 列表 |
| TSelect | 选择器 |
| TTable | 表格 |
| TTree | 树形结构 |
| TDialog | 弹窗 |
| TCommandPalette | 命令面板 |
| TDataTable | 数据表格 |
菜单、表格、输入框、弹窗、树形结构、命令面板，都可以直接用 Vue 组件完成。
一套代码，多端运行
vue-tui 有一个很有意思的特性：一套 Vue 组件模型，可以运行在多个渲染环境：
- 浏览器 DOM
- 终端 stdout
- Headless tests
也就是说，可以先在浏览器中调试终端界面，然后再运行到真正的 CLI 中。测试时，也不需要每次都拉起真实终端。
它真正瞄准的是 AI CLI
看看现在的终端 AI 工具：Claude Code、Codex CLI、Gemini CLI、OpenCode——它们已经不再是传统意义上的命令行程序。
一个 AI CLI 通常需要同时展示：用户输入、模型思考状态、流式回答、Markdown、代码块、工具调用、Diff、运行日志、错误信息、多轮会话……过去一条一条执行 console.log() 的方式，已经很难支撑这种复杂界面。
vue-tui 对 AI 场景做了专门优化，其中非常重要的一项是流式 Markdown 渲染。项目可以针对不同 Markdown 内容进行单独处理，包括标题、列表、表格、链接、图片、代码块、Mermaid 等。
AI 输出内容时，是一个 Token 一个 Token 往外吐的。如果每新增一点文字，就重新解析整段历史内容，性能很快就会出问题。vue-tui 对流式内容做了单独的解析和渲染设计——已完成的内容固定下来，只更新还在生成的部分。
这类能力，明显是冲着 AI 对话、Agent Console 和实时日志来的。
总结
vue-tui 让 Vue 开发者可以用熟悉的方式写终端应用，不需要重新学习另一套 UI 开发思路。
它真正瞄准的是 AI 时代的新一代 CLI——终端正在重新变成一个完整的应用运行环境，承载智能 Agent、实时交互和复杂 UI。而 Vue，也正在从一个前端框架，逐渐变成一个更通用的 UI 开发模型。
GitHub：https://github.com/Simon-He95/vue-tui
官网：https://vue-tui.pages.dev/