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