一、框架搭建

官网地址https://cn.electron-vite.org

npm create @quick-start/electron@latest

按步骤操作即可

二、项目目录

1、main 主进程窗口：存放窗口代码
2、preload 预加载模块：用于窗口与页面间沟通的桥梁，增加可靠性
3、renderer渲染模块：主要存放前端页面代码

三、preload.js解读

官网对应位置：https://www.electronjs.org/zh/docs/latest/api/context-bridge
1、在preload/index.js中定义预加载信息

import { contextBridge，ipcRenderer } from 'electron'
if (process.contextIsolated) {try {contextBridge.exposeInMainWorld('mytest', {//当前方法可以在渲染模块通过 window.mytest.doThing 进行调用doThing: () => ipcRenderer.send('mqtt_data')})} catch (error) {console.error(error)}
} else {window.mytest= {//兼容问题doThing: () => ipcRenderer.send('mqtt_data')}
}

2、在渲染模块中进行调用

<script setup>function handleClick() {window.mytest.doThing()}
</script><template><ul class="versions"><button @click="handleClick">按钮</button></ul>
</template>

3、在主进程中进行接收

import { ipcMain } from 'electron'
ipcMain.on('mqtt_data', () => console.log(666))

效果：