Electron 教程：从背景到 Vue3 桌面应用开发

​1. Electron 背景介绍​​

Electron 是一个开源框架，由 ​​GitHub​ ​ 开发（最初为 ​​Atom 编辑器​ ​ 项目构建），允许开发者使用 ​​Web 技术（HTML、CSS、JavaScript）​ ​ 构建 ​​跨平台桌面应用程序​​。

​​1.1 起源与发展​​

• ​2013年​ ：最初名为 ​Atom Shell​ ，是 GitHub 为其代码编辑器 ​Atom​ 开发的底层框架。
• ​2015年​ ：更名为 ​Electron​ ，并开源，迅速被 ​Slack、Visual Studio Code、Discord​ 等知名应用采用。
• ​2022年​ ：底层升级至 ​Chromium 106​ 和 ​Node.js 16.16.0​ ，并支持 ​Windows 沉浸式黑暗模式​ 等新特性。

​​1.2 核心特点​​

✅ ​​跨平台​ ​：一套代码可运行在 ​​Windows、macOS、Linux​ ​ 上。

✅ ​​Web 技术驱动​ ​：使用 ​​HTML、CSS、JavaScript​ ​ 构建 UI，无需学习 C++/Objective-C/Java。

✅ ​​Chromium + Node.js​​：

• ​Chromium​ 提供现代化的 Web 渲染引擎（支持最新 Web API）。
• ​Node.js​ 允许访问 ​文件系统、网络、原生 API​ 等底层功能。
  ✅ ​生态丰富​：
• 支持 ​自动更新、打包安装（NSIS、DMG、AppImage）​。
• 被 ​VS Code、Figma、Trello Desktop​ 等流行应用使用。

---

​​2. Electron 架构​​

Electron 应用由两个核心进程组成：

​​2.1 主进程（Main Process）​​

• ​作用​：控制应用生命周期（启动、退出）、创建窗口、管理原生功能（菜单、对话框）。
• ​运行环境​：Node.js + Electron API。
• ​关键模块​ ：
  • app（控制应用事件）
  • BrowserWindow（创建窗口）
  • dialog（文件/消息对话框）
  • ipcMain（与渲染进程通信）

​​2.2 渲染进程（Renderer Process）​​

• ​作用​ ：负责 ​UI 渲染​（HTML/CSS/JS），类似浏览器标签页。
• ​运行环境​：Chromium（支持 Web 技术） + 可选 Node.js（需配置）。
• ​关键模块​ ：
  • ipcRenderer（与主进程通信）
  • fetch / XMLHttpRequest（网络请求）

​​🔗 进程通信（IPC）​ ​：

主进程和渲染进程通过 ​​ipcMain 和 ipcRenderer​​ 进行数据交换。

---

​​3. 环境搭建（Vue3 + Electron）​​

​​3.1 创建 Vue3 项目​​

# 使用 Vite 创建 Vue3 项目
npm create vite@latest my-vue-electron-app -- --template vue
cd my-vue-electron-app
npm install

​​3.2 安装 Electron 依赖​​

# 安装 Electron（开发依赖）
npm install electron --save-dev

# 安装 electron-builder（打包工具）
npm install electron-builder --save-dev

​​3.3 项目结构​​

my-vue-electron-app/
├── package.json
├── vite.config.js
├── src/          # Vue3 前端代码
├── main.js       # Electron 主进程
├── preload.js    # 预加载脚本（安全 IPC 通信）
└── index.html    # Electron 渲染进程入口（可选）

---

​​4. 配置 Electron 主进程​​

​​4.1 创建 main.js（主进程）​​

在项目根目录创建 main.js，用于控制 Electron 窗口和 Vue3 应用：

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

function createWindow() {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: false, // 禁用 Node.js 集成（安全考虑）
      contextIsolation: true, // 启用上下文隔离
      preload: path.join(__dirname, 'preload.js'), // 预加载脚本
    },
  });

  // 开发环境加载 Vite 开发服务器
  if (process.env.NODE_ENV === 'development') {
    win.loadURL('http://localhost:5173');
    win.webContents.openDevTools(); // 打开 DevTools（可选）
  } else {
    // 生产环境加载打包后的 Vue3 应用
    win.loadFile(path.join(__dirname, '../dist/index.html'));
  }
}

