异常教程

electron vue3（超详细）

更新时间:

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

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

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

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

在现代软件开发领域，跨平台桌面应用的开发需求日益增长。Electron 和 Vue3 的结合，为开发者提供了一种高效、灵活且易于上手的解决方案。本文将深入探讨 electron vue3 的核心概念、开发流程以及实际应用案例，帮助编程初学者和中级开发者快速掌握这一技术组合，并构建出功能强大的跨平台桌面应用。

1. Electron 和 Vue3 的基础概念

1.1 什么是 Electron？

Electron 是一个由 GitHub 开发的开源框架，它允许开发者使用 Web 技术（HTML、CSS、JavaScript）构建跨平台的桌面应用程序。其核心思想是将 Chromium 渲染引擎和 Node.js 进程结合，使得开发者能够利用熟悉的 Web 技术开发 Windows、macOS 和 Linux 系统的应用程序。
比喻：Electron 就像一座桥梁，连接了 Web 前端技术（如 Vue3）与桌面操作系统，让开发者无需学习原生语言（如 C++ 或 Objective-C），就能快速构建功能丰富的桌面应用。

1.2 Vue3 的核心优势

Vue3 是 Vue.js 的重大升级版本，引入了 Composition API、响应式系统优化、TypeScript 支持等新特性。与 Vue2 相比，Vue3 在性能、代码复用性和开发体验上都有显著提升。
关键点：

  • Composition API：通过 setup() 函数和 ref/reactive 等 API，让代码逻辑更清晰、复用性更强。
  • 响应式系统：Vue3 的 Proxy 机制比 Vue2 的 Object.defineProperty 更高效，且支持深度响应。
  • Tree-shaking 支持：按需导入 Vue 功能模块，减少打包体积。

1.3 Electron + Vue3 的技术优势

将 Electron 与 Vue3 结合，可以充分发挥两者的优点：

  • 开发效率高：开发者可以复用 Web 前端知识，快速构建界面和交互逻辑。
  • 跨平台兼容：同一套代码可在多操作系统上运行。
  • 功能扩展性强：Electron 提供的 Node.js 环境允许直接调用原生模块（如文件操作、系统通知等）。

2. 开发环境配置与项目初始化

2.1 安装依赖

在开始开发前，需确保已安装以下工具：

  • Node.js（建议版本 16+）
  • npm 或 yarn（包管理工具）

2.2 创建 Electron + Vue3 项目

通过 Vue CLI 或手动初始化项目：

方法 1：使用 Vue CLI

npm init vue@latest

在项目模板选择时，选择 Manually select features，勾选 Electron 支持。

方法 2：手动创建

npm create vite@latest my-electron-app -- --template vue  

cd my-electron-app  
npm install electron --save-dev

2.3 配置主进程文件

Electron 需要一个主进程（main process）来管理应用生命周期。在项目根目录创建 main.js：

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

let mainWindow;  

app.on('ready', () => {  
  mainWindow = new BrowserWindow({  
    width: 800,  
    height: 600,  
    webPreferences: {  
      nodeIntegration: true, // 允许渲染进程使用 Node.js  
      contextIsolation: false,  
    },  
  });  
  mainWindow.loadFile('index.html');  
});

3. 构建第一个 Electron + Vue3 应用

3.1 项目结构

典型的项目结构如下：

my-electron-app/  
├── main.js           # 主进程文件  
├── package.json      # 项目配置  
├── public/           # 静态资源（如 index.html）  
├── src/              # Vue3 代码目录  
│   ├── assets/       # 图标、图片等  
│   ├── components/   # Vue 组件  
│   ├── App.vue       # 根组件  
│   └── main.js       # Vue 应用入口  
└── electron/         # 与 Electron 相关的配置  
    └── preload.js    # 预加载脚本（可选）

3.2 编写 Vue3 渲染进程代码

在 src/App.vue 中，使用 Vue3 的 Composition API 实现一个简单的计数器：

<template>  
  <div>  
    <h1>当前计数：{{ count }}</h1>  
    <button @click="increment">+1</button>  
  </div>  
</template>  

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

const count = ref(0);  
const increment = () => count.value++;  
</script>

3.3 运行应用

在 package.json 中添加启动脚本：

"scripts": {  
  "dev": "vite",  
  "electron:serve": "electron .",  
  "start": "npm run dev & npm run electron:serve"  
}

运行命令：

npm run start

4. Electron 与 Vue3 的交互实践

4.1 主进程与渲染进程通信

