尤雨溪转发：Vue-tui 0.1 发布！Vue 终于杀进终端！

做过终端 CLI、命令行交互工具的前端应该都知道：之前想做好看、可交互的终端界面，基本只能用 React Ink。

Vue 开发者一直很被动：写全站 Vue，唯独做终端工具，必须切 React 语法。

现在 vue-tui 来了，Vue 官方原生终端 UI 框架，彻底解决这个痛点。

不用 React，Vue 开发者专属优势

! $图片$ (data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='1px' height='1px' viewBox='0 0 1 1' version='1.1' xmlns='www.w3.org/2000/svg' xmlns:xlink='www.w3.org/1999/xlink'... stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0'%3E%3Cg transform='translate(-249.000000, -126.000000)' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)

以往开发交互式终端界面，只能依赖 React Ink，Vue 开发者被迫切换技术栈，成本极高。而 vue-tui 完美适配 Vue 技术栈，优势拉满：

1. 技术栈无缝统一 原生支持 Vue3、setup 语法、SFC 单文件、响应式 API，日常开发的 Vue 语法直接复用，无需学习 React 相关知识。

2. 极致开发体验 支持终端 HMR 热更新，修改代码实时刷新界面，无需重启服务，大幅提升 CLI 开发效率。

3. 自带工程化能力 官方配套测试工具，支持组件级终端测试，不用手动封装复杂的终端模拟逻辑。

4. 贴合 Vue 开发思维 通过组合式API管理终端输入、焦点、窗口状态，和网页开发逻辑一致，无学习割裂感。

极简实用代码示例

全程原生 Vue 写法，简单易上手，覆盖核心交互、挂载、测试场景。

基础交互计数器（SFC 完整版）

xml 复制代码

<script setup lang="ts">import { shallowRef } from "vue";import { Box, Text, useInput } from "@vue-tui/runtime";// 纯Vue响应式状态const count = shallowRef(0);// 监听终端键盘输入useInput((input) => {  if (input === "+") count.value++;  if (input === "-") count.value--;});</script><template>  <Box gap={2}>    <Text>计数：</Text>    <Text bold color="green">{{ count }}</Text>    <Text dimColor>按 +/- 调整数值</Text>  </Box></template>

项目入口文件

javascript 复制代码

import { createApp } from "@vue-tui/runtime";import App from "./app.vue";// 直接挂载到终端createApp(App).mount();

组件单元测试示例

自带测试库，一键模拟键盘输入、校验终端输出：

python 复制代码

import { test, expect } from"vitest";import { render } from"@vue-tui/testing";import Counter from"./app.vue";test("计数器正常响应按键", async () => {const { lastFrame, stdin } = await render(Counter);  expect(lastFrame()).toContain("计数：0");// 模拟按 + 键await stdin.write("+");  expect(lastFrame()).toContain("计数：1");});

终端布局与样式：极简 Flex 写法

基于 Yoga 布局引擎（和 React Ink、React Native 同源），摒弃繁琐的字符排版，直接使用前端通用的 Flex 布局，零学习成本。

Box 布局容器 终端核心容器，支持横竖排列、间距、边距、对齐、边框背景，属性和 CSS Flex 基本一致。

Text 文本样式 支持加粗、变色、置灰、下划线、文字截断，快速实现各类终端文本样式。

Spacer自适应占位 自动填充剩余空间，轻松实现两端对齐、均分布局效果。

简单布局案例（两端对齐状态栏）

xml 复制代码

<template>  <Box direction="row" justifyContent="space-between" gap={3}>    <Text color="blue">终端工具 v1.0</Text>    <Spacer />    <Text dimColor>运行中</Text>  </Box></template>

全方位终端交互能力

键盘监听：捕获所有按键、方向键、修饰键，快速做交互指令
焦点管理：支持 Tab 切换焦点、手动聚焦，适配终端表单
粘贴事件：完整捕获批量粘贴文本，适配 AI 对话、批量录入场景
窗口适配：实时监听终端宽高，自动适配窗口缩放
动画能力：内置帧动画，可开发终端小游戏、动态进度界面
无交互输出：支持字符串渲染，适配 CI 日志、流水线快照

Vue 开发者要不要入坑？

结论先行：非常值得。

只要你需要做 Node 脚手架、CLI 工具、终端面板、本地AI终端客户端、运维监控界面，vue-tui 就是最优解。

核心入坑理由

不用切换技术栈，Vue 经验零浪费
开发体验吊打传统终端开发，热更新、组件化、可测试
Vue 官方维护，生态靠谱，核心 API 已经稳定