随着前端技术的发展，出现了所谓的大前端。
大前端则是指基于前端技术延伸出来的各种终端平台及应用场景，包括APP、桌面端、手表终端、服务端等。
本篇文章主要是和大家一起学习一下使用Electron 如何打包出 Windows 和 Mac 所使用的客户端APP；
下载安装
// 前提条件 electron-vite 需要 Node.js 版本 18+，20+ 和 Vite 版本 4.0+
yarn create @quick-start/electron
cd electron-vite-demo // 项目名
yarn install
yarn dev
// 下载时选择项，只做参考可以更加自己需求来选
如果遇到yarn install 下载时提示node版本问题，请参考使用nvm 切换不同node版本
初次运行
执行 yarn dev ， 我们可以看到项目正常运行了起来，开心😄
目录结构
先把目录放出来，大家初步了解一下结构
├── build // 构建过程中生成的临时文件
├── dist // 构建后文件，包含可发布的安装包等等
│ ├── builder-debug.yml
│ ├── builder-effective-config.yaml
│ ├── demo-1.0.0-mac.zip
│ ├── demo-app-1.0.0.dmg
│ ├── demo-app-1.0.0.exe
│ ├── latest-mac.yml
│ ├── latest.yml
│ ├── mac
│ └── win-unpacked
├── out
├── resources // 资源目录
│ ├── icon.ico
│ └── icon.png
├── src
│ ├── main // 主进程
│ │ ├── down.js
│ │ ├── index.js
│ │ ├── menu.js
│ │ ├── path.js
│ │ └── version.js
│ ├── preload // 预加载脚本
│ │ ├── down.js
│ │ ├── index.js
│ │ ├── locale.js
│ │ └── path.js
│ └── renderer // 渲染器--前端代码
│ ├── index.html
│ └── src
├── .env.dev // 环境变量配置文件 .env.dev/.gray/.mock/.prod
├── .env.gray
├── .env.mock
├── .env.mock
├── .env.prod
├── dev-app-update.yml
├── electron-builder.yml // 应用打包规则
├── electron.vite.config.mjs // 渲染进程（前端）的开发构建
├── package.json
├── README.md // 项目说明文档
└── yarn.lock