Electron 教程
Electron 教程（2025 年最新版）
Electron 是一个使用JavaScript、HTML 和 CSS构建跨平台桌面应用的框架。它将 Chromium（浏览器内核）和 Node.js 打包在一起，让你只需写一套代码，就能同时支持 Windows、macOS 和 Linux。知名应用如 VS Code、Slack、Discord 都是基于 Electron 开发的。
当前最新稳定版：Electron 30.x（2025 年仍在持续更新，建议使用最新版以获得安全修复和性能优化）。
推荐学习资源（中文优先）
官方文档（强烈推荐）
- 英文版：https://www.electronjs.org/docs/latest
- 中文版（官方同步翻译）：https://electron.nodejs.cn/docs/latest/
官方教程非常完整，从零开始一步步带你创建第一个应用。
官方教程目录（端到端指南）
- 准备工作：https://www.electronjs.org/docs/latest/tutorial/tutorial-prerequisites
- 创建第一个应用（Hello World）：https://www.electronjs.org/docs/latest/tutorial/tutorial-first-app
- 添加功能（如菜单、托盘、通知）：https://www.electronjs.org/docs/latest/tutorial/tutorial-adding-features
- 打包和发布：https://www.electronjs.org/docs/latest/tutorial/application-distribution
其他优质中文教程
- w3cschool Electron 中文文档：https://www.w3cschool.cn/electronmanual/
- Electron 中文网：https://electron.nodejs.cn/（包含大量示例和 API 文档）
- 掘金/知乎/博客上的入门文章（搜索“Electron 入门”可找到很多实战案例）。
快速入门（一步步创建 Hello World 应用）
安装前提
安装 Node.js（推荐最新 LTS 版，当前 2025 年建议 Node.js 22+）
下载地址：https://nodejs.org/创建项目
mkdirmy-electron-appcdmy-electron-appnpminit -ynpminstallelectron --save-dev修改 package.json
{"name":"my-electron-app","version":"1.0.0","main":"main.js","scripts":{"start":"electron ."}}创建 main.js（主进程）
const{app,BrowserWindow}=require('electron');functioncreateWindow(){constwin=newBrowserWindow({width:800,height:600,webPreferences:{nodeIntegration:true,// 允许渲染进程使用 Node.js（新版建议使用 preload 更安全）contextIsolation:false// 新版默认开启，初学可先关闭}});win.loadFile('index.html');}app.whenReady().then(createWindow);app.on('window-all-closed',()=>{if(process.platform!=='darwin')app.quit();});app.on('activate',()=>{if(BrowserWindow.getAllWindows().length===0)createWindow();});创建 index.html（渲染进程）
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Hello Electron!</title></head><body><h1>Hello World!</h1><p>我们正在使用 Node.js<spanid="node-version"></span>、Chromium<spanid="chrome-version"></span>和 Electron<spanid="electron-version"></span>。</p><script>document.getElementById('node-version').innerText=process.versions.node;document.getElementById('chrome-version').innerText=process.versions.chrome;document.getElementById('electron-version').innerText=process.versions.electron;</script></body></html>运行应用
npmstart你会看到一个桌面窗口显示“Hello World!”和版本信息。
进阶建议
- 学习主进程 vs 渲染进程（IPC 通信）
- 使用preload.js实现安全通信（新版推荐）
- 打包工具：推荐Electron Forge（
npm install --save-dev @electron-forge/cli）或electron-builder - 框架集成：Vue + Electron、React + Electron 等（electron-vite、electron-vue 等脚手架）
常见问题
- 应用体积大？这是 Electron 的通病（自带 Chromium），但对大多数应用来说完全可以接受。
- 想快速上手？可以直接用官方的 Electron Fiddle（https://www.electronjs.org/fiddle）在线实验代码。
跟着官方教程走一遍，你就能快速上手 Electron 开发桌面应用了！有具体问题（如打包、集成 React/Vue、性能优化等）随时问我～