Electron 是一个基于 Chromium 和 Node.js 的桌面应用程序开发框架,而 Vue3 则是一种流行的前端框架。将两者结合使用可以快速地打造出跨平台的桌面应用程序。在这种组合中,Electron 提供了强大的桌面应用开发能力,而 Vue3 则提供了易用的 UI 组件和开发体验
Electron 内置了 Chromium 和 Node.js:
Chromium 是渲染进程,用于渲染、解析 HTML
Node.js 是主进程
渲染进程 / 主进程,使用 IPC 进行通信
使用 ipcRenderer 进行通信 默认情况下,Vite 不支持 ipcRenderer,得安装插件 vite-plugin-electron-renderer 让他支持
安装 vite-plugin-electron 的时候,就已经同时安装了 vite-plugin-electron-renderer,所以不用重复安装他,直接引入就行
修改 vite.config.ts,不改会报错:Error: Module “path” has been externalized for browser compatibility. Cannot
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from "vite-plugin-electron"
import electronRenderer from "vite-plugin-electron-renderer"
import polyfillExports from "vite-plugin-electron-renderer"
export default defineConfig(({ mode }) => ({
base: mode == 'development' ? '' : './',
plugins: [
vue(),
electron([{
entry: "electron-main/index.ts", // 主进程文件
},
{
entry: 'electron-preload/preload.ts'
}
]),
electronRenderer(),
polyfillExports(),
],
build: {
emptyOutDir: false, // 默认情况下,若 outDir 在 root 目录下,则 Vite 会在构建时清空该目录
outDir: "dist-electron"
},
}))
这样,就实现了让 Vite 支持 ipcRenderer
在 vue 文件中,添加一个按钮,点击后通过 ipcRenderer 给主进程发消息
import { ipcRenderer } from 'electron'
const send = () => {
//渲染信息给主线程发送消息
ipcRenderer.send('message',123456)
}
import { app, BrowserWindow, ipcMain } from 'electron'
// 这段代码在 createWindow 创建窗口函数内执行
ipcMain.on('message', (_,num) => {
console.log(num,'收到')
})
主进程发送消息,渲染进程接收消息
//打开调试工具
win.webContents.openDevTools()
// 这段代码在 createWindow 创建窗口函数内执行
ipcMain.on('message', (_,num) => {
console.log(num,'收到')
})
setTimeout(() => {
win!.webContents.send('load', { message: "electron初始化了" })
}, 1000);
渲染进程通过 ipcRenderer.on() 接收主进程发来的消息,会在控制台输出
//接收(渲染进程通过 ipcRenderer.on() 接收主进程发来的消息)
ipcRenderer.on('load', (_, message) => {
console.log(message, 123)
})
小满Vue3(第三十九章 electron桌面程序)_哔哩哔哩_bilibili 小满Vue3(第三十九章
electron桌面程序)是Vue3 + vite + Ts + pinia + 实战 + 源码
+electron的第51集视频,该合集共计110集,视频收藏或关注UP主,及时了解更多相关视频内容。 https://www.bilibili.com/video/BV1dS4y1y7vd?p=51&vd_source=8bc01635b95dbe8ecd349b2c23b03a10