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

news2025/1/10 18:08:25

我们将使用 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 ."
  }
}