Hello World - Electron
type: channel
link: https://seerking.com/index.php/tag/Electron/
items: 用 Electron 开发桌面应用实战

用 Electron 开发桌面应用实战
type: item
date: 2026-06-12T15:04:00+08:00
description: Electron 让前端开发者也能做桌面应用。记录一下开发过程。 ## 项目背景 需要一个本地的 Markdown 笔记工具，市面上的都不太满意，决定自己写一个。 ## 技术选型 - **Electron**：桌面框架 - **React**：UI 框架 - **CodeMirror**：编辑器 - **better-sqlite3**：本地数据库 ## 项目结构 ``` src/ ├── main/ # 主进程 │ ├── index.js # 入口 │ └── ipc.js # IPC 通信 ├── renderer/ # 渲染进程 │ ├── App.tsx │ └── components/ └── preload/ # 预加载脚本 ``` ## 关键实现 ### 文件监听 ```javascript const chokidar = require('chokidar'); chokidar.watch(dir).on('change', (path) => { // 同步文件变更 }); ``` ### 原生菜单 ```javascript const menu = Menu.buildFromTemplate([...]); Menu.setApplicationMenu(menu); ``` ### 打包发布 使用 electron-builder 打包： ```bash npm run build ``` ## 体验优化 - 快捷键支持 - 系统托盘 - 自动更新 - 深色模式 Electron 的坑不少，但对于熟悉前端的开发者来说，是最快速的桌面应用开发方案。