第18章：学习资源推荐

18.1 官方文档

Electron 中文文档

• 官方中文文档：https://www.electronjs.org/zh/docs
  • 内容全面，包含所有 API 文档和教程
  • 定期更新，与英文文档保持同步
  • 适合作为权威参考资料

官方示例

• 官方示例仓库：https://github.com/electron/electron-quick-start

  • 包含基础的 Electron 应用示例
  • 展示了核心功能的使用方法
  • 可以作为项目模板快速开始

• 官方 API 演示：https://github.com/electron/electron-api-demos

  • 展示了 Electron 各种 API 的使用方法
  • 包含交互式演示
  • 适合学习具体 API 的使用场景

18.2 新手友好的在线练习工具、项目模板

在线练习工具

• CodeSandbox：https://codesandbox.io/

  • 提供在线 Electron 项目环境
  • 支持实时编辑和预览
  • 适合快速测试和学习

• StackBlitz：https://stackblitz.com/

  • 支持 Node.js 环境
  • 可以创建简单的 Electron 示例
  • 适合前端开发者快速上手

项目模板

• electron-vite：https://github.com/electron-vite/electron-vite

  • 基于 Vite 构建工具
  • 提供快速的开发体验
  • 支持热更新和快速构建

• electron-react-boilerplate：https://github.com/electron-react-boilerplate/electron-react-boilerplate

  • React + Electron 集成模板
  • 包含完整的开发环境配置
  • 适合构建复杂的桌面应用

• vue-cli-plugin-electron-builder：https://github.com/nklayman/vue-cli-plugin-electron-builder

  • Vue 项目集成 Electron 的插件
  • 提供简单的配置方式
  • 适合 Vue 开发者使用

18.3 优质学习视频、图文教程

视频教程

• Electron 官方视频系列：https://www.youtube.com/c/ElectronJS

  • 官方发布的教程视频
  • 涵盖核心概念和最佳实践
  • 英文讲解，配有字幕

• 慕课网 Electron 课程：https://www.imooc.com/search?q=electron

  • 中文视频教程
  • 适合中文用户学习
  • 包含实战项目讲解

• B站 Electron 教程：https://www.bilibili.com/search?keyword=electron

  • 众多 UP 主分享的教程
  • 内容丰富，涵盖不同难度
  • 适合不同层次的学习者

图文教程

• Electron 实战：https://www.bookstack.cn/books/electron-in-action

  • 基于《Electron in Action》书籍
  • 详细讲解 Electron 核心概念
  • 包含完整的实战案例

• 掘金 Electron 专栏：https://juejin.cn/column/6844986555084802056

  • 多位作者分享的 Electron 实践经验
  • 包含最新的技术动态
  • 适合进阶学习

• SegmentFault Electron 专题：https://segmentfault.com/t/electron

  • 开发者分享的问题和解决方案
  • 包含实际项目中的常见问题
  • 适合遇到具体问题时查阅

18.4 实战项目练手

GitHub 优质Electron新手项目

• electron-notes-app：https://github.com/electron/electron-quick-start

  • 基础的记事本应用
  • 适合初学者练习窗口操作和文件操作
  • 代码结构清晰，易于理解

• electron-calculator：https://github.com/electron/simple-samples/tree/master/calculator

  • 简单的计算器应用
  • 展示了基本的 UI 交互和事件处理
  • 代码量小，适合快速上手

• electron-music-player：https://github.com/electron/electron-api-demos

  • 音乐播放器示例
  • 展示了媒体播放、托盘图标等功能
  • 适合学习多媒体相关 API

• electron-file-explorer：https://github.com/electron/simple-samples/tree/master/file-explorer

  • 文件浏览器示例
  • 展示了文件系统操作和目录遍历
  • 适合学习 Node.js 文件系统 API

• electron-chat-app：https://github.com/electron/simple-samples/tree/master/chat

  • 简单的聊天应用
  • 展示了网络请求和实时通信
  • 适合学习网络相关功能

18.5 常用Electron插件汇总

开发必备插件

1. electron-store

   • 用途：本地数据存储
   • 特点：简单易用，支持 JSON 格式
   • 适用场景：存储应用配置、用户偏好设置
   • 安装：npm install electron-store

2. electron-log

   • 用途：日志管理
   • 特点：支持多级别日志、文件轮转
   • 适用场景：应用调试、错误跟踪
   • 安装：npm install electron-log

3. electron-updater

   • 用途：应用自动更新
   • 特点：支持多种更新源、自动下载安装
   • 适用场景：生产环境应用更新
   • 安装：npm install electron-updater

4. electron-builder

   • 用途：应用打包
   • 特点：支持多平台打包、签名
   • 适用场景：应用发布
   • 安装：npm install electron-builder --save-dev

5. electron-reload

   • 用途：开发时热重载
   • 特点：文件变化时自动重启应用
   • 适用场景：开发调试
   • 安装：npm install electron-reload --save-dev

6. electron-debug

   • 用途：开发调试工具
   • 特点：提供调试快捷键、DevTools 自动打开
   • 适用场景：开发调试
   • 安装：npm install electron-debug --save-dev

7. electron-context-menu

   • 用途：自定义右键菜单
   • 特点：支持自定义菜单项、快捷键
   • 适用场景：增强用户体验
   • 安装：npm install electron-context-menu

8. electron-prompt

   • 用途：创建提示对话框
   • 特点：简单易用，支持自定义输入
   • 适用场景：用户输入收集
   • 安装：npm install electron-prompt

9. electron-dl

   • 用途：文件下载管理
   • 特点：支持进度条、断点续传
   • 适用场景：文件下载功能
   • 安装：npm install electron-dl

10. electron-notifications

    • 用途：系统通知管理
    • 特点：支持自定义图标、点击回调
    • 适用场景：应用通知功能
    • 安装：npm install electron-notifications