本文介绍了如何结合Vue3和Electron创建桌面应用，通过配置Electron的主进程和渲染进程间的IPC通信，实现在新窗口中传递参数的功能。文章详细讲解了创建Vue3项目、安装Electron、编写主进程和渲染进程的代码，以及如何在组件间传递数据。 摘要生成于 ，由 DeepSeek-R1 满血版支持，

Electron是一个流行的桌面应用程序开发框架，而Vue是一个流行的JavaScript框架。将这两个框架结合在一起可以创建强大的桌面应用程序。本篇文章将介绍如何使用Vue3和Electron实现进程通讯，创建窗口并传参。

1. 创建一个Vue3项目

首先，我们需要创建一个Vue3项目。在终端中运行以下命令：

vue create electron-ipc-demo
安装Electron
 
在项目根目录下运行以下命令，安装Electron：
 
npm install electron --save-dev
配置Electron
 
在项目根目录下创建一个名为main.js的文件，这个文件将是我们的Electron主进程。在这个文件中，我们需要添加以下代码：
 
const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')
function createWindow () {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // 将contextIsolation设置为false，以便我们可以在渲染进程中使用Vue
      contextIsolation: false,
      enableRemoteModule: true // 允许使用remote模块
  // 加载应用的index.html
  win.loadFile('dist/index.html')
  // 打开开发者工具
  win.webContents.openDevTools()
  // 监听从渲染进程发来的消息
  ipcMain.on('open-new-window', (event, arg) => {
    // 创建一个新的浏览器窗口
    const win2 = new BrowserWindow({
      width: 600,
      height: 400,
      webPreferences: {
        nodeIntegration: true,
        contextIsolation: false,
        enableRemoteModule: true
    // 加载应用的newWindow.html并传递参数
    win2.loadFile('dist/newWindow.html', { query: { arg } })
// 当 Electron 完成初始化并准备创建浏览器窗口时调用此方法
app.whenReady().then(() => {
  createWindow()
// 当所有窗口都关闭时退出应用程序
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
这个代码会创建一个新的Electron窗口，并加载我们Vue项目的index.html文件。我们还开启了开发者工具，以便于调试。我们还添加了一个ipcMain监听器，用于接收从渲染进程发送来的消息，并在收到消息后创建一个新的浏览器窗口。
 
创建新窗口组件
 
在src/views目录下创建一个名为NewWindow.vue的文件。这个文件将是我们的新窗口组件。在这个组件中，我们需要添加以下代码：
 
<template>
    <h1>New Window</h1>
    <p>{{ arg }}</p>
</template>
<script>
export default {
  props: ['arg']
</script>
<style>
  font-size: 28px;
  margin-bottom: 20px;
  font-size: 18px;
</style>
这个代码创建了一个新窗口组件，其中包含一个标题和一个用于显示传递参数的段落。
 
在App.vue中添加按钮
 
在src/App.vue中添加一个按钮，用于触发打开新窗口的操作。在模板中添加以下代码：
 
<template>
  <div id="app">
    <h1>Hello World</h1>
    <button @click="openNewWindow">Open New Window</button>
</template>
<script>
const { ipcRenderer } = require('electron')
export default {
  name: 'App',
  methods: {
    openNewWindow() {
      ipcRenderer.send('open-new-window', 'Hello from main window!')
</script>
这个代码添加了一个按钮，并在按钮被点击时发送一个消息到Electron主进程，触发打开新窗口的操作。
 
构建应用程序
 
现在，我们可以构建我们的应用程序了。在终端中运行以下命令：
 
npm run build
这将生成一个dist目录，其中包含我们的应用程序文件。
 
运行应用程序
 
最后，我们可以运行我们的应用程序。在终端中运行以下命令：
 
npm run electron:serve
这将启动Electron应用程序，并显示我们的Vue应用程序。
 
现在，我们的应用程序已经可以正常运行了。当我们点击"Open New Window"按钮时，应用程序将在新窗口中打开NewWindow.vue组件，并将参数"Hello from main window!"传递给该组件。在NewWindow.vue组件中，我们可以通过props获取到这个参数，并在页面上展示它。
 
通过这个实例，我们学会了如何使用Vue3和Electron实现进程通讯，创建窗口并传参。使用Electron的ipcMain和ipcRenderer模块，我们可以方便地在主进程和渲染进程之间传递消息和数据，实现各种复杂的应用程序功能。
electron应用是多进程的，而这个进程是分两种，一种是主进程[main]（主进程就是background.js所来承载的进程就是主进程），还有一种就是渲染进程[ready]（渲染进程就是打开的窗口）；主进程就一个，而渲染进程会有多个；
至于为什么electron应用采用的是多进程，而不是多线程，这主要是因为electron基于Chrome内核，而Chrome内核就是多进程的
一、创建vue3.
创建主程序入口（main.js）
const {app, BrowserWindow} =require('electron');//引入electron
let win;
let windowConfig = {
  width:800,
  height:600
};//窗口配置程序运行
在onUnmounted移除监听
onUnmounted(() => {
  ipcRenderer.removeAllListeners('click-customer-message')