Vue+Electron跨平台桌面应用开发实战

1. 为什么选择Vue+Electron组合

去年接手一个跨平台桌面应用项目时，我首次将Vue和Electron组合使用。这个技术搭配完美解决了我们既要快速开发美观界面，又要实现桌面端原生能力的双重需求。Vue的组件化开发模式加上Electron的跨平台能力，让前端开发者也能轻松构建专业级桌面应用。

这种组合特别适合以下场景：

• 需要将现有Web应用打包为桌面程序
• 要求支持Windows/macOS/Linux多平台
• 团队主要技术栈是前端技术
• 项目需要访问本地文件系统等桌面端能力

2. 环境搭建与项目初始化

2.1 基础环境准备

首先确保你的开发环境已经安装：

• Node.js 16.x或更高版本（建议使用LTS版本）
• npm 8.x或yarn 1.x
• 推荐使用VSCode作为开发工具

验证安装：

bash复制node -v
npm -v

2.2 创建Vue项目

使用Vue CLI快速初始化项目：

bash复制npm install -g @vue/cli
vue create vue-electron-demo

选择配置时建议：

• 手动选择特性
• 勾选Babel、Router、Vuex
• 选择Vue 3版本
• 使用ESLint + Standard config

2.3 集成Electron

在Vue项目根目录执行：

bash复制vue add electron-builder

这个插件会自动完成Electron的集成配置。安装完成后，项目结构会新增：

• background.js - Electron主进程入口文件
• electron-builder.json - 打包配置文件

3. 项目结构与核心概念解析

3.1 双进程架构理解

Electron应用采用主进程(Main)和渲染进程(Renderer)的双进程模型：

• 主进程：

  • 使用Node.js环境
  • 负责创建浏览器窗口
  • 管理应用生命周期
  • 访问系统级API

• 渲染进程：

  • 每个窗口都是一个独立进程
  • 运行前端代码(Vue组件)
  • 通过IPC与主进程通信

3.2 关键文件说明

code复制├── src/
│   ├── main/          # Electron主进程代码
│   │   └── background.js  
│   ├── renderer/      # Vue前端代码
│   │   ├── assets/
│   │   ├── components/
│   │   └── views/
│   └── App.vue
├── package.json
└── vue