Vue-tui 0.1 发布

Vue 官方原生终端 UI 框架

实用代码示例

基础交互计数器

<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>

项目入口文件

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

组件单元测试示例

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");});


Vue-tui 0.1 发布
http://localhost:8090/archives/vue-tui-0.1-fa-bu
作者
Administrator
发布于
2025年11月26日
许可协议