使用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.js\x1B[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('\b \b')
    }
  } 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)
})