使用Vue3和Electron实现进程通讯，创建窗口并传参

最新推荐文章于 2025-03-10 18:23:24 发布

A丶尘土

最新推荐文章于 2025-03-10 18:23:24 发布

阅读量2.2k

点赞数

分类专栏： Electron VUE vue-electron 文章标签： electron javascript vue.js

本文链接：https://blog.csdn.net/qq_43326668/article/details/130842383

版权

Electron 同时被 3 个专栏收录

20 篇文章

订阅专栏

VUE

13 篇文章

订阅专栏

vue-electron

8 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

创建一个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>
  <div>
    <h1>New Window</h1>
    <p>{{ arg }}</p>
  </div>
</template>

<script>
export default {
  props: ['arg']
}
</script>

<style>
h1 {
  font-size: 28px;
  margin-bottom: 20px;
}

p {
  font-size: 18px;
}
</style>

这个代码创建了一个新窗口组件，其中包含一个标题和一个用于显示传递参数的段落。

在App.vue中添加按钮

在src/App.vue中添加一个按钮，用于触发打开新窗口的操作。在模板中添加以下代码：

<template>
  <div id="app">
    <h1>Hello World</h1>
    <button @click="openNewWindow">Open New Window</button>
  </div>
</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模块，我们可以方便地在主进程和渲染进程之间传递消息和数据，实现各种复杂的应用程序功能。