Electron 的进程间通信（IPC）是关键功能之一。例如，主进程可以监听渲染进程的事件，并执行原生操作。

案例：从渲染进程触发文件保存

步骤 1：在主进程中定义事件处理
在 main.js 中添加：

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

ipcMain.on('save-file', (event, data) => {  
  const fs = require('fs');  
  fs.writeFile('output.txt', data, (err) => {  
    if (err) event.reply('save-result', { success: false });  
    else event.reply('save-result', { success: true });  
  });  
});

步骤 2：在 Vue3 组件中发送事件
在 App.vue 中：

<script setup>  
import { ipcRenderer } from 'electron';  

const saveData = () => {  
  ipcRenderer.send('save-file', 'Hello from Vue3!');  
  ipcRenderer.on('save-result', (event, result) => {  
    console.log('保存结果:', result);  
  });  
};  
</script>  

<template>  
  <button @click="saveData">保存文件</button>  
</template>

5. 高级功能与优化技巧

5.1 使用 Vue3 的响应式系统与 Electron 集成

通过 reactive 或 ref，可以轻松绑定 Electron 的状态。例如，监控窗口大小变化：

// main.js  
const { ipcMain } = require('electron');  

ipcMain.handle('get-window-size', () => {  
  return mainWindow.getSize();  
});  

// App.vue  
<script setup>  
import { ipcRenderer } from 'electron';  
import { ref } from 'vue';  

const windowSize = ref({ width: 0, height: 0 });  

ipcRenderer.invoke('get-window-size').then((size) => {  
  windowSize.value = size;  
});  
</script>  

<template>  
  <p>窗口尺寸：{{ windowSize.width }}x{{ windowSize.height }}</p>  
</template>

5.2 打包与发布

使用 electron-builder 可以快速将应用打包为可执行文件：

npm install electron-builder --save-dev

在 package.json 中配置：

"build": {  
  "productName": "MyElectronApp",  
  "appId": "com.example.myapp",  
  "directories": {  
    "output": "dist"  
  },  
  "mac": {  
    "icon": "public/icon.icns"  
  },  
  "win": {  
    "icon": "public/icon.ico"  
  }  
}

运行打包命令：

npm run build

6. 实际案例：构建一个待办事项应用

6.1 功能需求

  • 显示待办事项列表
  • 添加新任务
  • 标记任务为已完成
  • 通过 Electron 的菜单栏导出任务数据

6.2 Vue3 组件实现

创建 TodoList.vue 组件：

<template>  
  <div>  
    <input v-model="newTodo" placeholder="输入新任务..." />  
    <button @click="addTodo">添加</button>  

    <ul>  
      <li v-for="todo in todos" :key="todo.id">  
        <input type="checkbox" v-model="todo.completed" />  
        <span :class="{ completed: todo.completed }">{{ todo.text }}</span>  
      </li>  
    </ul>  
  </div>  
</template>  

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

const newTodo = ref('');  
const todos = ref([]);  

const addTodo = () => {  
  if (newTodo.value.trim()) {  
    todos.value.push({  
      id: Date.now(),  
      text: newTodo.value,  
      completed: false  
    });  
    newTodo.value = '';  
  }  
};  
</script>

6.3 通过 Electron 导出数据

步骤 1：在主进程中定义导出逻辑

// main.js  
const { Menu } = require('electron');  

const template = [  
  {  
    label: '文件',  
    submenu: [  
      {  
        label: '导出任务',  
        click() {  
          const fs = require('fs');  
          const data = JSON.stringify(todos.value);  
          fs.writeFile('todos.json', data, (err) => {  
            if (err) console.error(err);  
          });  
        }  
      },  
    ],  
  },  
];  

Menu.setApplicationMenu(Menu.buildFromTemplate(template));

结论

通过本文的讲解，读者可以掌握 electron vue3 技术栈的核心概念、开发流程及高级应用。从初始化项目到实现复杂功能，Electron 和 Vue3 的结合为开发者提供了一套高效且灵活的解决方案。无论是开发个人工具、企业级应用还是跨平台软件，这一组合都能显著提升开发效率和用户体验。

对于初学者，建议从简单案例入手，逐步深入学习进程间通信、打包优化等进阶内容。对于中级开发者，可以尝试结合 Electron 的原生模块（如系统通知、数据库操作）进一步扩展应用功能。未来，随着 Vue3 生态的不断完善和 Electron 的持续更新，这一技术组合的应用场景将更加广泛。

希望本文能为你的开发旅程提供有价值的参考，也期待你通过实践探索出更多可能性！

最新发布

查看更多文章