不过，

前端技术栈已经能覆盖 Web、小程序、App。而 Electron 让同一套 HTML/CSS/JS 能跑在 Windows、macOS、Linux 桌面上。无论是内部工具、桌面客户端还是跨网站应用，Electron 都是值得前端工程师掌握的技能。这篇文章从「为什么学」到「项目搭建」、「主进程与渲染进程」、「IPC 通信」再到「打包分发」还有「实战场景」，带你快速了解。

一、为什么前端工程师要学 Electron？

技术栈复用

• 使用 HTML、CSS、JavaScript/TypeScript
• 可集成 Vue、React、Svelte 等框架
• 一套代码。多端运行

典型应用

• VS Code、Cursor、Slack、Discord、Figma Desktop
• 公司内部管理程序、数据可视化大屏
• 本地文件处理、程序托盘、剪贴板等桌面能力

学习成本低

有前端基础即可上手，主要新增概念：主进程、渲染进程 、IPC。其实，

二、项目搭建：electron-vite

为什么选 electron-vite？说起来，

• 基于 Vite，开发时 HMR 快
• 内置主进程 、渲染进程 、预加载脚本的建立配置
• 支持 Vue 、React 等模板

创建项目

npm create @quick-start/electron# 选择 vue-ts 或 react-ts 等模板

再看或手动初始化，
npm init -yn
npm install electron electron-vite vite vue -D
``


 ` 

bash mkdir my-electron-app && cd my-electron-app npm init -y npm install electron electron-vite vite vue -D

目录结构*

my-electron-app/
├── src/
│ ├── main/ # 主进程
│ │ └── index.ts
│ ├── preload/ # 预加载脚本
│ │ └── index.ts
│ └── renderer/ # 渲染进程
│ ├── index.html
│ ├── main.ts
│ └── App.vue
├── electron.vite.config.ts
└── package.json

package.json关键配置*

{
"main"这方面。"out/main/index.js","scripts": {
"dev"这方面，"electron-vite dev","build": "electron-vite build","preview": "electron-vite preview"
},"devDependencies": {
"electron": "^.","electron-vite": "^.","vite": "^."
}
}

三 主进程 vs 渲染进程：

过程   职责    可访问          ​    ｢｢｢｢｢ﾊﾍ𤮕𤮕𤮕𤮕𤮛𤮛𤮛㭧㭧㭧㭧㭩㭩㭩㭩☼☼☼☼☼☻☻☻ ☻     ▐▐▐▐▐▐▂▂▂▂█████▀▀▀▀▀▀˜˜—€€€€™™™’’’’’“““””“””žž™™™™ ​ ​ ​                                 ​​ ​ ​                                 ​​ ​ ​                            •\t•\t•\t•\t•\t•\t •                         ⁰⁰⁰⁰⁰⁰⁰⁸８８８８８９９９９１２２２３３４４５６６７８８９９００００0000000111111112222222233344455566677788899999999999…，…，…，…，…，…，…，…，…，…，…，…，…，…，…，…，…，…，. …，… ，…，…，…，…，…，…，. …，…，…，…，..…，…，…，..…，…，…. .. .. .. . . . . . . . . . . .。..,.,.,....,…,..,，,..,…,..,..,，,...,…,.，..，....，，，'''''''' **注**这方面，实际文档中应使用标准的 ` ` 标记完成完整对齐。其实，--- ### 主进程序例：创建窗口 // src/main/index.ts import { app,BrowserWindow } from ‘electron’ import path from ‘path’ function createWindow { const win = new BrowserWindow({ 再看width。/* 填写宽度 */,height: /* 填写高度 */,webPreferences:{ preload:path.join,contextIsolation:true,nodeIntegration:false }}) if{ win.loadURL;win.webContents.openDevTools;}else{ win.loadFile);} } app.whenReady.n;app.on=>app.quit);### 渲染过程说明 "就是普通的前端页面用 Vue / React 开发即可，运行在 Chromium 中。"，可在此处引用相关框架文档。