一、框架搭建

官网地址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))

效果：