当前位置：首页 > news >正文

Vue 3 和 Electron 来构建一个桌面端应用

news 2025/6/28 22:51:23

我们将使用 Vue 3 和 Electron 来构建一个桌面端应用，该应用可以通过 Websocket 与服务器进行通信，并实现心跳检测、客户端上线、获取资产信息以及修改资产状态的功能。以下是实现步骤的概述：

项目结构：创建一个 Vue 3 项目，并集成 Electron。
Websocket 连接：在 Vue 组件中建立 Websocket 连接，并处理心跳检测、客户端上线、获取资产信息和修改资产状态的逻辑。
UI 设计：设计简单的 UI 界面，用于展示资产信息和操作按钮。
Electron 打包：使用 Electron 将 Vue 项目打包为桌面应用。

详细步骤

1. 项目结构

我们已经有一个 Vue 3 项目，接下来需要安装 Electron 和其他必要的依赖。

npm install electron --save-dev
npm install vue-router
npm install websocket
npm install axios

在 src 目录下创建以下文件：

src/main.js：Vue 应用的入口文件。
src/electron.js：Electron 的主进程文件。
src/router/index.js：Vue Router 的配置文件。
src/components/Home.vue：主页面组件。

2. Websocket 连接

在 src/components/Home.vue 中，我们将实现 Websocket 连接和相关业务逻辑。

<template><div><h1>资产管理系统</h1><button @click="pingServer">Ping 服务器</button><button @click="clientOnline">客户端上线</button><button @click="getAssetInfo">获取资产信息</button><button @click="updateAssetStatus">修改资产状态</button><div v-if="assetInfo"><h2>资产信息</h2><pre>{{ assetInfo }}</pre></div></div>
</template><script>
import { ref } from 'vue';
import { w3cwebsocket as W3CWebSocket } from 'websocket';const client = new W3CWebSocket('ws://192.168.5.145:8899/iothub');export default {setup() {const assetInfo = ref(null);client.onopen = () => {console.log('WebSocket Client Connected');};client.onmessage = (message) => {const data = JSON.parse(message.data);console.log('Received: ', data);if (data.code === '0') {assetInfo.value = data.data;} else {alert(data.msg);}};const pingServer = () => {client.send(JSON.stringify({ type: 'ping' }));};const clientOnline = () => {client.send(JSON.stringify({ type: 'up', from: 'doorDev', uid: 'unique-id-123' }));};const getAssetInfo = () => {const epc = prompt('请输入资产 EPC');if (epc) {client.send(JSON.stringify({type: 'send',from: 'doorDev',uid: 'unique-id-123',msg: {method: 'getAssetByEpc',passType: 'out',epc: epc}}));}};const updateAssetStatus = () => {const assetId = prompt('请输入资产 ID');if (assetId) {client.send(JSON.stringify({type: 'send',from: 'doorDev',uid: 'unique-id-123',msg: {method: 'updateAssetStatus',assetId: assetId}}));}};return {pingServer,clientOnline,getAssetInfo,updateAssetStatus,assetInfo};}
};
</script><style>
/* 这里可以添加一些简单的样式 */
</style>

3. Vue Router 配置

在 src/router/index.js 中配置路由：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../components/Home.vue';const routes = [{path: '/',name: 'Home',component: Home}
];const router = createRouter({history: createWebHistory(),routes
});export default router;

4. Electron 主进程

在 src/electron.js 中配置 Electron 主进程：

const { app, BrowserWindow } = require('electron');
const path = require('path');function createWindow() {const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js'),nodeIntegration: true,contextIsolation: false}});mainWindow.loadURL('http://localhost:8080');
}app.whenReady().then(() => {createWindow();app.on('activate', function () {if (BrowserWindow.getAllWindows().length === 0) createWindow();});
});app.on('window-all-closed', function () {if (process.platform !== 'darwin') app.quit();
});

5. 修改 package.json

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

{"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","electron:serve": "vue-cli-service serve & electron ."}
}