小編精選 - 技術文章翻譯 · 06月29日

尤雨溪轉發：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>