我是如何用Electron + Vue3开发一个桌面效率工具的

# 我是如何用Electron + Vue3开发一个桌面效率工具的 ## 前言 一直想做一个自己的桌面效率工具，管理待办事项+番茄钟+剪贴板历史。花了两个周末用Electron + Vue3做出来了。 ## 项目初始化 ```bash npm create @electron-vite/app my-tool -- --template vue-ts # 项目结构 # src/ # main/ -- 主进程（Node.js） # preload/ -- 预加载脚本 # renderer/ -- 渲染进程（Vue3） ``` ## IPC通信 ```typescript // preload/index.ts - 桥接层 import { contextBridge, ipcRenderer } from 'electron' contextBridge.exposeInMainWorld('electronAPI', { saveData: (data: any) => ipcRenderer.invoke('save-data', data), onNotify: (callback: Function) => ipcRenderer.on('notify', (_, msg) => callback(msg)) }) // main/index.ts - 主进程处理 ipcMain.handle('save-data', async (event, data) => { fs.writeFileSync(dataPath, JSON.stringify(data)) return { success: true } }) ``` ## 系统托盘 ```typescript const tray = new Tray(path.join(__dirname, 'icon.png')) const contextMenu = Menu.buildFromTemplate([ { label: '显示窗口', click: () => mainWindow.show() }, { label: '开始番茄钟', click: () => startPomodoro() }, { type: 'separator' }, { label: '退出', click: () => app.quit() } ]) tray.setToolTip('我的效率工具') tray.setContextMenu(contextMenu) tray.on('click', () => { mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show() }) ``` ## 踩坑记录 > 1. 开发环境热更新正常，打包后白屏——路由要用hash模式 > 2. macOS系统托盘图标太大——图标必须是16x16或22x22 > 3. Windows下通知没声音——需要设置appUserModelId ```typescript // 坑：打包后路径问题 if (process.env.NODE_ENV === 'development') { mainWindow.loadURL('http://localhost:5173') } else { mainWindow.loadFile(path.join(__dirname, '../renderer/index.html')) } ``` ## 自动更新 ```typescript import { autoUpdater } from 'electron-updater' autoUpdater.checkForUpdatesAndNotify() autoUpdater.on('update-available', () => { dialog.showMessageBox({ message: '发现新版本，正在下载...' }) }) autoUpdater.on('update-downloaded', () => { autoUpdater.quitAndInstall() }) ``` ## 总结 Electron开发体验不错，Web前端可以无缝转桌面开发。但要注意包体积（轻松100MB+），如果追求轻量可以考虑Tauri。