
# **Electron：用前端技术打造桌面应用，一站式入门指南**

在这个“能用 JavaScript 完成的事情绝不学第二种语言”的时代，Electron 绝对是前端工程师们最喜欢的跨平台应用开发框架之一。无论是 VS Code、Slack、Obsidian，还是你每天用的微信桌面版，都有它的影子。
今天就带你轻松理解：**Electron 到底是什么？为什么这么火？适合用来做什么？又该怎么入门？**

## 什么是 Electron？

一句话总结：**Electron = Node.js + Chromium + 跨平台桌面应用框架**
它让你用 Web 技术（HTML、CSS、JavaScript）开发 **Windows / macOS / Linux** 的桌面应用。
简单来说，Electron 会帮你同时启动：
- 一个 **浏览器渲染进程**（Chromium）
- 一个 **后台进程**（Node.js）

你只需要写前端页面，就能获得一个原生应用的能力。对于前端同学来说，这大概是“降维打击”级别的开发体验。

## ⭐ Electron 为什么能火这么多年？

### **① 技术门槛极低（前端即上手）**

只要你会做网页，你就会做桌面软件。
不用学 C++、Swift、Qt，那些统统不需要。
### **② 跨平台一次搞定**

一个代码仓库 → 打包后能跑在 Windows、macOS、Linux，这对于小团队来说非常友好。
### **③ 原生能力几乎全能**

Electron 提供系统 API，比如：
- 访问本地文件系统
- 系统通知
- 剪贴板
- 快捷键
- 窗口管理
- 系统托盘图标

而且 Electron + Node.js 的组合，能干的事情非常多。
### **④ 社区生态强大**

VS Code、GitHub Desktop、Discord 等大型应用都用 Electron，生态和插件体系十分成熟。

## Electron 到底适合做什么？

虽然 Electron 很强，但也不是万能。
下面是 **适合 Electron 的场景**：
✔ 你已经有 Web 版，用 Electron 快速“封装成桌面版”  ✔ 你的团队前端强、客户端弱  ✔ 你需要跨平台桌面软件  ✔ UI 复杂、需要 Web 技术的灵活性  ✔ 小工具、生产力软件、管理后台客户端
例如：
- Markdown 编辑器（Obsidian、Typora）
- 云盘客户端
- Web 系统本地客户端（管理后台、私有化工具）
- 抢票工具、脚本 GUI 工具
- 代码编辑器（VS Code）

## 不适合 Electron 的情况

以下场景不建议用 Electron：
✘ 要求占用极低（比如只有几十 MB 内存）  ✘ 高性能实时处理（视频渲染、游戏引擎等）  ✘ 企业对“体积太大”无法接受  ✘ 不能 bundling Node（安全合规要求高）
如果你打算做一个 10MB、20MB 的轻量应用……抱歉，Electron 打包完可能就 100MB 起步。

## Electron 的项目结构是怎样的？

一个最小化 Electron 项目的目录差不多是这样：
```
project/
├─ package.json
├─ main.js &nbsp; &nbsp; &nbsp;  # 主进程
└─ renderer/ &nbsp; &nbsp;  # 渲染进程（前端页面）
 &nbsp;  ├─ index.html
 &nbsp;  └─ index.js
```核心文件只有两个：
### 1）main.js（主进程）

负责窗口创建、系统接口调用。
最基本的 main.js：
```
const { app, BrowserWindow } = require('electron')
​
function createWindow() {
 &nbsp;const win = new BrowserWindow({
 &nbsp; &nbsp;width: 900,
 &nbsp; &nbsp;height: 600
  })
​
 &nbsp;win.loadFile('renderer/index.html')
}
​
app.whenReady().then(createWindow)
```### 2）renderer/index.html（渲染进程）

你可以用 Vue、React、Svelte、或纯 HTML 写 UI。
```
<h1>Hello Electron</h1>
<script>
 &nbsp;console.log("渲染进程已运行!")
</script>
```上手几乎没有学习成本。
## 如何开始一个 Electron 项目？

最推荐的方式是：
### **使用官方模板：**

```
npm init electron-app my-app
cd my-app
npm start
```一分钟后，你就能看到第一个桌面应用跑起来。
想更复杂？可以使用：
- Electron + Vue
- Electron + React
- Electron + Vite（强烈推荐）
- Electron Builder（用来打包）


## Electron 打包应用

常用的打包工具：
```
electron-builder
```打包 Windows 安装包：
```
npm run dist
```你就能生成：
- `exe`（Windows）
- `dmg` / `pkg`（macOS）
- `AppImage` / `deb`（Linux）

非常省心。
## Electron 的性能争议：到底重不重？

老话题了：  **Electron = 一个 Chrome + 一个 Node.js → 体积大 & 内存高**
但是否能接受，取决于你的业务：
- VS Code 这么大体量都能跑飞快
- Obsidian、Typora 打开不卡
- Slack、Notion 好用得不行

其实 Electron 的性能优化空间很大：
- 开启 Lazy Loading
- 减少渲染进程数量
- 关闭不必要的 Node 集成
- 使用 Vite 打包更轻量的前端
- 控制窗口数量

如果你不是实时处理 4K 视频，大部分场景都够用。
## 结语：Electron 依旧是桌面开发最优解之一

虽然大家常吐槽它“大、吃内存”，但 Electron 确实已经成为跨平台应用开发的事实标准。
**它降低了桌面应用的门槛，让无数没有客户端背景的开发者也能轻松做出高质量的桌面软件。**

在这个“能用 JavaScript 完成的事情绝不学第二种语言”的时代，Electron 绝对是前端工程师们最喜欢的跨平台应用开发框架之一。无论是 VS Code、Slack、Obsidian，还是你每天用的微信桌面版，都有它的影子。今天就带你轻松理解：Electron 到底是什么？为什么这么火？适合用来做什么？又该怎么入门？

Electron：用前端技术打造桌面应用，一站式入门指南

编程语言

Electron框架让前端开发者轻松构建跨平台桌面应用，使用HTML/CSS/JavaScript即可开发Windows/macOS/Linux应用。它整合Chromium和Node.js，提供原生API访问能力，适合开发编辑器、管理工具等应用。虽然体积较大，但性能优化空间充足，VSCode等知名应用都基于Electron开发。

安全合规

游戏引擎

文件系统

Windows

Linux

Swift

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

Electron框架让前端开发者轻松构建跨平台桌面应用，使用HTML/CSS/JavaScript即可开发Windows/macOS/Linux应用。它整合Chromium和Node.js，提供原生API访问能力，适合开发编辑器、管理工具等应用。虽然体积较大，但性能优化空间充足，VSCode等知名应用都基于Electr...

Electron：用前端技术打造桌面应用，一站式入门指南-腾讯云开发者社区-腾讯云

Electron：用前端技术打造桌面应用，一站式入门指南

Electron：用前端技术打造桌面应用，一站式入门指南

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