electron+vue双屏异显

在Electron和Vue.js中实现双屏异显，通常意味着你有两个屏幕，一个是Electron的主进程窗口，另一个是渲染进程的Vue应用。以下是一个简化的例子来实现这个需求：

1. 创建一个Electron主窗口。
2. 使用Vue.js创建一个Vue实例，并将其渲染到一个新的BrowserWindow对象中。

以下是一个简单的Electron + Vue双屏异显的例子：

const { app, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');
 
// 保持一个引用，不被垃圾收集机制回收
let mainWindow;
let rendererWindow;
 
function createMainWindow() {
  // 创建主窗口
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
 
  // 加载应用的index.html
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }));
 
  // 打开开发者工具
  mainWindow.webContents.openDevTools();
 
  // 当 window 被关闭，这个事件会被触发
  mainWindow.on('closed', () => {
    // 取消引用 window 对象，通常你会在应用中存储 window
    // 对象，如果你的应用支持多窗口的话，现在是时候将对应的元素删除了。
    mainWindow = null;
  });
}
 
function createRendererWindow() {
  // 创建第二个窗口
  rendererWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
 
  // 加载Vue应用的URL
  rendererWindow.loadURL('http://localhost:8080'); // 假设Vue应用运行在8080端口
 
  // 当 window 被关闭，这个事件会被触发
  rendererWindow.on('closed', () => {
    // 取消引用 window 对象
    rendererWindow = null;
  });
}
 
app.on('ready', () => {
  createMainWindow();
  createRendererWindow();
});
 
// 当所有窗口都被关闭后退出
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
  // 否则通常应保持活动状态。
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
 
app.on('activate', () => {
  // 在macOS上，点击dock图标并且没有其他窗口打开时，通常在应用程序中重新创建一个窗口
  if (mainWindow === null) {
    createMainWindow();
  }
});

在这个例子中，我们创建了两个BrowserWindow实例：mainWindow用于渲染Electron的主进程内容，而rendererWindow用于渲染Vue应用。Vue应用需要独立运行，例如通过npm run serve在8080端口启动，然后在Electron中通过loadURL加载。

请注意，这只是一个简化的示例，实际应用中你可能需要处理更多的细节，例如通信机制、生命周期管理等。