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

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

news 来源：原创 2025/5/13 11:33:06

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

6. 运行项目

使用以下命令启动项目：

npm run electron:serve

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

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

编程日记 2025/5/13 11:33:06

Python中的asyncio：高效的异步编程模型

随着互联网应用的快速发展，程序的响应性和处理效率成为衡量系统性能的重要指标。传统的同步编程模型在面对高并发和IO密集型任务时，常常显得捉襟见肘，难以满足现代应用的需求。Python的asyncio库作为一种高效的异步编程模型，为开发…...

编程日记 2025/5/13 10:57:07

《解锁鸿蒙系统AI能力，开启智能应用开发新时代》

在当今科技飞速发展的时代，鸿蒙系统以其独特的分布式架构和强大的AI能力，为开发者们带来了前所未有的机遇。本文将深入探讨开发者如何利用鸿蒙系统的AI能力开发更智能的应用，开启智能应用开发的新时代。鸿蒙系统构筑了15系统级的AI能力&…...

编程日记 2025/5/10 4:35:25

安卓OCR使用（Google ML Kit）

OCR是一个很常用的功能，Google ML Kit提供了OCR能力，用起来也很简单，本文介绍一下使用方法。 1. 相关概念名词概念解释TextBlock块一个段落Line行一行文本Element元素单词；对汉字来说，类似"开头 (分隔符)中间&…...

编程日记 2025/5/3 1:03:05

使用redis的5种常用场景

文章目录 1. 缓存热点数据2. 分布式锁3. 计数器和限流器4. 消息队列5. 会话管理总结在日常开发工作中，Redis作为一款高性能的内存数据库，凭借其强大的功能特性和卓越的性能表现，已经成为了许多项目中不可或缺的组件。本文将详细介绍Redis在实…...

编程日记 2025/5/13 11:25:31

Extreme670和440的DHCP和vlan划分

1.网关配置防火墙 USG 添加静态路由，也就是回指路由192.168.0.0 255.255.0.0 192.168.100.2 usg关闭DHCP192.168.100.0段的，usg接口的网关地址是192.168.100.1，防火墙策略启用192.168.100.0段到wan1段的内网和外网的NAT地址转换。 2…...

编程日记 2025/5/11 0:56:30

VTK知识学习（33）-交互问题2

1、前言主要是针对前面有过实现不了交互的情况进行说明，经过一些尝试和分析调用API，总算实现RenderWindowControl函数回调正常串接，当然这个移动处理事件的效果目前也没有确认。 2、使用 vtkImageReslice reslice vtkImageReslice.New();p…...

编程日记 2025/5/3 2:38:36

c++ thread线程join、detach、joinable方法

(621条消息) 线程中断Thread的interrupt()方法_thread interrupt_萝卜阿咕咕的博客-CSDN博客 C/C编程：std::thread 详解-CSDN博客 #include <iostream> #include <thread>void do_some_work() {std::cout<<"Hello Concurrent World\n"…...

编程日记 2025/5/10 3:58:28

Transformer：深度学习的变革力量

深度学习领域的发展日新月异，在自然语言处理（NLP）、计算机视觉等领域取得了巨大突破。然而，早期的循环神经网络（RNN）在处理长序列时面临着梯度消失、并行计算能力不足等瓶颈。而 Transformer 的横空出世&am…...

编程日记 2025/5/12 10:17:55

【Python】main.py、init.py

文章目录 1. __init__.py作用：用法：示例：特点 2. __main__.py作用：用法：示例：特点： 3. 综合示例总结： 1. init.py 作用： __init__.py 文件的主要作用是标识一个目录是一…...

编程日记 2025/5/6 6:06:10

springboot集成整合工作流，activiti审批流，整合实际案例，流程图设计，流程自定义，表单配置自定义，代码demo流程

前言 activiti工作流引擎项目，企业erp、oa、hr、crm等企事业办公系统轻松落地，一套完整并且实际运用在多套项目中的案例，满足日常业务流程审批需求。一、项目形式 springbootvueactiviti集成了activiti在线编辑器，流行的前后端…...

编程日记 2025/5/13 11:07:39

代码随想录算法【Day16】

Day16 513.找二叉树左下角的值本题使用迭代法更简单，使用迭代法和递归法的区别是什么递归法目标就是找深度最大的叶子结点无论前中后序遍历，都是左节点先被遍历到，所以一旦得到深度最大的节点，就是最后一行最靠左侧的节点…...

编程日记 2025/5/13 6:40:54

