electron-vue多窗口

electron-vue是一个将Vue和Electron结合的项目，可以方便地创建多窗口应用程序。下面是一个演示如何在electron-vue中创建多窗口的例子：

1. 首先，在renderer目录下创建一个新的Vue组件，例如`SecondWindow.vue`，用于作为第二个窗口的内容。

<template>
  <div>
    <h1>Second Window</h1>
    <p>This is the content of the second window.</p>
  </div>
</template>

<script>
export default {
  name: 'SecondWindow'
}
</script>

2. 在`renderer/router/index.js`文件中，添加一个新的路由路径，用于打开第二个窗口。

import SecondWindow from '@/components/SecondWindow.vue'

// ...

const routes = [
  // ...
  {
    path: '/second',
    name: 'SecondWindow',
    component: SecondWindow
  }
]

// ...

3. 在`renderer/App.vue`文件中，添加一个按钮，用于打开第二个窗口。

<template>
  <div>
    <h1>Main Window</h1>
    <p>This is the content of the main window.</p>
    <router-link to="/second">Open Second Window</router-link>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

4. 在`renderer/main.js`文件中，添加一个新的窗口创建函数，用于创建第二个窗口。

import { createApp } from 'vue'
import SecondWindow from './components/SecondWindow.vue'

// ...

function createSecondWindow() {
  const secondWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  secondWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL + '#/second')

  // ...

  return secondWindow
}

// ...

5. 在需要打开第二个窗口的地方调用`createSecondWindow`函数。

// ...

ipcMain.on('open-second-window', () => {
  const secondWindow = createSecondWindow()
  // ...
})

// ...

现在，你可以通过点击"Open Second Window"按钮来打开第二个窗口，并在第二个窗口中显示"Second Window"的内容。