首先安装vue-cli用于创建vue的项目模板
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project
注意：simulatedgreg/electron-vue是electron+vue的项目模板，my-project是我起的项目名称，运行命令之后需要设置一些参数，如果用不到的可以选no。然后 cd my-project，运行npm install安装需要的引用。
然后我们就得到了如下的项目结构：

其中src是源码，分为main和renderer两个部分，分别对应electron的主进程和渲染进程，此时运行：npm run dev即可启动项目，打开的界面如下：

然后为了修改界面，我们将renderer下面的components文件夹清空（里面是各种vue的界面文件），然后新建main.vue文件，然后修改renderer下面的router/index.js（vue的路径文件）里面的路由，将landing-page相关的路由删除，添加main相关的路由，具体改后如下：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'main',
      component: require('@/components/main').default
    },
    {
      path: '*',
      redirect: '/'
    }
  ]
})

我们打算在main.vue里面做terminal，首先，需要安装相关的引用，运行npm install --save xterm node-pty安装xterm和node-pty。然后main.vue如下所示：

<template>
    <div ref="xterm"></div>
</template>

<script>
  import { Terminal } from 'xterm'
  import os from 'os'
  import 'xterm/dist/xterm.css'
  import * as fit from 'xterm/lib/addons/fit/fit'
  import * as attach from 'xterm/lib/addons/attach/attach'
  const pty = require('node-pty')
  Terminal.applyAddon(fit)
  Terminal.applyAddon(attach)
  export default {
    name: 'mainPage',
    methods: {
      init () {
        const shell = process.env[os.platform() === 'win32' ? 'COMSPEC' : 'SHELL']
        let env = process.env
        env['LC_ALL'] = 'zh_CN.UTF-8'
        env['LANG'] = 'zh_CN.UTF-8'
        env['LC_CTYPE'] = 'zh_CN.UTF-8'
        const ptyProcess = pty.spawn(shell, [], {
          name: 'xterm-color',
          cols: 80,
          rows: 30,
          cwd: process.cwd(),
          env: env,
          encoding: null
        })
        const xterm = new Terminal({
          cols: 80,
          rows: 30,
          theme: {
            foreground: 'rgb(254,239,143)',
            background: 'rgb(22,102,47)',
            cursor: 'rgb(254,239,143)'
          }
        })
        xterm.open(this.$refs.xterm)
        xterm.on('data', (data) => {
          console.log(Buffer.from(data))
          console.log('xterm:' + Buffer.from(data).toString())
          ptyProcess.write(Buffer.from(data))
        })
        ptyProcess.on('data', function (data) {
          console.log(data)
          console.log('ptyProcess:' + data.toString())
          xterm.write(data.toString())
        })
        // ptyProcess.write('export LANG=zh_CN.UTF-8\n')
      }
    },
    mounted () {
      this.init()
    }
  }
</script>

<style scoped>
</style>

运行npm run dev之后会出错，没错，会出错，emmm。错误如下：

这是由于node-pty是原生模块的原因，对于这一类模块，需要使用electron-rebuild重新build一下，当然你也可以在package.json的scripts里面加入命令"postinstall": “electron-builder install-app-deps”，这样的话，install之后会自动build原生模块，不过我喜欢使用electron-rebuild重建一下，具体解决方案如下：
npm install electron-rebuild --save-dev
./node_modules/.bin/electron-rebuild
注意：我之前使用import pty from 'node-pty’得到了undefined，，，，不太清楚为什么，还是使用require吧。
然后就好了，注意我使用的是mac系统，windows的命令好像是electron-rebuild.cmd，另外windows遇到了很多坑，建议出问题的话，可以把electron更新到4.0以上，我之前就是这么解决的，，，，

好了，废话少说，接下来运行npm run dev，得到如下的界面：

有点奇怪有没有，你说颜色？并不是，这是我故意设置的☺，仔细看，会发现有一圈白边，不太好看，
我们在main.vue的style里面加上如下内容（记得把scoped删掉）

<style>
body {
  margin: 0
}
</style>

最后为了窗口大小和我们的terminal大小一致，我们到main文件夹下面的index.js文件里面修改mainWindow的参数(大概意思就是设置背景色和terminal同色，大小一致，禁止修改窗口大小)：

mainWindow = new BrowserWindow({
    height: 540,
    useContentSize: true,
    width: 720,
    backgroundColor: '#16662F',
    resizable: false
  })

然后我们可以运行npm run build打包。在build的目录下我们可以找到dmg的安装包（mac），打开之后，最终的效果图如下：

当然为了更好的用户体验，可以允许修改窗口大小，同时resize terminal的大小，不过这就需要更多的计算了，在这里就不介绍了。然后，terminal的颜色是可以自定义的，我就喜欢绿色，，，，
git地址（加上了改变颜色，自动resize的等）：https://github.com/gaograce/resizeTerminal.git