Electron 桌面应用开发学习路线 | 26 年最新零基础到精通一条龙（万人收藏⭐️）
编程导航学习网站：学编程、做项目、拿 Offer！
企业高频面试题库：开始刷题，面试遇原题！
精选简历模板大全：1 分钟搞定简历！
AI 资源导航网站：获取最新 AI 黑科技！
1 对 1 模拟面试：随时随地提升面试能力
Electron 求职高频面试题：开始刷题
开篇介绍
Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的框架，由 GitHub 开发并于 2013 年开源。Electron 将 Chromium 和 Node.js 嵌入到一个二进制文件中，让你可以使用 Web 技术开发桌面应用，一套代码可以运行在 Windows、macOS 和 Linux 上。
Electron 被广泛应用于各种桌面应用开发，从代码编辑器到通讯工具、从音乐播放器到开发工具。知名的 Electron 应用包括 VS Code、Atom、Slack、Discord、Figma、Notion、Postman 等，鱼皮团队的 剪切助手 也是用 Electron 开发的，这些应用都证明了 Electron 的强大和可靠性。
为什么要学 Electron？
使用 Web 技术开发桌面应用具有巨大的优势：开发效率高（复用 Web 技术栈）、跨平台（一套代码三个平台）、生态丰富（可以使用 npm 上的所有包）、界面美观（使用 CSS 自由定制）。对于前端工程师来说，学习 Electron 可以让你进入桌面应用开发领域，拓展职业发展空间。
Electron 的核心架构是多进程模型：主进程（Main Process）负责管理窗口和应用生命周期，渲染进程（Renderer Process）负责渲染页面。主进程和渲染进程通过 IPC（进程间通信）进行通信。理解这个架构是学习 Electron 的关键。
在 AI 时代，Electron 也可以开发 AI 桌面应用，比如在 Electron 应用中集成大语言模型、图像识别等 AI 能力。
学习前提
注意，如果你刚开始学前端，一定不要直接从 Electron 开始！
学习 Electron 建议先掌握：
- JavaScript/TypeScript：熟练使用 ES6+ 语法【必学】。关于 JavaScript 的详细学习，可以查看 JavaScript 学习路线；关于 TypeScript 的详细学习，可以查看 TypeScript 学习路线
- HTML/CSS：熟练使用前端技术【必学】。关于前端开发的详细学习，可以查看 前端开发学习路线
- Node.js：理解 Node.js 基础【建议】。关于 Node.js 的详细学习，可以查看 Node.js 学习路线
- 前端框架：React、Vue 等【建议】。关于 React 的详细学习，可以查看 React 学习路线；关于 Vue 的详细学习，可以查看 Vue.js 学习路线
学习路线图
就业方向
学完 Electron 后，可以帮助你从事下列岗位：
- Electron 开发工程师：专注于桌面应用开发
- 全栈工程师：前端 + 桌面端全栈开发
- 客户端开发工程师：开发跨平台桌面应用
- 工具开发工程师：开发开发者工具、效率工具
整体学习建议
1）Electron 使用 Web 技术开发，一定要先掌握 HTML、CSS、JavaScript 等前端技术。如果会 React 或 Vue，开发 Electron 会更轻松。
2）理解进程模型：Electron 的多进程模型是核心概念，要理解主进程和渲染进程的区别和作用。
3）Electron 的官方文档非常详细，中文文档质量也很高。遇到问题时，优先查阅官方文档。
4）Electron 的学习一定要结合实际项目。可以先开发一些简单的工具，如笔记本、待办事项等，熟悉 Electron 的开发流程。
5）学习 Electron 时可以用 AI 工具辅助开发，推荐到鱼皮的 AI 资源大全 中捞捞 AI 工具。
阶段 1：Electron 基础（10-20 天，仅供参考）
学习目标
理解 Electron 的核心概念，掌握 Electron 项目的创建和基本使用。
知识点
Electron 简介【必学】：
- Electron 的特点和优势
- Electron 的应用场景
- Chromium 和 Node.js 的作用
进程模型【必学，核心重点】：
- 主进程（Main Process）
- 渲染进程（Renderer Process）
- 预加载脚本（Preload Script）
- 进程的职责划分
创建项目【必学】：
- 项目初始化
- package.json 配置
- 主进程入口（main.js）
- 创建窗口（BrowserWindow）
开发环境【必学】：
- 开发工具（VS Code）
- 热重载（electron-reload）
- 调试工具（DevTools）
学习建议
1）Electron 的进程模型是核心概念，主进程类似于后端，负责管理窗口和系统