从光子到图像——相机如何捕获世界？

引言你是否想过为何我们按一下相机快门就可以将眼前广袤多彩的世界显示于一个小小的相机屏幕上？本期推文中将带着大家重现从光子转换为电子、电子转换为图像中数字驱动值的整个流程。 ▲人们通过相机捕获眼前的场景从光子到电子的转换光线首先通过光学镜头进入相…...

编程日记 2025/5/12 21:02:27

Harmony开发【笔记1】报错解决（字段名写错了。。）

在利用axios从网络接收请求时，发现返回obj的code为“-1”，非常不解，利用console.log测试，更加不解，可知抛出错误是 “ E 其他错误: userName required”。但是我在测试时，它并没有体现为空，…...

编程日记 2025/5/11 6:44:02

Ubuntu 下载安装 elasticsearch7.17.9

参考 https://blog.csdn.net/qq_26039331/article/details/115024218 https://blog.csdn.net/mengo1234/article/details/104989382 过程来到 Es 的版本发布列表页面：https://www.elastic.co/downloads/past-releases#elasticsearch 根据自己的系统以及要安装的…...

编程日记 2025/5/12 9:33:02

8. LINUX 用户和组

文章目录 8.1 密码文件：/etc/passwd1. 登录名（Login Name）2. 经过加密的密码（Encrypted Password）3. 用户 ID（User ID, UID）4. 组 ID（Group ID, GID）5. 注释（…...

编程日记 2025/5/7 0:15:31

vue监听中的watch监听(详解)

1、watch 选项用于监听数据的变化并执行相应的回调函数。watch 选项提供了两个重要的属性：deep 和 immediate。1.1、深度监听 (deep: true) 当你需要监听一个对象或数组内部的变化时，可以使用 deep: true。这会使得 watch 监听器递归地监听对象或数组内…...

编程日记 2025/5/8 9:39:20

微信小程序中隐藏scroll-view 滚动条网页中隐藏滚动条

在微信小程序中隐藏scroll-view的滚动条可以通过以下几种方法实现： 方法一：使用CSS隐藏滚动条在小程序的样式文件中（如app.wxss或页面的.wxss文件），添加以下CSS代码来隐藏滚动条： scroll-view ::-webkit…...

编程日记 2025/5/7 17:26:09

K8s Pod OOMKilled，监控却显示内存资源并未打满

1. 问题现象 pod一直重启，通过grafana查看，发现内存使用率并没有100%。 2. 排查过程 2.1 describe查看pod最新一次的状态可以明显看到，最近一次的重启就是因为内存不足导致的。 2.2 describe 查看node节点状态找到原因了，原来…...

编程日记 2025/5/6 15:07:31

对话｜全年HUD前装将超330万台，疆程技术瞄准人机交互“第一屏”

2024年，在高阶智驾进入快速上车的同时，座舱人机交互也在迎来新的增长点。Chat GPT、AR-HUD、车载投影等新配置都在带来新增量机会。高工智能汽车研究院监测数据显示，2024年1-10月，中国市场（不含进出口）乘用…...

编程日记 2025/5/11 14:04:54

【HTML+CSS+JS+VUE】web前端教程-10-列表标签之无序列表

无序列表实现无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记无序列表始于<ul>标签，每个列表项始于<li>标签。<ul><li>苹果...

编程日记 2025/4/23 19:15:45

基于V2X的无人机与特种车辆战地智能通信：技术融合与实战应用

一、引言 1.1 研究背景与意义在现代战争的复杂环境中，通信系统的高效与可靠已然成为决定胜负的关键因素。随着军事技术的飞速发展，战争形态发生了深刻变革，作战空间不断拓展，从陆地、海洋、天空延伸至电磁、网络、太空等多维领…...

编程日记 2025/5/2 2:50:55

20250109下载JDK17的方法链接

20250109下载JDK17的方法&链接 2025/1/9 16:20 缘起：编译地面站应用程序QGC，需要安装QT和【旧版本的】JDK17。当时在网上没有找到JDK17，就安装了比较接近的JDK21。反正最后的QT for Android最后就是没有编译通过。到底是谁的问题&#…...

编程日记 2025/5/11 5:55:06

杭州铭师堂的云原生升级实践

作者：升学e网通研发部基建团队公司介绍杭州铭师堂，是一个致力于为人的全面发展而服务的在线教育品牌。杭州铭师堂秉持“用互联网改变教育，让中国人都有好书读”的使命，致力于用“互联网教育”的科技手段让更多的孩子都能享有优…...

