vue3 electron（保姆级教程）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在现代前端开发领域，Vue.js 与 Electron 的结合为开发者提供了一种高效构建跨平台桌面应用的解决方案。Vue 3 的响应式框架特性与 Electron 的跨平台能力相辅相成，使得开发者能够用一套代码库实现 Windows、macOS 和 Linux 的全平台覆盖。本文将从零开始，逐步讲解如何利用 Vue 3 和 Electron 构建一个基础的桌面应用，并深入解析两者的核心交互逻辑。

从零开始：环境搭建与项目初始化

安装依赖与项目结构

要开始开发，首先需要安装 Vue CLI 和 Electron 相关依赖。通过以下命令初始化项目：

npm init vue@latest  
cd your-project-name  
npm install electron --save-dev  

项目结构建议如下：

your-project-name/  
├── electron/          # Electron 主进程相关代码  
│   ├── main.js        # 主进程入口文件  
│   └── preload.js     # 预加载脚本  
├── public/            # 静态资源目录  
├── src/               # Vue 3 源代码目录  
│   └── App.vue        # 渲染进程入口组件  
├── package.json       # 项目配置文件  
└── vite.config.js     # 构建工具配置  

Electron 主进程与渲染进程的分工

Electron 的核心架构分为 主进程 和 渲染进程：

• 主进程：负责管理窗口、系统事件（如菜单、托盘）以及与原生模块的交互。
• 渲染进程：基于 Chromium 内核，用于运行 Vue 3 的前端代码，与用户直接交互。

可以将主进程想象为“指挥官”，负责全局调度；渲染进程则是“士兵”，执行具体的界面渲染任务。

Vue 3 与 Electron 的核心交互：通信机制

通过 IPC（进程间通信）实现双向通信

Electron 提供了 ipcMain（主进程）和 ipcRenderer（渲染进程）模块，用于在两个进程间传递消息。例如，在 Vue 3 组件中调用原生对话框：

渲染进程（Vue 组件）

import { ipcRenderer } from 'electron';  

const openFile = () => {  
  ipcRenderer.send('open-file-dialog');  
};  

ipcRenderer.on('selected-files', (event, files) => {  
  console.log('Selected files:', files);  
});  

主进程（main.js）

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

ipcMain.on('open-file-dialog', (event) => {  
  dialog.showOpenDialog({ properties: ['openFile'] }).then(result => {  
    if (!result.canceled) {  
      event.reply('selected-files', result.filePaths);  
    }  
  });  
});  

预加载脚本（preload.js）的作用

预加载脚本在渲染进程启动时执行，负责安全地暴露 API 到前端代码中。例如：

// preload.js  
const contextBridge = require('electron').contextBridge;  
const { ipcRenderer } = require('electron');  

contextBridge.exposeInMainWorld('electronAPI', {  
  openFile: () => ipcRenderer.invoke('open-file-dialog'),  
  sendLog: (message) => ipcRenderer.send('log-message', message),  
});  

通过这种方式，前端可以直接调用 window.electronAPI.openFile()，同时避免直接暴露 Electron 的全局对象，提升安全性。

实战案例：构建一个简易文本编辑器

功能需求

• 使用 Vue 3 管理文本内容
• 通过 Electron 实现文件保存与打开
• 添加菜单栏支持

步骤 1：创建 Vue 组件

在 src/App.vue 中定义文本编辑器的基本结构：

<template>  
  <textarea v-model="content" placeholder="Start typing..."></textarea>  
  <button @click="saveFile">Save</button>  
</template>  

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

const content = ref('');  

const saveFile = async () => {  
  const { ipcRenderer } = require('electron');  
  const result = await ipcRenderer.invoke('save-file-dialog');  
  if (result.canceled) return;  
  await fs.promises.writeFile(result.filePath, content.value);  
};  
</script>  

步骤 2：扩展主进程功能

在 electron/main.js 中添加文件保存逻辑：

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

ipcMain.handle('save-file-dialog', async () => {  
  const result = await dialog.showSaveDialog({  
    defaultPath: 'untitled.txt',  
  });  
  return result;  
});  

步骤 3：实现菜单栏

通过 Electron 的 Menu 模块创建菜单栏：

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

const template = [  
  {  
    label: 'File',  
    submenu: [  
      { label: 'Open', accelerator: 'CmdOrCtrl+O', click: () => {  
        // 触发打开文件对话框  
      } },  
    ],  
  },  
];  

app.whenReady().then(() => {  
  const menu = Menu.buildFromTemplate(template);  
  Menu.setApplicationMenu(menu);  
});  

知识点总结

• Vue 3 的响应式系统：通过 v-model 简化双向数据绑定，配合 ref 实现状态管理。
• Electron 的模块化设计：通过 ipcMain 和 ipcRenderer 实现进程间通信，避免直接操作 DOM。
• 异步操作处理：使用 async/await 简化文件操作的异步流程，提升代码可读性。

打包与部署：从开发到发布

使用 electron-builder 打包应用

安装构建工具：

npm install electron-builder --save-dev  

在 package.json 中配置构建脚本：

{  
  "build": {  
    "productName": "Vue3-Electron-Editor",  
    "directories": {  
      "output": "dist"  
    },  
    "mac": {  
      "icon": "public/icon.icns"  
    },  
    "win": {  
      "icon": "public/icon.ico"  
    }  
  }  
}  

运行打包命令：

npm run build  

注意事项

• 代码分割：利用 Vue 3 的 defineAsyncComponent 实现懒加载，减少主进程初始加载压力。
• 安全性：通过 Electron 的沙箱模式（Sandbox）进一步隔离渲染进程，防止未授权的原生 API 调用。

结论

Vue 3 与 Electron 的结合，为开发者提供了一种高效、灵活的桌面应用开发方案。通过本文的案例，读者可以掌握从环境搭建、进程通信到最终打包的全流程开发技巧。未来，随着 Vue 3 的 Composition API 和 Electron 的新特性（如 Nativefier）不断演进，这一技术栈的应用场景将进一步扩展。

对于初学者，建议从简单的功能模块入手，逐步探索 Electron 的原生 API 和 Vue 3 的响应式系统。对于中级开发者，可以尝试结合 TypeScript 或 Vuex，实现更复杂的状态管理和业务逻辑。通过持续实践，Vue 3 + Electron 必将成为你跨平台开发的得力工具。