1、技术选型与开发环境搭建：为什么选择Electron？

说实话，每次有朋友问我「桌面应用该用什么框架」，我都会先反问一句：你的用户是谁？

这不是绕弯子。技术选型这件事，说白了就是找最合适的工具。我这些年折腾过不少方案，踩过的坑能写满一个笔记本。今天咱们就聊聊，为什么我最终把票投给了 Electron。

为什么不是 Tauri？

Tauri 这两年确实火。它用 Rust 写后端，前端用 Web 技术，打包出来的体积小得感人。我记得第一次看到 Tauri 的 Hello World 只有 3MB 时，我差点就叛变了。

但冷静下来想想，有几个现实问题绕不开：

  • 生态差距：Electron 的 npm 包几乎都能直接用。Tauri 呢？很多 Node.js 原生模块得自己适配。
  • 团队门槛：你团队里有人会 Rust 吗？我见过不少项目，因为招不到 Rust 开发者，最后卡在半路上。
  • 功能成熟度：Tauri 的自动更新、系统托盘、通知这些功能，还在追赶阶段。
我的建议：如果你做的是面向消费者的轻量工具，Tauri 值得一试。但企业级应用、需要大量原生能力的场景，Electron 更稳妥。

Flutter Desktop 呢？

Flutter 做移动端确实香，但桌面端嘛...我去年用 Flutter Desktop 重构过一个内部工具，体验怎么说呢——像穿着西装去爬山。

主要问题有三个：

  1. UI 风格割裂：Flutter 自己画控件，跟系统原生风格总差那么点意思。用户会觉得「这软件看着怪怪的」。
  2. 插件生态薄弱：想调用个系统 API？你可能得自己写 Platform Channel。
  3. 调试体验：热重载确实快，但一碰到原生模块就抓瞎。

嗯，Flutter Desktop 还在快速迭代中，未来可期。但现阶段，我不会把它作为主力方案。

Qt 呢？老牌劲旅

Qt 我用了好几年，C++ 写界面，性能没得说。但为什么我后来转向 Electron 了？

对比维度 Electron Qt
开发效率 高（前端技术栈） 中（C++/QML）
UI 灵活性 极高（CSS 随便玩） 中（QSS 有限）
跨平台一致性 好 需要额外适配
社区资源 丰富 较少
学习成本 低 高

说白了，Qt 适合那种对性能有极致要求的场景——比如音视频处理、工业控制软件。但大部分业务应用，犯不着用 Qt 来折磨自己。

为什么最终选了 Electron？

我个人的判断标准很简单：团队产出效率 × 生态成熟度。

Electron 背后有 GitHub、微软、Slack 这些大厂在推。VS Code、Slack、Discord、Figma 这些你天天用的软件，都是 Electron 做的。你想想看，这些产品敢用，说明稳定性是经过验证的。

而且，前端开发者一抓一大把。招人容易，上手快，这才是企业最看重的。

核心结论：Electron 不是完美的，但它是当前综合成本最低、风险最小的跨平台桌面方案。

安装开发环境

好，选型定了，咱们开始搭环境。这部分我尽量精简，毕竟装工具这种事，说多了都是废话。

安装 Node.js

Electron 基于 Node.js，所以这是第一步。我个人习惯用 nvm（Node Version Manager）来管理 Node 版本，方便切换。

去 nodejs.org 下载 LTS 版本就行。我建议装 18.x 或 20.x，太老的版本有些新特性不支持。

装完后验证一下：

node --version
npm --version

能看到版本号，就说明装好了。

注意：我曾经遇到过 npm 权限问题，在 macOS/Linux 上装全局包时老是报错。后来发现是没用 nvm 导致的。建议用 nvm 安装，省心很多。

npm 还是 yarn？

这个问题其实没啥好纠结的。npm 是官方标配，yarn 更快更稳定。我个人用 yarn，因为它的缓存机制确实香——同一个项目在不同机器上装依赖，yarn 能快一倍。

安装 yarn：

npm install -g yarn

或者用 corepack（Node.js 16+ 自带）：

corepack enable
corepack prepare yarn@stable --activate

安装 Git

这个不用多说了吧？去 git-scm.com 下载安装。装完后配置一下：

git config --global user.name "你的名字"
git config --global user.email "你的邮箱"

嗯，这一步虽然简单，但很多人会忘。我第一次用 Git 时就没配，结果提交记录上全是「unknown」。

创建第一个 Electron 应用（Hello World）

环境搭好了，咱们来写个 Hello World。这是最激动人心的部分——虽然代码不多，但看到窗口弹出来的那一刻，成就感满满。

初始化项目

mkdir my-electron-app
cd my-electron-app
npm init -y

这会生成一个 package.json 文件。然后安装 Electron：

npm install electron --save-dev

或者用 yarn：

yarn add electron --dev

安装过程可能会有点慢，毕竟 Electron 要下载 Chromium 内核。我第一次装的时候等了快十分钟，还以为是网络问题。

创建主进程文件

在项目根目录创建 main.js：

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
})

这段代码做了三件事：

  • 引入 Electron 的核心模块
  • 创建一个 800x600 的窗口
  • 加载一个 HTML 文件

创建 HTML 文件

在项目根目录创建 index.html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello Electron</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>这是我的第一个 Electron 应用</p>
</body>
</html>

配置启动脚本

修改 package.json，在 scripts 里加上：

"scripts": {
  "start": "electron ."
}

运行

npm start

或者：

yarn start

如果一切顺利，你会看到一个窗口弹出来，上面写着「Hello World!」。

避坑指南：我曾经遇到过窗口一片空白的情况，折腾了半天才发现是 loadFile 的路径写错了。记住，路径是相对于 main.js 的。

到这里，你的第一个 Electron 应用就跑起来了。虽然只是个 Hello World，但你已经掌握了 Electron 应用的基本骨架：主进程 + 渲染进程。后面我们会在这个基础上，一步步搭建出真正的桌面应用。

下一章，咱们聊聊 Electron 的架构原理——为什么它能用 Web 技术写桌面应用？这背后的设计思路，值得好好琢磨。

← 上一章 📖 返回目录 下一章 →