vue网页使用远程终端加终端多开

       只会前端所以只有前端代码，想看ws服务怎么弄的就不用看了~

        这边终端用到的前端插件是xterm。首先需要三个插件，都是xterm的依赖。

        单独一个终端：使用xterm，创建一个标签后，将标签给予xterm作为终端标签。然后写入终端所需如光标、行数、样式。根据是否keep-alive缓存决定在created和mounted里面将带属性的xterm给予标签（initTerminal）并链接ws服务（websocket）（在vue里面分别写成两个方法，括号内为我起的方法名）。

        多开终端：xterm获取标签时要根据id，那根据打开终端的个数动态创建标签并赋予id（比如用字母和循环的index数字组合）。然后将initTerminal和websocket改为传参的方法，这样就可以确定要创建的标签和要链接的ws服务是哪个标签了。然后在添加删除终端的地方做好ws服务的断开就可以了，写一个数组存放服务，退出哪个根据index做好xterm带的close()方法。【所有方法要对应好标签名，根据参数传递的方法判断要执行的操作是哪一个终端的】

        多开除了麻烦一点和开一个是一摸一样的，就是做好服务关闭。否则服务多了后台受不了。

1、xterm

npm install xterm

2、xterm-addon-fit

npm install xterm-addon-fit

3、xterm-addon-attac

npm install xterm-addon-attach

还用到了Elementui，这个就不教怎么安装了一搜就有

直接粘贴代码，里面每一句都注释了，先看懂了再根据需求改吧。

  除了css里面几乎每句都有注释，复制完慢慢改。