使用Electron将vue项目改桌面程序

embedded/2024/10/8 16:45:10/

1,一个简单的实现案例

# 切换镜像,其他镜像:https://registry.npm.taobao.org/
npm config set registry https://registry.npmmirror.com/ 
# 推荐使用yarn来管理依赖包,相对于Node.js自带的npm包管理工具来说,它具有速度更快、使用更简捷、操作更安全的特点
npm install -g yarn
# 安装Vue CLI
yarn global add @vue/cli
# 使用Vue CLI创建一个Vue项目,如果提示vue命令不存在,执行yarn global bin ,将输出的yarn路径添加到环境变量的path中
# 这里选择使用vue3
vue create chapter3_4
# 安装Vue插件electron-builder,过程中会提示你选择Electron的版本,选择最新版即可
vue add electron-builder
# 启动程序
yarn electron:serve

启动后的效果如图:
在这里插入图片描述

2,部分代码介绍

在这里插入图片描述

  • 在没有开发完全之前,这个桌面程序可以当作一般vue网页来开发,启动用yarn serve 来启动
  • 要关闭桌面端默认打开的调试窗口,直接注释掉background.js中的win.webContents.openDevTools()

http://www.ppmy.cn/embedded/123202.html

相关文章

正则表达式的使用示例--Everything文件检索批量重命名工具

一、引言 Everything是一款非常实用的文件搜索工具,它可以帮助您快速定位并查找计算机中的文件和文件夹。Everything搜索文件资料之神速,有使用过的朋友们都深有体会,相对于Windows自带的搜索功能,使用Everything,可以…

YOLOv11改进 | Neck篇 | YOLOv11引入Gold-YOLO

1. Gold-YOLO介绍 1.1 摘要: 在过去的几年中,YOLO 系列模型已成为实时目标检测领域的领先方法。 许多研究通过修改架构、增加数据和设计新的损失,将基线提升到更高的水平。 然而,我们发现以前的模型仍然存在信息融合问题,尽管特征金字塔网络(FPN)和路径聚合网络(PANet)…

【python面试宝典3】遍历文件夹

题目013:写一个函数统计传入的列表中每个数字出现的次数并返回对应的字典。 点评:送人头的题目,不解释。 def count_letters(items):result {}for item in items:if isinstance(item, (int, float)):result[item] result.get(item, 0) 1re…

C++(string类的实现)

1. 迭代器、返回capacity、返回size、判空、c_str、重载[]和clear的实现 string类的迭代器的功能就类似于一个指针,所以我们可以直接使用一个指针来实现迭代器,但如下图可见迭代器有两个,一个是指向的内容可以被修改,另一个则是指…

新手小白在做副业时要注意哪些细节?

在当今社会,越来越多的人开始尝试通过副业来增加收入、拓展技能或实现自我价值。对于新手小白来说,进入副业领域可能充满了挑战和不确定性。然而,只要注意一些关键细节,就可以提高副业成功的几率,避免不必要的风险。 一…

Redis 实现分布式锁时需要考虑的问题

引言 分布式系统中的多个节点经常需要对共享资源进行并发访问,若没有有效的协调机制,可能会导致数据竞争、资源冲突等问题。分布式锁应运而生,它是一种保证在分布式环境中多个节点可以安全地访问共享资源的机制。而在Redis中,使用…

微信小程序操作蓝牙

主要流程: 1.初始化蓝牙适配器openBluetoothAdapter,如果不成功就onBluetoothAdapterStateChange监听蓝牙适配器状态变化事件 2.startBluetoothDevicesDiscovery开始搜寻附近的蓝牙外围设备 3.onBluetoothDeviceFound监听寻找到新设备的事件,…

解决docker一直出现“=> ERROR [internal] load metadata for docker.io/library/xxx“的问题

docker拉取镜像时报错,除标题外,还报如下信息 此时想到是不是拉取超时呢,然后配置了一下docker拉取镜像源 vm /etc/docker/daemon.json { "registry-mirrors": ["https://jq794zz5.mirror.aliyuncs.com"] } # 重新加载配…