主题切换
第 1 章：Electron 基础与环境搭建
欢迎来到 Electron 桌面应用开发的世界！如果你已经熟悉 HTML、CSS 和 JavaScript，那么你已经具备了构建桌面应用所需的核心技能。本章将带你从零开始，搭建开发环境并创建你的第一个 Electron 应用。
什么是 Electron
Electron 是一个由 GitHub 开发并开源的框架，它允许开发者使用 Web 技术（HTML、CSS、JavaScript）来构建跨平台的桌面应用程序。
给前端开发者的建议
想象你正在开发一个网页应用，但这一次，它运行在用户的桌面上，拥有原生的窗口、菜单和系统级能力。这就是 Electron 的魔力——你不需要学习 C++、C# 或 Swift，就能构建真正的桌面软件。
Electron 的核心原理很简单：它将 Chromium 渲染引擎（负责显示界面）和 Node.js 运行时（负责系统级操作）打包在一起，让你的 Web 应用既能展示漂亮的界面，又能调用操作系统的原生 API。
Electron 的架构简图
text
┌─────────────────────────────────────────┐
│ 你的 Web 应用代码 │
│ (HTML + CSS + JavaScript/Vue/React) │
├─────────────────────────────────────────┤
│ Chromium 渲染引擎 │
│ (界面渲染、DOM操作) │
├─────────────────────────────────────────┤
│ Node.js 运行时 │
│ (文件系统、网络、进程、原生模块) │
├─────────────────────────────────────────┤
│ 原生操作系统 API │
│ (Windows / macOS / Linux) │
└─────────────────────────────────────────┘Electron vs 传统桌面开发
在 Electron 出现之前，开发桌面应用意味着要为每个平台学习不同的技术栈。让我们看看 Electron 如何改变了游戏规则：
| 对比维度 | 传统桌面开发 | Electron 开发 |
|---|---|---|
| 技术栈 | C++/C# (Windows) Objective-C/Swift (macOS) GTK/Qt (Linux) | HTML + CSS + JavaScript 一套代码，三端运行 |
| 开发成本 | 需要多个团队或全栈工程师 | 前端团队即可上手 |
| UI 开发 | 原生控件，学习曲线陡峭 | Web 技术，丰富的生态和组件库 |
| 跨平台 | 需要为每个平台单独开发 | 一次编写，到处运行 |
| 性能 | 接近原生，资源占用低 | Chromium 内存占用较大，但现代硬件已足够 |
| 打包体积 | 较小（仅应用本身） | 较大（包含 Chromium + Node.js，约 150MB+） |
| 代表应用 | Office、Photoshop | VS Code、Slack、Discord、Notion |
选型建议
如果你需要极致的性能（如视频剪辑软件、大型游戏），原生开发仍是首选。但对于大多数业务应用、工具软件、生产力应用来说，Electron 的开发效率和生态优势远超性能损耗。
环境搭建
步骤一：安装 Node.js
Electron 基于 Node.js，因此首先需要安装它。访问 nodejs.org 下载 LTS（长期支持）版本。
bash
# 打开终端，检查版本
node --version # 应显示 v18.x.x 或更高
npm --version # 应显示 9.x.x 或更高版本要求
Electron 要求 Node.js 至少为 v16 以上，推荐使用 LTS 版本（v18 或 v20）。过旧的 Node 版本可能导致安装失败。
步骤二：创建项目并安装 Electron
创建项目目录
bashmkdir my-electron-app cd my-electron-app npm init -y安装 Electron
bashnpm install electron --save-dev作为开发依赖安装（
--save-dev），因为 Electron 只在开发时需要，打包后会自动包含运行时。修改 package.json
添加
main入口和启动脚本：json{ "name": "my-electron-app", "version": "1.0.0", "main": "main.js", "scripts": { "start": "electron .", "test": "echo \"Error: no test specified\" && exit 1" }, "devDependencies": { "electron": "^28.0.0" } }
第一个 Hello World 应用
代码风格说明
本章使用 CommonJS 语法（require）和纯 JavaScript，意在保持最小依赖和最少配置，让你专注理解 Electron 的核心机制。从第3章开始，所有项目代码将切换为 TypeScript + ESM 的现代化工程方案。两种风格的核心 API 是完全一致的——require('electron') 和 import { app } from 'electron' 导入的是同一个模块。
现在创建三个核心文件，构成最简单的 Electron 应用：
main.js - 主进程入口
javascript
// 引入 Electron 的核心模块
const { app, BrowserWindow } = require('electron')
const path = require('path')
// 创建窗口的函数
function createWindow () {
// 实例化 BrowserWindow，这就像打开一个浏览器窗口
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
// 预加载脚本路径（后续章节会详细讲解）
preload: path.join(__dirname, 'preload.js')
}
})
// 加载应用的入口 HTML 文件
mainWindow.loadFile('index.html')
// 打开开发者工具（开发时很有用）
// mainWindow.webContents.openDevTools()
}
// Electron 初始化完成后，准备创建窗口
app.whenReady().then(() => {
createWindow()
// macOS 特有：当点击 dock 图标时，如果没有窗口则创建新窗口
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// 当所有窗口关闭时退出应用（Windows & Linux）
app.on('window-all-closed', function () {
// macOS 除外，macOS 通常应用会保持运行直到用户主动退出
if (process.platform !== 'darwin') app.quit()
})类比理解
把 main.js 想象成 Node.js 服务器端的入口文件。它不负责显示界面，而是管理应用生命周期、创建窗口、处理系统事件。就像 Express 应用有一个 server.js 作为入口一样。
preload.js - 预加载脚本（安全桥梁）
javascript
// 预加载脚本在页面加载前执行，用于安全地暴露 API 给渲染进程
// 第2章会深入讲解，现在先了解它的存在
window.addEventListener('DOMContentLoaded', () => {
console.log('页面已加载！')
})index.html - 渲染界面
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Hello Electron!</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
h1 {
font-size: 3em;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<h1>🎉 Hello, Electron World!</h1>
</body>
</html>运行应用
bash
npm start如果一切顺利，你会看到一个漂亮的桌面窗口弹出，显示 "Hello, Electron World!" 🎉
关于 Content-Security-Policy（CSP）
CSP 是 Web 安全的重要防线，它限制页面可以加载哪些来源的资源：
default-src 'self'— 默认只允许加载本应用内的资源script-src 'self'— 只允许执行本应用内的脚本，阻止 XSS 注入的恶意脚本
在 Electron 中，CSP 防止了恶意脚本注入（如 XSS 攻击）、CDN 资源劫持和跨域数据窃取。第 2 章会深入讲解 Electron 的完整安全模型。
常见问题排查
- 命令找不到？ 确保在项目根目录运行，且
node_modules/.bin在 PATH 中 - 白屏？ 取消注释
mainWindow.webContents.openDevTools()打开 DevTools 查看报错 - 安装慢？ 使用
npm config set registry https://registry.npmmirror.com切换国内镜像
开发工具推荐
VS Code 配置
VS Code 是 Electron 开发的最佳伴侣，以下是推荐的配置：
1. 安装扩展
- ESLint - 代码规范检查
- Prettier - 代码格式化
- Electron Snippets - Electron 代码片段
- JavaScript Debugger - VS Code 内置调试器（已取代废弃的 Debugger for Chrome）
2. 调试配置（.vscode/launch.json）
json
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Main Process",
"type": "node",
"request": "launch",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"args": ["."],
"env": {
"NODE_ENV": "development"
}
},
{
"name": "Debug Renderer Process",
"type": "chrome",
"request": "attach",
"port": 9223,
"webRoot": "${workspaceFolder}",
"timeout": 30000
}
]
}3. 推荐设置（.vscode/settings.json）
json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"eslint.validate": [
"javascript",
"html"
]
}其他实用工具
| 工具 | 用途 | 推荐理由 |
|---|---|---|
| electron-reload | 开发时自动重启 | 修改代码后自动刷新，提升开发效率 |
| electron-builder | 应用打包分发 | 一键打包为 .exe/.dmg/.AppImage，支持自动更新 |
| electron-devtools-installer | 安装 Chrome 扩展 | 在 Electron 中使用 Vue/React DevTools |
本章小结
恭喜！你已经完成了 Electron 的环境搭建并运行了第一个应用。核心要点：
- Electron = Chromium + Node.js，用 Web 技术做桌面应用
- 主进程（main.js）管理应用生命周期，渲染进程（HTML）负责界面
- 开发环境需要 Node.js + Electron 包
- 最小应用需要 main.js、preload.js、index.html 三个文件
下一章，我们将深入理解 Electron 的进程模型和IPC 通信机制——这是掌握 Electron 的关键。
从手动搭建到工程化
到这里，你已经通过手动方式创建并运行了第一个 Electron 应用。这种方式非常适合理解 Electron 的核心原理——你需要什么文件、每个文件有什么作用、它们之间如何协作。
但在实际开发中，手动搭建存在明显的局限：
| 手动搭建 | 工程化方案（electron-vite） |
|---|---|
| 手动管理依赖和构建 | Vite 自动构建，HMR 热更新 |
| 纯 JavaScript | TypeScript 类型支持 |
| 无前端框架集成 | Vue3/React 开箱即用 |
| 手动配置 webPreferences | 预置安全最佳实践 |
| 分离开发与生产环境靠手工 | 自动区分 dev/prod 模式 |
第 3 章将带你迁移到 electron-vite 工程化方案，届时你会看到同样的 IPC 通信和窗口创建逻辑如何用更现代的方式组织。第 2 章将继续在手搭项目上深入讲解 Electron 核心概念——这些概念无论使用哪种工程化方案都是通用的。
本教程学习路线图
text
┌─────────────────────────────────────────────────────────────────┐
│ 学习路线图 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 第1章 环境搭建 ──→ 第2章 核心概念与IPC ──→ 第3章 Vue3工程化 │
│ │ │ │ │
│ │ ├────────────────────┤ │
│ │ ▼ ▼ │
│ │ 第4章 窗口管理 第7章 IPC进阶与持久化 │
│ │ │ │ │
│ │ ▼ ▼ │
│ │ 第5章 系统交互 第8章 应用打包 │
│ │ │ │ │
│ │ └────────┬───────────┘ │
│ │ ▼ │
│ │ 第9章 自动更新 │
│ │ │ │
│ │ ▼ │
│ └────────────→ 第10章 综合项目：RPA 桌面助手 │
│ │
│ 进阶路线：第3/5章 ──→ 进阶专题：屏幕控制与自动化 ──→ 第10章 │
│ 参考路线：附录 A-F 随用随查 │
│ │
└─────────────────────────────────────────────────────────────────┘| 学习阶段 | 章节范围 | 学习目标 |
|---|---|---|
| 入门 | 第1章 → 第2章 | 理解 Electron 核心机制，运行第一个应用 |
| 工程化 | 第3章 | 学习现代 Electron 开发工具链（Vite + Vue3） |
| 界面能力 | 第4章 → 第5章 | 掌握窗口管理、原生菜单、文件操作 |
| 通信与发布 | 第7章 → 第8章 → 第9章 | IPC 进阶、打包分发、自动更新机制 |
| 实战 | 第10章 + 进阶专题 | 综合项目实践（RPA 桌面助手） |
| 参考 | 附录 A-F | 按需查阅性能调优、调试、平台差异等 |