electron vue通讯

### 实现 Electron 和 Vue 间的进程间通信 (IPC)

在 Electron 和 Vue 构建的应用程序中，主进程和渲染进程之间的交互至关重要。为了实现这种交互，可以利用 `ipcMain` 和 `ipcRenderer` 模块来创建自定义事件监听器并发送消息。

#### 主要概念

- **主进程(Main Process)** 负责管理应用生命周期以及原生组件。
- **渲染进程(Renderer Process)** 是运行网页内容的地方，在这里通常会加载 Vue 应用来展示界面给用户[^1]。

#### 创建基本结构

首先确保已经安装了必要的依赖项：

npm install electron vue

接着设置项目的入口文件（如 main.js），用于启动主进程；同时配置前端部分以支持 Vue 的正常工作。

#### 配置主进程(main.js)

在此处注册处理来自渲染端的消息逻辑，并向其响应数据:

const { app, BrowserWindow, ipcMain } = require('electron');
let mainWindow;

app.whenReady().then(() => {
    mainWindow = new BrowserWindow({
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
            nodeIntegration: true,
            contextIsolation: false
        }
    });
    
    mainWindow.loadFile('./index.html');

});

// 处理来自渲染进程的信息请求
ipcMain.on('message-from-renderer', async(event, arg) => {
    console.log(arg); // 打印接收到的数据
    
    event.reply('response-to-renderer', "这是从主进程中返回的内容");
});

注意这里的 `webPreferences` 设置是为了让渲染页面能够访问 Node.js API 并启用预加载脚本(preload script)[^3]。

#### 编写渲染进程代码(使用Vue)

对于基于 Vue 的前端来说，则需要引入 `electron` 提供的 `ipcRenderer` 来发起与主进程对话的操作:

<template>
<div id="app">
    <button @click="sendMessage">点击发送信息到主进程</button>
    <p>{{ message }}</p>
</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ipcRenderer } from 'electron';

const message = ref('');

function sendMessage() {
    ipcRenderer.send('message-from-renderer', '你好，我是渲染进程！');
}

// 接收到来自主线程回复后的回调函数
ipcRenderer.on('response-to-renderer', (_event, responseMessage) => {
    message.value = responseMessage;
})
</script>

这段代码展示了如何在一个按钮被按下时触发向主进程发送一条消息的行为，并等待接收回应更新视图中的文本显示[^2]。

#### 安全性和最佳实践提示

尽管上述例子简单明了地解释了 IPC 工作原理，但在实际开发过程中应当遵循安全编码指南，比如避免直接暴露过多权限给 Web 内容，合理设计通道名称防止冲突等措施。