Electron 入门学习指南：快速搭建跨平台桌面应用

感谢DevUI社区贡献者 TrueHappy 提供的优质好文！

点击此处访问原文

摘要：Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的框架。

Electron简介

Electron 由 GitHub 开发并开源，结合了 Chromium 和 Node.js，允许开发者使用 Web 技术构建桌面应用。知名应用如 VS Code、Slack、Discord 等都使用 Electron 构建。

核心特点：

跨平台（Windows、macOS、Linux），HarmonyOS支持普通应用(需适配)
使用 HTML、CSS 和 JavaScript 开发
完整的 Node.js 集成
丰富的原生 API 访问能力

环境搭建

准备工作

确保你的系统已安装：

Node.js (建议使用最新的 LTS 版本)
npm 或 yarn (本教程使用 npm)
代码编辑器 (如 VS Code)

第一步：创建 Vue 3 项目

使用 Vue CLI 创建新项目：

bash 复制代码

npm install -g @vue/cli

bash 复制代码

vue create electron-vue3-app

在交互式界面中选择(可选)：
- 选择 "Manually select features"
- 勾选：Babel, Router, Vuex, CSS Pre-processors, Linter
- 选择 Vue 3.x
- 其他选项按需选择或使用默认值
进入项目目录：

bash 复制代码

cd electron-vue3-app

第二步：添加 Electron 支持

安装 Electron 作为开发依赖：

bash 复制代码

npm install electron --save-dev

安装必要的工具：

bash 复制代码

npm install electron-builder --save-dev
npm install concurrently wait-on cross-env --save-dev

第三步：配置 Electron 主进程

在项目根目录创建 electron 文件夹，然后创建 main.js 文件：

javascript 复制代码

// electron/main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow() {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  })

  // 加载应用
  if (process.env.NODE_ENV === 'development') {
    win.loadURL('http://localhost:8080')
    win.webContents.openDevTools()
  } else {
    win.loadFile(path.join(__dirname, '../dist/index.html'))
  }
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

第四步：修改 package.json

修改 package.json 文件：

json 复制代码

{
  "name": "electron-vue3-app",
  "version": "0.1.0",
  "private": true,
  "main": "electron/main.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:serve": "concurrently -k \"cross-env NODE_ENV=development vue-cli-service serve\" \"wait-on http://localhost:8080 && electron .\"",
    "electron:build": "vue-cli-service build && electron-builder"
  },
  "dependencies": {
    // Vue 3 相关依赖
  },
  "devDependencies": {
    // 原有的 devDependencies
    "electron": "^最新版本",
    "electron-builder": "^最新版本",
    "concurrently": "^最新版本",
    "wait-on": "^最新版本",
    "cross-env": "^最新版本"
  }
}

第五步：解决 Electron 与 Vue 的集成问题

在 vue.config.js 中添加以下配置（如果没有则创建该文件）：

javascript 复制代码

// vue.config.js
module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true
    }
  },
  configureWebpack: {
    target: 'electron-renderer'
  }
}

第六步：运行项目

开发模式运行：

bash 复制代码

npm run electron:serve

生产环境构建：

bash 复制代码

npm run electron:build

prompt提示词

bash 复制代码

1、安装@vue/cli

2、使用vue cli创建一个Vue3新项目，名称为happy-electron-vue3

3、安装 electron、electron-builder concurrently wait-on cross-env 作为开发依赖

主进程与渲染进程

Electron 应用基于多进程架构：

主进程：管理应用生命周期、创建窗口、调用原生 API
- 每个 Electron 应用有且只有一个主进程
- 使用 Node.js API
渲染进程：显示网页内容（每个窗口一个渲染进程）
- 类似常规网页，可以使用 DOM API
- 默认情况下不能直接访问 Node.js API

进程间通信

Electron 提供了几种 IPC（进程间通信）方式：

1. 使用 `ipcMain` 和 `ipcRenderer`

主进程 (main.js):

javascript 复制代码

const { ipcMain } = require('electron')

ipcMain.on('message-from-renderer', (event, arg) => {
  console.log(arg) // 打印 "Hello from renderer"
  event.reply('message-from-main', 'Hello from main')
})

渲染进程 (index.html):

html 复制代码

<script>
const { ipcRenderer } = require('electron')

// 发送消息到主进程
ipcRenderer.send('message-from-renderer', 'Hello from renderer')

// 监听主进程回复
ipcRenderer.on('message-from-main', (event, arg) => {
  console.log(arg) // 打印 "Hello from main"
})
</script>

更加详细的内容请参考文章：Electron 进程通信机制详解

常用模块

菜单 (Menu)
对话框 (Dialog)
系统通知 (Notification)
系统托盘 (Tray)

更加详细的内容请参考文章：Electron 常用 API 全面指南

打包与分发

1. 使用 electron-builder

bash 复制代码

npm install electron-builder --save-dev

2. 使用 electron-forge

bash 复制代码

npx create-electron-app my-app --template=webpack
cd my-app
npm run make

3. electron-builder vs. electron-forge

特性	electron-builder	electron-forge
定位	专注于打包和分发	完整的 Electron 开发工具链
配置复杂度	中等，需要较多配置	简单，开箱即用
功能范围	强大的打包功能	全生命周期管理（创建→开发→打包）
自定义能力	非常高	中等
自动更新支持	内置完善	需要插件
社区生态	非常活跃	较活跃
多平台打包	单机跨平台打包	需要分平台打包

其他

启用原生窗口：避免透明窗口和自定义边框
javascript 复制代码
```
new BrowserWindow({
  transparent: false,
  frame: true
})
```
懒加载资源：按需加载页面和资源
使用 Web Workers：处理 CPU 密集型任务

禁用 DevTools 扩展：生产环境中

javascript 复制代码

win.webContents.on('devtools-opened', () => {
  win.webContents.closeDevTools()
})

监控内存使用：

javascript 复制代码

setInterval(() => {
  console.log(process.memoryUsage())
}, 5000)

使用 TypeScript

bash 复制代码

npm install --save-dev typescript @types/node @types/electron

tsconfig.json:

json 复制代码

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  }
}

调试技巧

使用 Chrome DevTools
javascript 复制代码
```
win.webContents.openDevTools()
```
快捷键
javascript 复制代码
```
ctrl+shift+I
```

学习资源

Electron 官方文档
Electron Fiddle - 学习和实验 Electron 的工具
Awesome Electron - 精选资源列表
Electron 示例应用

加入我们

DevUI团队重磅推出~前端智能化场景解决方案MateChat，为项目添加智能化助手~

源码：gitcode.com/DevCloudFE/...（欢迎star~）

官网：matechat.gitcode.com

Electron 入门学习指南：快速搭建跨平台桌面应用

目录

Electron简介

环境搭建

准备工作

第一步：创建 Vue 3 项目

第二步：添加 Electron 支持

第三步：配置 Electron 主进程

第四步：修改 package.json

第五步：解决 Electron 与 Vue 的集成问题

第六步：运行项目

prompt提示词

主进程与渲染进程

进程间通信

1. 使用 ipcMain 和 ipcRenderer

常用模块

打包与分发

1. 使用 electron-builder

2. 使用 electron-forge

3. electron-builder vs. electron-forge

其他

学习资源

加入我们

1. 使用 `ipcMain` 和 `ipcRenderer`