使用xterm报错：Error: Terminal requires a parent element、及删除时报错：xterm.js: Parsing error 的问题

一、报错：Error: Terminal requires a parent element.

　　按官网例子，我最初是在 created() 里加载的方法

// html
<div id="terminal"></div>

// js
import { Terminal } from "xterm";
import "xterm/css/xterm.css";
export default {
  created () {   // 不要在 created 里写哦，因为需要使用 dom
    var term = new Terminal();
    term.open(document.getElementById('terminal'));
    term.write('Hello from x1B[1;3;31mxterm.jsx1B[0m $ ')
    term.onData((val) => {
      term.write(val);
    }); 
  }
}

　　报错：

Error: Terminal requires a parent element.
    at t.open (xterm.js?ba0f:1)
    at e.open (xterm.js?ba0f:1)

　　解决原因也很简单，改成 mounted() 即可，因为需要使用到 dom，所以必须等 dom 结构准备好之后才能初始化。

二、命令删除时报错：xterm.js: Parsing error

1、问题背景

　　当我使用 xterm 示例的时候，无法删除写错的字符，一删除就报错，报错信息如下：

　　xterm.js?ba0f:1 xterm.js: Parsing error:  {position: 0, code: 127, currentState: 0, collect: 0, params: e, …}

2、解决方案：

　　查看 api 文档发现有个 onKey ，其返回参数是个 Event（Object），那么通过这个 event 我们就可以做很多事情

　　代码处理如下：通过判断 keyCode 等就可以知道删除时的情况

// 添加事件监听器，支持输入方法
term.onKey(e => {
  const printable = !e.domEvent.altKey && !e.domEvent.altGraphKey && !e.domEvent.ctrlKey && !e.domEvent.metaKey
  if (e.domEvent.keyCode === 13) {
    term.prompt()
  } else if (e.domEvent.keyCode === 8) { // back 删除的情况
    if (term._core.buffer.x > 2) {
      term.write(' ')
    }
  } else if (printable) {
    term.write(e.key)
  }
  console.log(1,'print', e.key)
})

　　但是 onKey 不支持粘贴，所以使用 onData() 去支持粘贴

term.onData(key => {  // 粘贴的情况
  if(key.length > 1) term.write(key)
})

　　这样就可以删除啦，详细代码见这篇博客：浅析如何使用前端终端组件Xterm.js制作一个web terminal

　　顺便说一嘴的是：这个删除是我在纯前端测试的时候发现的问题，然后就这样解决了，实际上在与后端websocket链接之后就不会有这个问题的，你的删除指令发到后台，后台去将信息返回，然后你将信息write，就不会有这个问题了，就可以直接使用 onData() 即可。

　　要记住一点的是这个 xterm 就相当于是把每一步操作都发给后台，后台也同时把每一个操作去发给 ssh，相当于在 ssh 上做同步操作。所以删除啊，左右移动之类的，都没有问题。我之前一直没想清楚，后来想清楚了，很多就说的通好理解了。相当于就是你的每一步操作，都由websocket发给后台，后台再将每一步操作通过ssh去发给终端，最后就是同步终端操作命令。这个想通就很好理解了。