(二十八)ATP应用测试平台——使用electron集成vue3桌面应用程序

前言

Electron 是一个开源的框架,它允许使用 Web 技术(HTML、CSS 和 JavaScript)构建跨平台的桌面应用程序。通过 Electron,开发者可以使用前端技术栈来创建具有原生应用程序体验的桌面应用。

Electron可以在 Windows、Mac 和 Linux 等多个操作系统上运行,使开发者能够为不同平台构建统一的桌面应用程序。Electron 拥有庞大的社区支持和丰富的插件生态系统,提供了许多功能强大的库和工具,可加速应用程序开发。通过使用 Electron,开发者可以获得与原生应用程序相当的性能和用户体验,包括系统级别的通知、托盘图标、菜单栏等功能。Electron 提供了丰富的 API,可以自定义应用程序的窗口、界面样式、交互等,以实现个性化和创新的用户界面。Electron 集成了 Chrome 开发者工具,开发者可以使用强大的调试和开发工具来提升开发效率和质量。

本节内容我们用到的主要前端技术栈包含Vue3+vite+ts,通过vue3项目集成一个electron版本的桌面应用。

正文

①使用idea安装vite插件,便于完成vite项目模板创建

②使用vite插件初始化创建一个vue3项目 

③完成vue3项目vue-app创建

 ④使用命令npm安装vue-app项目依赖

 ⑤使用命令npm run dev启动项目,如果能正常启动,代表vue项目创建完成

⑥npm安装
electron开发依赖包,由于镜像源问题,这里建议使用cnpm安装,使用淘宝镜像

最新版本:
npm install electron -D指定版本
npm install electron@22.2.0 -Dcnpm安装最新版本:
cnpm install electron -Dcnpm安装指定版本
cnpm install electron@22.2.0 -D

⑦ 在vue-app项目的根目录下创建一个electron目录,用于存储相关electron配置文件

 

⑧ 在electron目录下创建桌面程序的入口文件main.ts

