Electron 完全指南 #

欢迎学习Electron #

Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的框架。它将 Chromium 和 Node.js 合并到同一个运行时环境中，让你可以用 Web 技术开发桌面应用。

学习路线 #

第一阶段：基础入门 #

适合零基础开发者，学习 Electron 的核心概念和基本语法。

Electron简介 - 了解 Electron 的特点和应用场景
环境搭建 - 搭建 Electron 开发环境
第一个应用 - 创建你的第一个 Electron 应用
项目结构 - 理解 Electron 项目组织方式

第二阶段：核心概念 #

学习 Electron 的核心架构和进程模型。

主进程与渲染进程 - 理解 Electron 的进程模型
进程间通信IPC - 主进程与渲染进程通信
BrowserWindow窗口 - 窗口创建与管理
应用生命周期 - 应用启动、退出与事件

第三阶段：界面开发 #

学习 Electron 的界面开发技术。

窗口管理 - 多窗口管理与控制
菜单与托盘 - 应用菜单与系统托盘
对话框与通知 - 原生对话框与系统通知
快捷键与系统 - 全局快捷键与系统集成

第四阶段：数据存储 #

学习 Electron 应用的数据持久化方案。

本地存储 - localStorage、IndexedDB、electron-store
文件系统操作 - Node.js 文件操作 API
数据库集成 - SQLite、LevelDB 等数据库集成

第五阶段：高级特性 #

掌握 Electron 的高级功能和最佳实践。

安全最佳实践 - Electron 安全配置与防护
性能优化 - 应用性能优化技巧
原生模块集成 - C++ 原生模块开发
调试技巧 - 开发调试与问题排查

第六阶段：打包发布 #

学习应用的打包、分发和更新机制。

打包配置 - electron-builder 与 electron-forge
自动更新 - 应用自动更新机制
代码签名 - 各平台代码签名流程
多平台构建 - 跨平台打包与发布

第七阶段：扩展应用 #

学习前端框架集成与实战开发。

React集成 - Electron + React 开发
Vue集成 - Electron + Vue 开发
TypeScript支持 - TypeScript 项目配置
实战案例 - 完整项目实战

技术栈概览 #

text

Electron 技术栈
├── Electron           核心框架
├── Chromium           渲染引擎
├── Node.js            后端运行时
├── React/Vue          前端框架（可选）
├── TypeScript         类型支持（推荐）
├── electron-builder   打包工具
└── electron-store     本地存储

前置知识 #

学习本指南前，建议具备以下基础：

HTML/CSS 基础
JavaScript ES6+ 语法
Node.js 基础知识
基本的命令行操作

学习建议 #

循序渐进：按照章节顺序学习，打好基础
动手实践：每学完一章，动手编写代码
深入理解：理解进程模型，而非死记 API
项目驱动：通过实际项目巩固知识

版本说明 #

本指南基于 Electron 28+ 编写，推荐使用最新稳定版本。

版本	状态	说明
Electron 28.x	推荐	最新版本，支持最新特性
Electron 27.x	稳定	稳定版本
Electron 26.x	维护	旧项目维护使用

知名应用 #

许多知名应用都使用 Electron 开发：

应用	说明
VS Code	微软代码编辑器
Slack	团队协作工具
Discord	游戏社区平台
Figma	设计协作工具
Notion	笔记与协作工具
Postman	API 测试工具

开始你的 Electron 学习之旅吧！