34.基于xterm.js 实现Vue版本终端terminal

最新推荐文章于 2025-03-14 16:27:47 发布

越努力，越幸运..........

最新推荐文章于 2025-03-14 16:27:47 发布

阅读量6.2k

点赞数

分类专栏： js继承文章标签： javascript html vue.js

本文链接：https://blog.youkuaiyun.com/weixin_47254130/article/details/120271300

版权

本文档展示了如何使用Vue结合xterm.js和WebSocket创建一个前端终端。通过安装xterm.js及相关插件，配置Vue组件监听WebSocket连接，实现实时数据交互。后端使用node-pty和ws库来读写终端。当WebSocket连接成功后，前端初始化终端并调整大小，同时监听窗口变化以适应不同屏幕尺寸。此外，还提供了在输入后滚动到终端底部的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于xterm.js 实现Vue版本终端terminal

前端实现

xterm

npm install --save xterm

xterm-addon-fit

xterm.js的插件，使终端的尺寸适合包含元素。

npm install --save xterm-addon-fit

xterm-addon-attach

xterm.js的附加组件，用于附加到Web Socket

npm install --save xterm-addon-attach

<template>
    <div id="xterm" class="xterm" />
</template>

<script>
import 'xterm/css/xterm.css'
import { Terminal } from 'xterm'
import { FitAddon } from 'xterm-addon-fit'
import { AttachAddon } from 'xterm-addon-attach'

export default {
  name: 'Xterm',
  props: {
    socketURI: {
      type: String,
      default: ''
    },
  },
 watch: {
    socketURI: {
      deep: true, //对象内部属性的监听，关键。
      immediate: true,
      handler() {
        this.initSocket();
      },
    },
  },
  mounted() {
    this.initSocket()
    window.addEventListener('resize', this.onTerminalResize);
  },
  beforeDestroy() {
    this.socket.close()
    this.term&&this.term.dispose()
  },
  methods: {
   initTerm() {
      // this.initSocket();
      let term = new Terminal({

最低0.47元/天解锁文章