编程日记 2025/5/12 18:03:24

chrome浏览器的更新提示弹窗无法更新Chrome解决方法

使用组策略编辑器此方法适用于 Windows 系统且系统为专业版及以上版本，家庭版系统没有组策略功能。按下Win R键，打开 “运行” 对话框，输入gpedit.msc并回车，打开组策略编辑器。在组策略编辑器中，依次展开 “计算机…...

编程日记 2025/5/12 9:19:13

LLM prompt提示构造案例：语音回复内容；o1思维链

1、语音回复内容目的： 语音聊天助手的prompt，让大模型来引导聊天内容，简短和友好，从而文字转语音时候也比较高效。 ## 角色设定与交互规则 ### 基本角色你是用户的好朋友. 你的回答将通过逼真的文字转语音技术阅读. ### 回答规则…...

编程日记 2025/5/12 22:56:01

OceanBase 学习计划全攻略：开启分布式数据库探索之旅

《OceanBase 学习计划全攻略：开启分布式数据库探索之旅》在当今数字化浪潮汹涌澎湃的时代，数据库作为企业信息存储与管理的核心基础设施，其性能、可靠性和扩展性至关重要。OceanBase 作为一款具有卓越分布式特性的国产数据库，正…...

编程日记 2025/5/12 9:18:58

Linux 虚拟机与windows主机之间的文件传输--设置共享文件夹方式

Linux 虚拟机与windows主机之间的文件传输设置共享文件夹方式在虚拟机中打开终端查看是否已经新建完成，到文件夹中找到它看一下，这个位置就能存储东西啦...

编程日记 2025/4/24 1:16:58

React Context用法总结

1. 基本概念 1.1 什么是 Context Context 提供了一种在组件树中共享数据的方式，而不必通过 props 显式地逐层传递。它主要用于共享那些对于组件树中许多组件来说是"全局"的数据。 1.2 基本用法 // 1. 创建 Context const ThemeContext React.createC…...

编程日记 2025/5/8 17:06:18

Linux好用软件

力荐软件 apt-fast：更快速的软件管理安装过程会进入一个图形界面，配置线程数等信息，全部默认即可 sudo add-apt-repository ppa:apt-fast/stable sudo apt-get update sudo apt-get -y install apt-fast 以后安装应用，把apt-get直接替换成apt-fast即可，例如安装vlc sudo…...

编程日记 2025/5/8 2:09:02

【MYSQL】

文章目录 1.DDL 1.DDL --添加字段 ALTER TABLE table_name add COLUMN embed_model VARCHAR(32) NOT NULL COMMENT 名称备注 COLLATE utf8mb4_bin AFTER config_code;--修改字段 ALTER TABLE table_name CHANGE COLUMN column_a column_b VARCHAR(500) NOT NULL COMMENT 配置信…...

编程日记 2025/5/9 14:10:21

webrtc之rtc::ArrayView＜const uint8_t＞

rtc::ArrayView<const uint8_t> 是 WebRTC（或其他基于 rtc 命名空间的库）中常见的一个类型，它通常用于表示一块只读的内存区域，该内存区域由一系列 uint8_t 类型（无符号 8 位整数）元素组成。 1. rt…...

编程日记 2025/5/12 0:41:17

深入理解 MySQL 的 EXPLAIN 工具

1. 什么是 EXPLAIN 工具？ EXPLAIN 是 MySQL 中用来分析 SQL 查询执行计划的命令，它能够显示查询在执行时会如何访问表、使用哪些索引、扫描多少行等信息。通过 EXPLAIN 工具，开发者可以直观地了解查询的执行过程，从而进行针对性的…...

编程日记 2025/5/7 17:37:30

谷歌Google、紫鸟浏览器插件开发

对于跨境电商行业的IT部门来说，经常需要获取各种店铺相关数据，但是仅靠官方提供的接口来获取数据远远不够，这个时候我们就需要插件或者RPA的方式来获取数据。以下是关于自研紫鸟插件的简单demo，紫鸟浏览器使用的是火狐和谷歌的插…...

编程日记 2025/5/1 23:51:01

HTML 显示器纯色亮点检测工具

HTML 显示器纯色亮点检测工具相关资源文件已经打包成html等文件，可双击直接运行程序，且文章末尾已附上相关源码，以供大家学习交流，博主主页还有更多Html相关程序案例，秉着开源精神的想法，望大家喜欢&#…...

