vue3+electron桌面端入门记录(更新中)

第一步

像平时一样先创建vue3项目，能正常运行之后进行第二步

第二步

执行vue add electron-builder命令，让vue项目变成一个electron+vue的项目

第三步

修改项目中的background.js文件

const {app, BrowserWindow} = require('electron')
// 创建全局变量并在下面引用，避免被GC
let win
function createWindow () {
    // 创建浏览器窗口并设置宽高
    win = new BrowserWindow(
    { 
    width: 800,
    height: 600,  
    webPreferences: {
      nodeIntegration: true, //开启true这一步很重要,目的是为了vue文件中可以引入node和electron相关的API
      contextIsolation: false,
      enableRemoteModule: true,
    }, })
     ipcMain.on("update", (e, data) => {
       console.log(data);
        e.sender.send("something1", "我是主进程返回的值");
     });
    if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
      await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
      if (!process.env.IS_TEST) win.webContents.openDevTools();
    } else {
      createProtocol("app");
    // Load the index.html when not in development
       win.loadURL("app://./index.html");
    }
    
    // 打开开发者工具
    win.webContents.openDevTools()
    
    // 添加window关闭触发事件
    
    win.on('closed', () => {
        win = null  // 取消引用
    })
}

// 初始化后 调用函数
app.on('ready', createWindow)  
// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
   // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
   // 否则绝大部分应用及其菜单栏会保持激活。
   if (process.platform !== 'darwin') {
        app.quit()
   }
})
  
app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

第四步

创建home.vue

<template>
  <div class="home">
    <div class="box borderCorner">
      <span @click="autoUpdate()">点我进程之间传递参数</span>
    </div>
  </div>
</template>

<script>
import { ipcRenderer } from "electron";
export default {
  name: "About",
  setup() {
    const autoUpdate = () => {
      console.log("更新", process.versions.node);
      ipcRenderer.send("update", "更新...");
    };
    ipcRenderer.on("something1", (event, data) => {
      console.log(data); // 我是主进程返回的值
    });
  },
};
</script>