Electron 学习路径概览
- 入门准备: 了解 Electron 是什么,以及它的工作原理。
- 基础入门: 创建第一个 "Hello World" 应用,理解主进程和渲染进程。
- 核心功能: 学习使用原生系统 API（如菜单、对话框、通知等）。
- 进阶与打包: 学习如何打包应用、自动更新、以及使用原生模块。
- 实战项目: 通过构建一个完整的项目来巩固所有知识。
中文视频教程推荐 (适合初学者和中阶开发者)
中文教程的优势在于语言无障碍,能更快地理解核心概念。
Bilibili (B站) - 首选平台
B站是学习 Electron 的最佳中文平台,资源丰富且免费。
-
【强烈推荐】Electron 官方文档中文翻译配套视频
- UP主:
电子羊或electron 中文社区 - 简介: 这类视频通常会逐章或逐节讲解 Electron 官方文档，非常适合配合文档一起学习,能帮你建立最扎实的基础。
- 搜索关键词:
Electron 教程,Electron 入门,Electron 中文文档
- UP主:
-
【实战项目】使用 Electron + Vue/React 构建桌面应用
- UP主:
程序员鱼皮,codeSheep,黑马程序员 - 简介: 这些教程通常会带你从零开始，使用 Electron + 前端框架（如 Vue 3, React）构建一个完整的桌面应用（一个笔记软件、一个音乐播放器），这是学习 Electron 最有效的方式之一。
- 搜索关键词:
Electron + Vue,Electron + React 实战,Electron 开发桌面应用
- UP主:
-
【系统课程】Electron 完整系统课程
- UP主:
尚硅谷,黑马程序员,慕课网 - 简介: 这些机构通常会提供非常系统和完整的 Electron 课程，从环境搭建到项目上线，覆盖所有知识点,适合希望系统性学习的同学。
- 搜索关键词:
尚硅谷 Electron,黑马 Electron
- UP主:
慕课网 / CSDN 学院
- 特点: 这些平台提供结构化的付费课程，内容质量有保障,通常有配套的源码和答疑服务。
- 推荐课程类型: 搜索 "Electron 实战"、"Electron 从入门到精通"，选择评价高、更新近期的课程。
英文视频教程推荐 (适合中高阶或想接触一手资源的开发者)
英文教程通常更新更快，内容更前沿，能直接接触到 Electron 社区的最新动态。
YouTube - 视频教程的宝库
-
【必看】The Net Ninja - Electron for Beginners (全系列)
- 简介: YouTube 上最知名的编程教程频道之一，他的 Electron 系列教程非常经典，讲解清晰，循序渐进，每集都很短，易于消化,非常适合零基础入门。
- 链接: Electron for Beginners - The Net Ninja
-
【进阶】freeCodeCamp - Build a Desktop App with Electron, React, and Node.js
- 简介: freeCodeCamp 的教程质量极高，这个教程会教你如何使用 Electron + React + Node.js 构建一个功能完整的桌面应用,实战性非常强。
- 链接: Build a Desktop App with Electron - freeCodeCamp
-
【官方】Electron 官方 YouTube 频道
- 简介: 关注官方频道可以获取最新的功能介绍、开发者大会演讲和最佳实践分享，对于想深入了解 Electron 内部机制和未来发展方向的开发者来说非常有价值。
- 链接: Electron - YouTube
Udemy - 高质量付费课程平台
- 特点: Udemy 上的课程通常非常深入和全面，项目驱动，配有大量的练习和资源，经常有打折活动,性价比很高。
- 推荐课程:
- The Complete Electron Course: Build Desktop Apps with JavaScript by Maximilian Schwarzmüller (非常受欢迎,更新频繁)
- Electron: From Scratch to a Distribution App by Stephen Grider
- 建议: 购买前先看课程预览和评价,选择最适合你的。
学习路线建议 (如何有效学习)
-
第一步：概念入门 (1-2天)
- 做什么: 观看 B 站或 The Net Ninja 的前几集视频，了解 Electron 的核心概念：主进程 和 渲染进程。
- 目标: 知道
package.json中的main文件是主进程入口，index.html或renderer.js是渲染进程入口，理解它们是如何通过ipcMain和ipcRenderer通信的。
-
第二步：动手实践 (3-5天)
- 做什么: 跟着视频教程，亲手敲代码，创建你的第一个 Electron 应用,不要只看不练！
- 目标: 成功运行一个包含基本窗口、菜单和文件对话框的应用，尝试修改代码,看看会发生什么。
-
第三步：核心功能探索 (1-2周)
- 做什么: 学习 Electron 提供的各种原生模块。
- 重点:
Menu: 创建自定义菜单（右键菜单、顶部菜单栏）。dialog: 打开文件/文件夹对话框、显示消息框。shell: 用系统默认程序打开文件或链接。Tray: 创建系统托盘图标。Notification: 发送桌面通知。
- 目标: 能够将这些功能集成到你的应用中。
-
第四步：打包与分发 (2-3天)
- 做什么: 学习使用打包工具，最常用的是
electron-builder。 - 目标: 将你的开发版应用打包成可在 Windows、macOS、Linux 上运行的安装程序（如
.exe,.dmg,.deb）。
- 做什么: 学习使用打包工具，最常用的是
-
第五步：构建个人项目 (长期)
- 做什么: 这是巩固知识的最好方法，找一个你感兴趣的需求，用 Electron + 你熟悉的前端框架（Vue/React/Angular）去实现它。
- 项目灵感:
- 一个简单的 Markdown 编辑器
- 一个图片批量处理工具
- 一个 GitHub 仓库客户端
- 一个本地视频播放器
- 目标: 完成一个可以展示给你的朋友或放在简历上的作品。
其他重要资源
- 官方文档: Electron 官方文档 (最重要！遇到任何问题,第一反应应该是查官方文档)
- 中文文档: Electron 中文文档 (如果英文阅读有困难,可以参考)
- GitHub: Electron 官方仓库 (可以看源码，提 Issue,参与社区)
- 社区: Electron 中文社区 (可以在这里提问和交流)
- 新手入门: 从 B站 或 The Net Ninja 的教程开始,快速建立概念。
- 项目驱动: 找一个 实战教程，跟着做一个完整的项目,这是最高效的学习方式。
- 查漏补缺: 遇到问题，优先查阅官方文档。
- 持续学习: 关注官方动态，不断探索新的 API 和最佳实践。
祝你学习愉快，早日用 Electron 打造出属于自己的桌面应用！
