基于 Electron 官方中文文档 整理，以实例驱动，方便边学边练。 created: 2026-08-25 | sources: https://www.electronjs.org/zh/docs/latest/
Electron 是什么
Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用（Windows / macOS / Linux）的框架。它把 Chromium（渲染 UI）和 Node.js（访问系统能力）嵌入到同一个二进制中，不需要原生开发经验。
典型产品：VS Code、Slack、Discord、Figma 桌面版、Notion 桌面版。
前置要求
- Node.js LTS + npm（
node -v/npm -v验证）；macOS 建议用 nvm 安装 - 前端基础（HTML / CSS / JS）
- Git（可选，发布更新章节需要）
- 注意：Electron 使用内置的 Node.js 运行时，用户机器不需要装 Node；应用内置版本可通过主进程
process.versions查看
学习路径（建议顺序）
| # | 文件 | 内容 | 你会得到 |
|---|---|---|---|
| 1 | 01-quick-start | 第一个应用：npm init、main.js、BrowserWindow、窗口生命周期 | 能跑起来的 Hello World |
| 2 | 02-process-model | 进程模型：主进程 / 渲染进程 / preload / 上下文隔离 | 理解 Electron 核心架构 |
| 3 | 03-ipc | IPC 通信四大模式（含完整实例：改标题、文件对话框、菜单计数器） | 进程间传数据 |
| 4 | 04-native-features | 原生能力实战：菜单、对话框、托盘、通知、快捷键、系统信息 | 一个”系统监控”小工具 |
| 5 | 05-packaging-distribution | Electron Forge 打包、签名、发布 GitHub Releases、自动更新 | 可分发的安装包 |
| 6 | 06-security-performance | 安全清单 20 条精要 + 性能检查清单 | 生产级质量 |
| 7 | 07-environment-variables | 环境变量速查：安装镜像、运行时行为、调试日志、国内典型组合 | 随时查的参考 |
| 8 | README | 工具链总览与选型：Forge / electron-builder / electron-vite 定位、流水线组合、选型建议 | 正式项目工具链 |
| 9 | 09-performance | 官方性能清单 8 条详解：依赖量化、懒加载、双进程阻塞、polyfill、网络、打包、菜单 | 应用慢时排查 |
| 10 | 10-updater-cos-tutorial | electron-updater + 腾讯云 COS 实战：7 步完整更新闭环（含可运行 demo） | 自动更新全流程 |
tools/ 工具单页
- electron-forge — 官方一体化工具链（脚手架/打包/签名/发布，7.1k stars）
- electron-builder — 社区主流打包分发全家桶（14.6k stars）
- electron-vite — 基于 Vite 的三进程开发构建工具（5.5k stars）
官方推荐工具
- Electron Forge（https://electronforge.io）：官方一体化脚手架 + 打包 + 发布工具链
- Electron Fiddle（https://www.electronjs.org/fiddle）：官方沙盒，文档里代码块的 “Open in Fiddle” 按钮可直接加载示例，适合快速实验 API
快速脚手架（不想手写时）
npm init electron-app@latest my-app # Forge 官方模板，含 Vite/TS 可选调试速查
- 渲染进程：
Cmd+Option+I（macOS）/Ctrl+Shift+I打开 DevTools - 主进程：
electron --inspect=5858 .后在chrome://inspect附加，或 VS Code launch.json（见 01 章） - 打印日志：主进程
console.log输出到终端；渲染进程输出到 DevTools
参考链接
- 中文文档：https://www.electronjs.org/zh/docs/latest/
- API 参考：https://www.electronjs.org/zh/docs/latest/api/app
- 示例代码库：官方每个教程示例都有对应 Fiddle，见 https://github.com/electron/electron/tree/main/docs/fiddles
- 版本发布线：https://releases.electronjs.org
- 社区：Discord（英文）/ Discord 中文社区，issue 跟踪在 GitHub electron/electron