electron开发桌面程序mac/window，配合vue3+vite进行配置开发

electron开发文档：https://www.electronjs.org/zh/docs/latest
vue3开发文档：https://cn.vuejs.org/guide/introduction.html

先按照文档创建一个vue3项目，按照实际需要进行相关配置，官网有介绍。

npm init vue@latest

然后在原基础上安装electron相关依赖，我用pnpm命令，大家可用npm，yarn，cnpm都可以添加

pnpm add -D concurrently cross-env electron electron-builder electron-packager wait-on

在根目录创建一个文件夹electron，里面放electron.js和preload.js
代码如下：
electron.js

// electron/electron.jsconst path = require('path');const { app, BrowserWindow } = require('electron');const isDev = process.env.IS_DEV == 'true' " />,    "electron:build.win": "npm run build && electron-builder --win --dir",    "electron:build.linux": "npm run build && electron-builder --linux appImage",    "electron:build.test": "npm run build && electron-builder --dir",    "electron:build.exe": "npm run build && electron-builder --win",    "electron:build.mac": "npm run build && electron-builder --macos",    "dist": "http-server ./dist --p 3333",    "clean": "rimraf ./dist/*",    "builder": "npm run build && electron-builder"  },

添加main节点

"main": "electron/electron.js",

如果还使用其他包根据实际项目进行增加，就不一一说明

package.json里面的scripts命令比较清新就不一一说明，自行运行一下命令即可，有运行命令也有打包命令，mac系统打包是app文件，win是exe文件.

是可以使用vue的语法进行配合开发的，正常的应用是可以写的，深入的话要多多学习才能了解和使用。
然后博主也写了个demo仅供学习，看下方图片：

文章参考地址
如有什么可留言，看到会回复哦。