编程日记 2025/5/6 14:17:58

Win32汇编学习笔记09.SEH和反调试

Win32汇编学习笔记09.SEH和反调试-C/C基础-断点社区-专业的老牌游戏安全技术交流社区 - BpSend.net SEH - structed exception handler 结构化异常处理跟筛选一样都是用来处理异常的,但不同的是筛选器是整个进程最终处理异常的函数,但无法做到比较精细的去处理异常(例如处理…...

编程日记 2025/5/4 14:45:05

计算机组成原理（九）：乘法器

乘法器原理乘法器的工作原理可以用二进制乘法来说明。二进制乘法和十进制乘法类似，通过部分积的累加得到结果。部分积的生成在二进制乘法中，每一位的乘积是两个二进制数位的与运算（0 0 0，1 0 0，0 1 0&…...

编程日记 2025/5/10 20:13:32

前端开发中常用的插件库

ahooks 一个高质量且可靠的React Hooks库。class-variance-authority（CVA） 是一个专注于解决CSS类管理问题的库。classnames 是一个在React开发中非常流行的JavaScript工具库，它可以帮助开发者有条件地连接类名字符串。copy-to-clipboard 一个…...

编程日记 2025/5/7 10:32:12

认识+安装ElasticSearch

1. 为什么要学习ElasticSearch? 一般的来说,项目中的搜索功能尤其是电商项目,商品的搜索肯定是访问频率最高的页面之一。目前搜索功能是基于数据库的模糊搜索来实现的，存在很多问题。 1.1 数据库搜索所存在的问题 1.1.1 查询效率较低由于数据库模糊查询不走索引&…...

编程日记 2025/5/10 4:58:24

Nginx | 解决 Spring Boot 与 Nginx 中的 “413 Request Entity Too Large“ 错误

关注：CodingTechWork 引言在 Web 开发中，413 Request Entity Too Large 是一种常见的 HTTP 错误，它指示客户端请求的实体（例如文件或数据）超出了服务器允许的最大大小。对于使用 Spring Boot 和 Nginx 的应用程序来说…...

编程日记 2025/5/12 12:58:25

CAD批量打印可检索的PDF文件

本文虽介绍CAD使用方法，但还是劝告大家尽早放弃使用CAD软件。。。。太TM难用了当你打开CAD时发现如下一堆图纸，但是不想一个一个打印时。你可以按照下面操作实现自动识别图框实现批量打印。 1.安装批量打印插件 2.安装后打开CAD，输入命令Bp…...

编程日记 2025/5/7 6:26:06

理解Unity脚本编译过程：程序集

https://docs.unity3d.com/Manual/script-compilation.html 关于Unity C#脚本编译的细节，其中一个比较重要的知识点就是如何自定义Assembly。预定义的assembly 默认情况下，Unity会按照这个规则进行编译。 PhaseAssembly nameScript files1Assembly-…...

编程日记 2025/5/12 12:51:38

Linux-Ubuntu之SPI串行通信陀螺仪和加速度计

Linux-Ubuntu之SPI串口通信陀螺仪和加速度计一，SPI通信原理二，ICM-20608六轴传感器控制三，代码1.小tip 一，SPI通信原理 SPI：串行全双工通信，最高能达到百MHZ，通常一个主设备跟多个从设备&…...

编程日记 2025/5/12 9:16:12

【C++/控制台】2048小游戏

源代码： #include <iostream> #include <windows.h> #include <stdio.h> #include <math.h> #include <stdlib.h> #include <conio.h> #include <time.h>// #define KEY_DOWN(VK_NONAME) ((GetAsyncKeyState(VK_NONAME)…...

编程日记 2025/5/5 14:48:32

github gitbook写书

github创建新的仓库在仓库中添加目录 ‘SUMMARY.md # Summary * [简介](README.md)gitbook 新建一个site https://www.gitbook.com/ 注册账号取名字一路 next，注意选免费版最后 gitbook同步到github 你在主页可以看到刚刚的test网站点击右上角圈出来…...

编程日记 2025/5/7 23:48:22

鸿蒙中调整应用内文字大小

1、ui Stack() {Row() {ForEach([1, 2, 3, 4], (item: number) > {Text().width(3).height(20).backgroundColor(Color.Black).margin(item 2 ? { left: 8 } : item 3 ? { left: 7 } : { left: 0 })})}.width(97%).justifyContent(FlexAlign.SpaceBetween).padding({ ri…...

编程日记 2025/5/13 0:26:44