隨著前端技術的發展，出現了所謂的大前端。

大前端則是指基于前端技術延伸出來的各種終端平臺及應用場景，包括APP、桌面端、手表終端、服務端等。

本篇文章主要是和大家一起學習一下使用Electron 如何打包出 Windows 和 Mac 所使用的客戶端APP；

下載安裝

// 前提條件 electron-vite 需要 Node.js 版本 18+，20+ 和 Vite 版本 4.0+
yarn create @quick-start/electroncd 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