3

我试图将node-pty和xtermjs集成到 Electron 应用程序中。我正在使用 VueJS 作为前端，并希望在应用程序内创建一个终端界面。那么如何构建我的代码，以便我可以将它用作这样的组件：

<Terminal></Terminal>

我尝试了以下方法，但无法使其完全正常工作。

// Terminal.vue component.

<template>
  <v-container fluid class="pa-1">
    <div style="overflow-y:scroll!important" class="pa-1 black" id="terminal"></div>
  </v-container>
</template>

<script>
import "xterm/css/xterm.css";
import { Terminal } from "xterm";
import { FitAddon } from "xterm-addon-fit";

const os = require("os");
const pty = require("node-pty");

const shell = process.env[os.platform() === "win32" ? "COMSPEC" : "SHELL"];

const ptyProc = pty.spawn(shell, [], {
  name: "xterm-color",
  env: process.env
});

const term = new Terminal({
  rows: 40,
  experimentalCharAtlas: "dynamic"
});

const fitAddon = new FitAddon();

term.loadAddon(fitAddon);

export default {
  data() {
    return {
      term: null
    };
  },

  mounted() {
    console.log("entered");

    term.open(document.getElementById("terminal"));

    fitAddon.fit();

    term.onData(data => ptyProc.write(data));
    ptyProc.on("data", function(data) {
      console.log(data);
      term.write(data);
    });

    term.onResize(size => {
      ptyProc.resize(
        Math.max(size ? size.cols : term.cols, 1),
        Math.max(size ? size.rows : term.rows, 1)
      );
    });

    console.log("exiting...");
  }
};
</script>

通过上面的代码，我实现了以下界面：

终端接口

在这里，许多功能，如终端历史、颜色、一些速记不起作用，这些功能在下面的 vanilla javascript 实现中运行良好： 

const {Terminal} = require('xterm');
const os = require('os');
const pty = require('node-pty');
const {FitAddon} = require('xterm-addon-fit');

const shell = process.env[os.platform() === 'win32' ? 'COMSPEC' : 'SHELL'];

const ptyProc = pty.spawn(shell, [], {
    name: 'xterm-color',
    env: process.env
});

const term = new Terminal({
    experimentalCharAtlas: 'dynamic',
    rows: 42
});

const fitAddon = new FitAddon();

term.loadAddon(fitAddon);
term.open(document.getElementById('opt1-panel'));
fitAddon.fit();

term.onData(data => ptyProc.write(data));
ptyProc.on('data', function(data){
    term.write(data);
});

term.onResize(size => {
    ptyProc.resize(
        Math.max(size ? size.cols : term.cols, 1),
        Math.max(size ? size.rows : term.rows, 1)
    );
});

下图显示了上面代码的结果，这是一个没有 vuejs 的不同项目。 使用纯 JS

那么我怎样才能让它在 vuejs 中工作。

刚开始学习 VueJS 和 web 的东西，所以如果它很明显，请原谅。

4

0 回答 0