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/ - 创建项目
mkdir my-electron-app
cd my-electron-app
npm init -y
npm install electron --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');
function createWindow() {
const win = new BrowserWindow({
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（渲染进程）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Electron!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>我们正在使用 Node.js <span id="node-version"></span>、Chromium <span id="chrome-version"></span> 和 Electron <span id="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>- 运行应用
npm start你会看到一个桌面窗口显示“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、性能优化等）随时问我～