// Electron 初始化完成后创建窗口
app.whenReady().then(createWindow);

// 所有窗口关闭时退出应用（macOS 除外）
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

// macOS 点击 Dock 图标时重新创建窗口
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

​​4.2 创建 preload.js（预加载脚本）​​

用于安全地暴露 IPC 通信 API 给 Vue3 渲染进程：

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  // 示例：发送消息到主进程
  sendMessage: (message) => ipcRenderer.send('message-from-vue', message),
  // 示例：接收主进程消息
  onMessage: (callback) => ipcRenderer.on('message-from-main', (event, data) => callback(data)),
});

---

​​5. 配置 Vue3 与 Electron 通信​​

​​5.1 在 Vue3 组件中使用 IPC​​

在 Vue3 组件（如 src/App.vue）中调用 Electron API：

<template>
  <div>
    <h1>Vue3 + Electron 桌面应用</h1>
    <button @click="sendMessageToElectron">发送消息给 Electron</button>
    <div v-if="messageFromElectron">
      <p>来自 Electron 的消息: {{ messageFromElectron }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const messageFromElectron = ref('');

// 发送消息到 Electron 主进程
const sendMessageToElectron = () => {
  window.electronAPI.sendMessage('Hello from Vue3!');
};

// 接收来自 Electron 的消息
onMounted(() => {
  window.electronAPI.onMessage((data) => {
    messageFromElectron.value = data;
  });
});
</script>

​​5.2 在 main.js 中处理 IPC 消息​​

修改 main.js，让 Electron 主进程接收并回复 Vue3 的消息：

const { ipcMain } = require('electron');

// 监听来自 Vue3 的消息
ipcMain.on('message-from-vue', (event, message) => {
  console.log('来自 Vue3 的消息:', message);
  // 回复消息给 Vue3
  event.sender.send('message-from-main', 'Electron 收到你的消息了！');
});

---

​​6. 打包 Vue3 + Electron 应用​​

​​6.1 修改 package.json​​

{
  "name": "my-vue-electron-app",
  "version": "1.0.0",
  "main": "main.js", // Electron 主进程入口
  "scripts": {
    "dev": "vite", // 启动 Vue3 开发服务器
    "build": "vite build", // 打包 Vue3 前端
    "electron:dev": "concurrently \"npm run dev\" \"wait-on http://localhost:5173 && electron .\"", // 开发模式（Vue3 + Electron）
    "electron:build": "npm run build && electron-builder" // 打包生产版本
  },
  "devDependencies": {
    "electron": "^28.0.0",
    "electron-builder": "^24.0.0",
    "concurrently": "^8.0.0",
    "wait-on": "^7.0.0"
  },
  "build": {
    "appId": "com.example.vue-electron",
    "productName": "Vue3 Electron App",
    "win": { "target": "nsis" }, // Windows 安装包
    "mac": { "target": "dmg" },   // macOS 安装包
    "linux": { "target": "AppImage" } // Linux 安装包
  }
}

​​6.2 运行 & 打包​​

​​（1）开发模式（Vue3 + Electron 同时运行）​​

npm run electron:dev

​​（2）打包生产版本​​

npm run electron:build

✅ ​​输出​ ​：dist/ 文件夹包含 ​​Windows .exe、macOS .dmg、Linux .AppImage​​ 安装包。

---

​​7. 总结​​

步骤	说明
​​1. 背景​​	Electron = Web 技术（Vue3） + 桌面应用（Chromium + Node.js）
​​2. 架构​​	​​主进程​ ​（管理窗口） + ​​渲染进程​​（Vue3 UI）
​​3. 环境​​	npm install electron electron-builder
​​4. 主进程​​	main.js 控制窗口，preload.js 安全 IPC
​​5. Vue3 通信​​	window.electronAPI 调用 Electron API
​​6. 打包​​	electron-builder 生成 .exe / .dmg / .AppImage

🚀 ​​下一步​ ​：尝试集成 ​​数据库、文件管理、或调用原生 API​ ​！

📚 ​​官方文档​ ​：https://www.electronjs.org/docs

---

​​💡 提示​​：

• ​开发时​ ：用 electron:dev 同时运行 Vue3 和 Electron。
• ​生产时​ ：用 electron:build 打包成安装包。
• ​安全​ ：禁用 nodeIntegration，使用 preload.js + contextBridge。