🎬 HoRain云小助手:个人主页
🔥 个人专栏: 《Linux 系列教程》《c语言教程》
⛺️生活的理想,就是为了理想的生活!
⛳️ 推荐
前些天发现了一个超棒的服务器购买网站,性价比超高,大内存超划算!忍不住分享一下给大家。点击跳转到网站。
专栏介绍
专栏名称 | 专栏介绍 |
《C语言》 | 本专栏主要撰写C干货内容和编程技巧,让大家从底层了解C,把更多的知识由抽象到简单通俗易懂。 |
《网络协议》 | 本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘,一起解密网络协议在运行中协议的基本运行机制! |
《docker容器精解篇》 | 全面深入解析 docker 容器,从基础到进阶,涵盖原理、操作、实践案例,助您精通 docker。 |
《linux系列》 | 本专栏主要撰写Linux干货内容,从基础到进阶,知识由抽象到简单通俗易懂,帮你从新手小白到扫地僧。 |
《python 系列》 | 本专栏着重撰写Python相关的干货内容与编程技巧,助力大家从底层去认识Python,将更多复杂的知识由抽象转化为简单易懂的内容。 |
《试题库》 | 本专栏主要是发布一些考试和练习题库(涵盖软考、HCIE、HRCE、CCNA等) |
目录
⛳️ 推荐
专栏介绍
Electron实战项目指南
推荐的Electron实战项目
推荐学习路径
入门阶段
中级阶段
进阶阶段
适合简历/作品集的实战项目选题
最推荐的起点项目模板
为什么选择Electron?
开始你的第一个Electron项目
Electron实战项目指南
根据最新资料(2025年),以下是一些非常适合学习和实践的Electron实战项目,从入门到进阶都有覆盖。
推荐的Electron实战项目
| 项目名称 | 技术栈/特点 | 学习价值 | 难度 | GitHub Stars |
|---|---|---|---|---|
| Electron-Vite + React模板 | Vite + React + TypeScript + electron-builder + electron-updater | 现代最推荐的Electron开发起点,几乎所有新项目起点 | ★☆☆ 很高 | ★★★★★ |
| Electron-Vite + Vue3模板 | Vite + Vue3 + TypeScript + Pinia + electron-builder | Vue生态最流行的Electron开发模板,结构清晰 | ★☆☆ 很高 | ★★★★★ |
| markdown-editor | Electron + React + Monaco Editor + marked + electron-store | 经典Markdown编辑器,涉及文件读写、菜单、快捷键等 | ★★☆ | 数千–万级 |
| notable | Electron + React + TypeScript + IndexedDB + Markdown-it | 极简本地笔记应用,展示优雅的本地数据存储 | ★★☆ | 很高 |
| Pake | Rust + Tauri风格,但有Electron版本 | 学习如何把网页打包成桌面应用,极致体积小、启动快 | ★★☆ | 极高 |
推荐学习路径
入门阶段
- 从Electron官方Vite模板开始
npx create-electron-vite@latest my-app --template=react-ts # 或者Vue版 npx create-electron-vite@latest my-app --template=vue-ts - 然后学习markdown-editor项目
- 掌握核心技能:项目结构、Vite集成、窗口管理、文件系统、菜单、快捷键、打包发布
中级阶段
- 学习notable项目
- 研究Pake项目
- 尝试Motrix项目
- 掌握核心技能:本地数据库、托盘、下载管理、网络请求、进程通信优化
进阶阶段
- 研究Obsidian插件系统
- 实现长连接、实时通信
- 掌握高性能渲染、插件系统、自定义协议
适合简历/作品集的实战项目选题
- 本地Markdown+思维导图笔记(Obsidian轻量版)
- API调试+Mock工具(类似Postman的极简版)
- 本地AI对话客户端(接入Ollama/LM Studio)
- 轻量级Git客户端(只做commit/push/pull/diff)
- 图片/视频批量压缩+格式转换工具
- 跨平台剪贴板历史管理器+搜索
最推荐的起点项目模板
# React + TypeScript模板(2025年最推荐) npx create-electron-vite@latest my-electron-app --template=react-ts # Vue3 + TypeScript模板 npx create-electron-vite@latest my-electron-app --template=vue-ts这两个模板已经内置了:
- Vite热重载
- 主进程+渲染进程分离
- preload + contextBridge安全通信
- electron-builder配置
- 自动更新框架
- TypeScript支持
为什么选择Electron?
Electron是使用HTML/CSS/JavaScript开发跨平台桌面应用的框架,结合了Chromium(界面渲染)与Node.js(系统能力),让前端开发者能轻松构建Windows、macOS、Linux应用。
代表作:VS Code、Slack、GitHub Desktop、Postman都是用Electron开发的。
开始你的第一个Electron项目
创建项目目录:
mkdir my-electron-app && cd my-electron-app npm init -y安装Electron:
npm install electron --save-dev修改package.json:
{ "name": "my-electron-app", "version": "1.0.0", "main": "main.js", "scripts": { "start": "electron ." }, "devDependencies": { "electron": "^39.2.7" } }创建main.js和index.html文件,按照知识库[1]或[4]中的示例进行配置
如果你告诉我你更喜欢React/Vue/纯JS,以及想做哪类应用(笔记/工具/生产力/娱乐),我可以为你推荐更具体的模板和核心功能拆解。
❤️❤️❤️本人水平有限,如有纰漏,欢迎各位大佬评论批评指正!😄😄😄
💘💘💘如果觉得这篇文对你有帮助的话,也请给个点赞、收藏下吧,非常感谢!👍 👍 👍
🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧!🌙🌙🌙