const { app, protocol, BrowserWindow, globalShortcut } = require('electron')
// 需在当前文件内开头引入 Node.js 的 'path' 模块
const path = require('path')app.commandLine.appendSwitch("--ignore-certificate-errors", "true");
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([{ scheme: "app", privileges: { secure: true, standard: true } }
]);const createWindow = () => {const win = new BrowserWindow({minWidth: 960,minHeight: 540,width: 1280,height: 1024,//窗口是否在屏幕居中. 默认值为 falsecenter: true,//设置为 false 时可以创建一个无边框窗口 默认值为 true。frame: true,//窗口是否在创建时显示。 默认值为 true。show: true,webPreferences: {nodeIntegration: true,nodeIntegrationInWorker: true,preload: path.join(__dirname, 'preload.ts'),webSecurity: false,}})win.setMenu(null)if (app.isPackaged) {win.loadURL(`file://${path.join(__dirname, '../dist/index.html')}`)} else {// win.loadURL('http://127.0.0.1:5173/')win.loadURL('http://localhost:5173/')win.webContents.openDevTools()}globalShortcut.register("CommandOrControl+Shift+i", function () {win.webContents.openDevTools();});}app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})

 ⑨在electron目录下创建预加载脚本preload.ts,这个文件在main.ts中调用

// 所有的 Node.js API接口 都可以在 preload 进程中被调用.
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {const replaceText = (selector, text) => {const element = document.getElementById(selector)if (element) element.innerText = text}for (const dependency of ['chrome', 'node', 'electron']) {replaceText(`${dependency}-version`, process.versions[dependency])}
})

⑩在package.json中指定electron主进程文件main.ts路径,在scripts字段下增加一条electron的启动命令 start:electron

⑪ 启动vue的桌面应用程序,验证electron应用是否可以启用

⑫安装electron-builder,将vue项目打包成可以运行安装的桌面应用程序

最新版本:
npm install electron-builder -D指定版本:
npm install electron-builder@23.6.0 -Dcnpm安装最新版本:
cnpm install electron-builder -Dcnpm安装指定版本:
cnpm install electron-builder@23.6.0 -D

⑬在根目录下创建icon目录,并将不同系统的桌面的图标文件放置在该目录下,windows系统中icon需要256*256的ico格式图片

⑭在package.json添加author、description、build等字段,同时在scripts字段添加build:electron命令

{"name": "vue-app","private": true,"version": "0.0.0","type": "module","main": "electron/main.ts","author": {"name": "bei","email": "bei@163.com"},"description": "bei","scripts": {"dev": "vite --open","build": "vue-tsc && vite build","preview": "vite preview","start:electron": "vite | electron .","build:electron": "vite build && electron-builder"},"dependencies": {"vue": "^3.3.11"},"devDependencies": {"@vitejs/plugin-vue": "^4.5.2","electron": "^22.2.0","electron-builder": "^23.6.0","typescript": "^5.2.2","vite": "^5.0.8","vue-tsc": "^1.8.25"},"build": {"appId": "bei.first.app","productName": "ElectronApp","copyright": "Copyright © 2023 lsl","directories": {"output": "dist_electron"},"win": {"icon": "./icon/icon.ico","target": [{"target": "nsis","arch": ["x64"]}]},"dmg": {"contents": [{"x": 410,"y": 150,"type": "link","path": "/Applications"},{"x": 130,"y": 150,"type": "file"}]},"linux": {"icon": "./icon/icon.png","target": "AppImage"},"mac": {"icon": "./icon/icon.icns"},"files": ["./dist","./electron","!**/node_modules/**"],"asar": false,"nsis": {"oneClick": false,"allowElevation": true,"allowToChangeInstallationDirectory": true,"installerIcon": "./icon/icon.ico","uninstallerIcon": "./icon/icon.ico","installerHeaderIcon": "./icon/icon.ico","createDesktopShortcut": true,"createStartMenuShortcut": true}}
}

⑮ 使用npm run build:electron命令开始打包桌面应用程序,这里要保证github是可以访问的,需要从github下载依赖安装包electron-v22.2.0-win32-x64.zip、winCodeSign-2.6.0/winCodeSign-2.6.0.7z、nsis-3.0.4.1/nsis-3.0.4.1.7z、/nsis-resources-3.4.1/nsis-resources-3.4.1.7z

⑯验证桌面应用程序

⑰如果桌面应用启动后出现白屏,在vite.config.ts文件中增加base: "./"配置,然后重新打包

⑱ 直接启动绿色免安装版

⑲ 如果在第15步的下载编译包的过程中下载失败,可提前下载好对应版本,解压到对应用户的Local目录下C:\Users\ASUS\AppData\Local\electron-builder

结语

关于使用electron集成vue3桌面应用程序的项目到这里就结束了,我们下期见。。。。。。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/651771.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签

文章目录: 1.HTML图片标签 1.1 图像标签-基本使用1.2 图像标签-属性1.3 路径 1.3.1 相对路径 1.3.2 绝对路径 2.超链接标签 3.音频标签 4.视频标签 1.HTML图片标签 1.1 图像标签-基本使用 作用:在网页中插入图片。 <img src"图片的URL">src用于指定图像…

HCS 华为云Stack产品组件

HCS 华为云Stack产品组件 Cloud Provisioning Service(CPS) 负责laas的云平台层的部署和升级是laas层中真正面向硬件设备&#xff0c;并将其池化软件化的部件。 Service OM 资源池(计算/存储/网络)以及基础云服务(ECS/EVS/PC)的管理工具。 ManageOne ManageOne包括服务中心…

数据结构(1)--> 顺序表

定义&#xff1a; 顺序表存储定义&#xff1a; 把逻辑上相邻的数据元素存储在物理上相邻的存储单元中的存储结构&#xff0c;顺序表功能的实现借助于数组&#xff0c;通过对数组进行封装&#xff0c;从而实现增删查改的功能&#xff0c;严格意义上来说&#xff08;数组无法实现…

第六课:Prompt

文章目录 第六课&#xff1a;Prompt1、学习总结&#xff1a;Prompt介绍预训练和微调模型回顾挑战 Pre-train, Prompt, PredictPrompting是什么?prompting流程prompt设计 课程ppt及代码地址 2、学习心得&#xff1a;3、经验分享&#xff1a;4、课程反馈&#xff1a;5、使用Mind…

由两个有限项的等差数列B, C, 求有多少个有限项的等差数列A,满足C是A, B的所有公共项,若有无穷个A满足条件,输出-1

题目 思路&#xff1a; #include <bits/stdc.h> using namespace std; #define int long long #define pb push_back const int maxn 1e6 5, inf 1e9 5, maxm 4e4 5, mod 1e9 7, N 1e6; // int a[maxn], b[maxn]; int n, m; string s;int qpow(int a, int b){i…

Unity中创建Ultraleap 3Di交互项目

首先&#xff0c;创建新的场景 1、创建一个空物体&#xff0c;重命名为【XP Leap Provider Manager】&#xff0c;并在这个空物体上添加【XR Leap Provider Manager】 在物体XP Leap Provider Manager下&#xff0c;创建两个子物体Service Provider(XR)和Service Provider(…

C语言与操作符相关的经典例题

目录 一道变态的面试题&#xff1a;不能创建临时变量&#xff08;第三个变量&#xff09;&#xff0c;实现两个数的交换。 编写代码实现&#xff1a;求一个整数存储在内存中的二进制中1的个数。 二进制位置0或者置1 如果以下的知识点不是很清楚的可以去看这篇文章&#xff1…

阿里云部署配置幻兽帕鲁Palworld联机服务器详细教程

阿里云作为国内领先的云计算服务提供商&#xff0c;为企业和个人提供了丰富的云服务。本文将为大家详细介绍如何在阿里云上配置幻兽帕鲁Palworld联机服务器&#xff0c;以便与更多玩家共同体验游戏的乐趣。 第一步&#xff1a;登录服务器创建页 1、进入幻兽帕鲁联机服务快速部…

11. 双目视觉之立体视觉基础

目录 1. 深度恢复1.1 单目相机缺少深度信息1.2 如何恢复场景深度&#xff1f;1.3 深度恢复的思路 2. 对极几何约束2.1 直观感受2.2 数学上的描述 1. 深度恢复 1.1 单目相机缺少深度信息 之前学习过相机模型&#xff0c;最经典的就是小孔成像模型。我们知道相机通过小孔成像模…

力扣LCR 180. 文件组合(双指针)

Problem: LCR 180. 文件组合 文章目录 题目描述思路及解法复杂度Code 题目描述 思路及解法 本题目可以利用滑动窗口的技巧&#xff08;滑动窗口就是双指针的运用&#xff09;解决&#xff0c;具体实现如下 1.逻辑上生成窗口&#xff1a;让两个指针i&#xff0c;j分别初始化为1…

Java基本数据类型-字符型,布尔型

目录 字符型转义字符实例运行结果 ASCII码实例运行结果 布尔型实例运行结果 字符型 Java中使用单引号来表示字符常量&#xff0c;字符型在内存中占2个字节。char 类型用来表示在Unicode编码表中的字符。Unicode编码被设计用来处理各种语言的文字&#xff0c;它占2个字节&#…

3DGS 其二:Street Gaussians for Modeling Dynamic Urban Scenes

3DGS 其二&#xff1a;Street Gaussians for Modeling Dynamic Urban Scenes 1. 背景介绍1.1 静态场景建模1.2 动态场景建模 2. 算法2.1 背景模型2.2 目标模型 3. 训练3.1 跟踪优化 4. 下游任务 Reference&#xff1a; Street Gaussians for Modeling Dynamic Urban Scenes 1.…

Linux——常用命令

1、命令的基本格式 对服务器来讲&#xff0c;图形界面会占用更多的系统资源&#xff0c;而且会安装更多的服务、开放更多的端口&#xff0c;这对服务器的稳定性和安全性都有负面影响。其实&#xff0c;服务器是一个连显示器都没有的家伙&#xff0c;要图形界面干什么&#xff…

力扣hot100 字符串解码 栈 辅助栈

Problem: 394. 字符串解码 文章目录 思路&#x1f496; 辅助栈 思路 &#x1f468;‍&#x1f3eb; 路飞 &#x1f496; 辅助栈 ⏰ 时间复杂度: O ( n ) O(n) O(n) &#x1f30e; 空间复杂度: O ( n ) O(n) O(n) class Solution {public String decodeString(String s…

MCU启动文件小解一下

GD32启动文件分析 启动文件的一些指令.s启动文件分析栈空间分配堆空间管理中断向量表定义堆空间定义Reset_Handler复位程序HardFault_Handler_main文件分析用户堆栈初始化 GD32启动文件主要做了以下工作&#xff1a; 初始化SP_initial_sp , PCReset_Handler指针&#xff0c;设置…

C#,计算几何,随机点集之三角剖分的德劳内(Delaunay)算法的源代码

一、三角剖分Delaunay算法简介 点集的三角剖分&#xff08;Triangulation&#xff09;&#xff0c;对数值分析&#xff08;比如有限元分析&#xff09;以及图形学来说&#xff0c;都是极为重要的一项预处理技术。尤其是Delaunay三角剖分&#xff0c;由于其独特性&#xff0c;关…

day04 两两交换链表中的节点、删除链表倒数第N个节点、链表相交、环形链表II

题目链接&#xff1a;leetcode24-两两交换链表中的节点, leetcode19-删除链表倒数第N个节点, leetcode160-链表相交, leetcode142-环形链表II 两两交换链表中的节点 基础题没有什么技巧 解题思路见代码注释 时间复杂度: O(n) 空间复杂度: O(1) Go func swapPairs(head *Li…

class_19:抽象类(纯虚函数不能被实例化)

#include <iostream>using namespace std;class Teacher{ public:string name;string school;virtual void goinclass() 0;//纯虚函数不能被实例化 抽象类virtual void startclass() 0;//纯虚函数不能被实例化virtual void afterclass() 0;//纯虚函数不能被实例化 };…

Android App开发-简单控件(4)——按钮触控和图像显示

3.4 按钮触控 本节介绍了按钮控件的常见用法&#xff0c;包括&#xff1a;如何设置大小写属性与点击属性&#xff0c;如何响应按钮的点击事件和长按事件&#xff0c;如何禁用按钮又该如何启用按钮&#xff0c;等等。 3.4.1 按钮控件Button 除了文本视图之外&#xff0c;按钮…

IMXULL驱动学习——通过总线设备驱动模型点亮野火开发板小灯【参考韦东山老师教程】

参考&#xff1a;【IMX6ULL驱动开发学习】11.驱动设计之面向对象_分层思想&#xff08;学习设备树过渡部分&#xff09;-CSDN博客 韦东山课程&#xff1a;LED模板驱动程序的改造_总线设备驱动模型 我使用的开发板&#xff1a;野火imx6ull pro 欢迎大家一起讨论学习 实现了总线设…