三大框架玩转wterm Web终端：React、Vue 3与Svelte完全指南

三大框架玩转wterm Web终端React、Vue 3与Svelte完全指南【免费下载链接】wtermA terminal emulator for the web项目地址: https://gitcode.com/gh_mirrors/wterm1/wtermwterm 是一个面向 Web 的终端模拟器A terminal emulator for the web核心用 Zig 编写并编译为仅约 26 KB 的 WASM 二进制直接在 DOM 中渲染文本天然支持文本选中、复制粘贴和屏幕阅读器。本文是一份面向初学者的完整指南教你如何在React、Vue 3 与 Svelte三大主流框架中快速集成 wterm Web 终端组件几分钟内就能在自己的项目里跑起一个在线终端 为什么选择 wterm 浏览器终端相比 Canvas 渲染的传统方案如 xterm.jswterm 走的是DOM 渲染路线带来了几个实际好处️原生文本选择与复制用户可以直接选中终端文字并复制无需额外实现♿无障碍支持屏幕阅读器可以直接读取挂载的终端行接近原生的性能Zig 编译的 WASM 核心解析 VT100/VT220/xterm 转义序列内置主题solarized-dark、monokai、light开箱即用框架无关的核心同一套终端核心React / Vue / Svelte 各自提供官方组件包wterm 的包结构非常清晰每个框架都有独立的 npm 包包名说明wterm/core无头 WASM 桥接与 WebSocket 传输wterm/domDOM 渲染器Vanilla JS 终端wterm/reactReact 组件 useTerminalHookwterm/vueVue 3 组件 模板引用 APIwterm/svelteSvelte 组件 回调 API快速开始三步安装wterm终端包无论你用哪个框架安装步骤都只有三步第一步安装对应框架包 DOM 渲染层# React 项目 npm install wterm/dom wterm/react # Vue 3 项目 npm install wterm/dom wterm/vue # Svelte 项目 npm install wterm/dom wterm/svelte svelte第二步引入组件和主题样式CSS 内置全部主题一次导入即可第三步把Terminal /放进页面 —— 输入默认会自动回显立即可交互 ✨ WASM 二进制已内嵌在包中无需任何额外配置如需单独托管可传入wasmUrl属性。React 中使用wterm终端组件 useTerminal HookReact 版本提供Terminal组件和useTerminal钩子两者分工明确import { Terminal, useTerminal } from wterm/react; import wterm/react/css; function App() { const { ref, write } useTerminal(); return ( Terminal ref{ref} thememonokai onData{(data) socket.send(data)} / ); }onData接管键盘输入通常转发给 WebSocket 后端的 PTYonReady(wt)WASM 加载完成后触发拿到WTerm实例onTitle/onBell/onResize监听终端标题、响铃和尺寸变化useTerminal返回的命令式工具write/resize/focus让你可以在任意地方写入数据源码见 useTerminal.ts组件实现见 Terminal.tsx。Next.js 用户注意在next.config.mjs中将两个包加入transpilePackages即可const nextConfig { transpilePackages: [wterm/dom, wterm/react], };完整参考 react.mdx 文档。Vue 3 中使用wterm终端事件 模板引用Vue 版本采用组件事件 模板引用的惯用模式data、ready、resize等都作为组件事件监听script setup langts import { useTemplateRef } from vue; import { Terminal } from wterm/vue; import wterm/vue/css; const term useTemplateRef(term); function onData(chunk: string) { socket.send(chunk); } /script template Terminal refterm :thememonokai dataonData readyonReady / /template通过模板引用term.value可以调用write()、resize(cols, rows)、focus()。可用事件一览事件载荷说明datastring用户输入无监听时自动回显readyWTerm初始化完成titlestring转义序列修改标题bellnumberBEL 响铃计数resizecols, rows终端尺寸变化errorunknownWASM 加载失败一个真实的双终端演示浏览器内 Bash WebSocket 本地 Shell可以看 App.vue它展示了data、resize、ready的完整接线方式。Svelte 中使用wterm终端回调属性 bind 绑定Svelte 版本使用回调 props bind:this模式更符合 Svelte 的声明式风格script langts import { Terminal, type TerminalHandle } from wterm/svelte; import wterm/svelte/css; let terminal: TerminalHandle | undefined; function handleData(data: string) { socket.send(data); } /script Terminal bind:this{terminal} {handleData} thememonokai / button onclick{() terminal?.write(hello\r\n)}写入/button几个 Svelte 特色细节bind:this{terminal}直接绑定组件实例调用write/resize/focusbind:instance可获取底层WTerm实例同时接受classNameReact 习惯和class两种写法方便代码跨框架复用官方 Svelte 示例 App.svelte 演示了搭配wterm/just-bash实现纯浏览器内 Bash 的玩法ls、cat README.md都能直接跑无需任何后端。三大框架API对照属性与事件速查表三个框架的 API 语义完全对齐切换框架几乎零成本 功能ReactVue 3Svelte尺寸cols/rows属性:cols/:rows属性cols{88} rows{28}主题thememonokai:theme属性themeprop输入事件onDatadataonData回调 prop就绪事件onReadyreadyonReady回调 prop命令式写入useTerminal().write模板引用term.value.writebind:this后调用自动缩放autoResizeautoResizeautoResize共有属性cols、rows、wasmUrl、theme、autoResize、maxImageWidth、maxImageHeight、cursorBlink、debug在三个包中行为一致。进阶玩法接入PTY后端与浏览器内Bash让终端真正活起来有两条主流路线路线一WebSocket 连接真实 PTY把onData收到的数据通过 WebSocket 发给服务端 PTY如node-pty服务端输出再write回终端即可。wterm 还提供内置的WebSocketTransport支持二进制分帧和自动重连SSH 场景可以参考 examples/ssh/ 示例。路线二纯浏览器内 Bash零后端wterm/just-bash在浏览器内模拟了一个 Bash 环境支持ls、cat、cd等命令还有 CtrlR 历史搜索和 Tab 补全。适合做演示、教学和轻量工具三个框架示例都有现成接线React 文档react.mdxVue 示例examples/vue/src/App.vueSvelte 示例examples/svelte/src/App.svelte总结选择最适合你的wterm框架包场景推荐包React / Next.js 项目wterm/reactuseTerminalVue 3 项目wterm/vue 模板引用Svelte 项目wterm/sveltebind:this无框架的原生 JSwterm/domwterm 的核心理念是一个 WASM 终端核心多套框架组件。三套绑定共享同一个 WTerm DOM 渲染器你在任何一个框架里踩过的坑、积累的经验都可以直接迁移。现在就装上对应框架的包用三个代码块的最小示例把 Web 终端接入你的项目吧 ⌨️【免费下载链接】wtermA terminal emulator for the web项目地址: https://gitcode.com/gh_mirrors/wterm1/wterm创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考