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

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.rhkb.cn/news/438487.html

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

相关文章

【Linux】进程周边之优先级

目录 一、优先级 1.为什么要有进程优先级? 2.什么是进程优先级? 3.优先级的初始设定 3.1 PRI 和 NI 3.2如何修改优先级?(sudo/root) 3.2.1 概念: 3.2.2 如何查看进程的优先级? 3.3.3 或…

第十七章:c语言内存函数

1. memcpy使⽤和模拟实现 2. memmove使⽤ 3. memset函数的使⽤ 4. memcmp函数的使⽤ 天行健 君子以自强不息一、memcpy的使用和模拟实现 作用: 1. 函数memcpy从source的位置向后复制num个字节的数据到destination指向的内存位置。 2. 这个函数在遇到‘\0’的时…

进程状态及优先级

目录 一、进程状态 二、进程优先级 三、Linux内核进程调度队列 一、进程状态 在一般的教科书中,都会对进程有以下的分类: 至于落实到Linux,进程的状态是什么样子的呢? //这是Linux中对进程状态的描述 /* * The task state arra…

【二十七】【QT开发应用】VS如何复制项目,QT无边窗窗口Pro版本,信号与信号槽的应用,背景图片自适应控件大小

VS复制项目 在使用VS的过程中,有的时候我们需要复制我们已经存在的项目. 我们可以先创建一个新的项目. 接着把需要复制的项目的文件复制粘贴到新的项目文件夹中. 不要忘记添加现有项目. CFrameLessWidgetBase.h #pragma once #include <QWidget> class CFrameLessWi…

系统架构设计师④:计算机网络

系统架构设计师④&#xff1a;计算机网络 TCP/IP协议族 模型如下&#xff1a; 常用的协议及端口号&#xff1a; 各个协议能力介绍&#xff1a; TCP与UDP的对比&#xff1a; DNS协议 DSN&#xff1a;域名系统( Domain Name System) 支持两种查询方式 &#xff1a; ①递…

elasticsearch设置账号和密码

1、es安装&#xff0c;挂载路径根据实际情况修改 docker run -d --restart always \ --name es \ -e "ES_JAVA_OPTS-Xms512m -Xmx512m" \ -e "discovery.typesingle-node" \ -e "TZAsia/Shanghai" \ -v /mnt/data/efk/es/data:/usr/share/elast…

uniapp使用字体图标 ttf svg作为选项图标,还支持变色变图按

在staic目录下有一些ttf文件&#xff0c;如uni.ttf&#xff0c;iconfont.ttf 这些文件中保存这字体svg的源码们&#xff0c;我们也可以在网上找其他的。这些就是我们要显示的突图标的 显示来源。这样不用使用png图标&#xff0c;选中不选中还得用两个图片 我的具体使用如下 &q…

新手教学系列——用 VSCode 实现高效远程开发

随着软件开发环境日益复杂,远程开发已成为许多开发者的日常工作方式。尤其当项目需要直接在服务器上运行或本地计算资源有限时,能够使用一款便捷、强大的工具至关重要。在众多 IDE 中,VSCode 因其轻量、灵活且支持丰富插件,成为远程开发的理想选择。本文将详细介绍如何通过…

PasteForm最佳CRUD实践,实际案例PasteTemplate详解之3000问(三)

作为“贴代码”力推的一个CRUD实践项目PasteTemplate,在对现有的3个项目进行实战后效果非常舒服&#xff01;下面就针对PasteForm为啥我愿称为最佳CRUD做一些回答: 哪里可以下载这个PasteForm的项目案例 目前“贴代码”对外使用PasteForm的项目有"贴Builder(PasteSpide…

[云服务器18] 搭建AIGC APP?AI绘图不神秘!

好的这是我的第18篇blog了&#xff01;开心max&#xff01; 那么&#xff0c;这次我们来做些什么呢……&#xff08;思考中&#xff09; 此时的我拿起了手机&#xff0c;打开了某APP&#xff0c;然后赫然出现的广告&#xff1a; 现在是AI的时代&#xff0c;为什么不来学习AIGC…

《开题报告》基于SSM框架的电影评论网站的设计与实现源码++学习文档+答辩讲解视频

开题报告 研究背景 随着互联网技术的飞速发展&#xff0c;网络已成为人们获取信息、交流思想、分享体验的重要平台。在电影产业蓬勃发展的今天&#xff0c;观众对于电影的选择不再仅仅依赖于传统的宣传渠道&#xff0c;而是更加倾向于通过在线平台了解影片内容、观看预告片、…

Mybatis的基本使用

什么是Mybatis&#xff1f; Mybatis是一个简化JDBC的持久层框架&#xff0c;MyBatis是一个半自动化框架&#xff0c;是因为它在SQL执行过程中只提供了基本的SQL执行功能&#xff0c;而没有像Hibernate那样将所有的ORM操作都自动化了。在MyBatis中&#xff0c;需要手动编写SQL语…

第十三章 集合

一、集合的概念 集合&#xff1a;将若干用途、性质相同或相近的“数据”组合而成的一个整体 Java集合中只能保存引用类型的数据&#xff0c;不能保存基本类型数据 数组的缺点&#xff1a;长度不可变 Java中常用集合&#xff1a; 1.Set(集):集合中的对象不按特定方式排序&a…

工具模块及项目整体模块框架

文章目录 工具模块logger.hpphelper.hppthreadpool.hpp 核心概念核心API交换机类型持久化⽹络通信消息应答持久化数据管理中心模块虚拟机管理模块交换路由模块消费者管理模块信道管理模块连接管理模块Broker服务器模块消费者管理信道请求模块通信连接模块项⽬模块关系图 工具模…

ScrapeGraphAI 大模型增强的网络爬虫

在数据驱动的动态领域&#xff0c;从在线资源中提取有价值的见解至关重要。从市场分析到学术研究&#xff0c;对特定数据的需求推动了对强大的网络抓取工具的需求。 NSDT工具推荐&#xff1a; Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线…

电脑出现msvcp140.dll丢失的解决方法,总结6种解决方法

在计算机使用过程中&#xff0c;我们常常会遇到一些错误提示&#xff0c;其中最常见的就是“msvcp140.dll丢失”的错误。这个错误提示通常出现在运行某个程序时&#xff0c;它意味着计算机无法找到所需的msvcp140.dll文件。那么&#xff0c;msvcp140.dll丢失是怎么回事呢&#…

69 BERT预训练_by《李沐:动手学深度学习v2》pytorch版

系列文章目录 文章目录 系列文章目录NLP里的迁移学习Bert的动机Bert架构对输入的修改五、预训练任务1、2、3、 六、1、2、3、 七、1、2、3、 八、1、2、3、 NLP里的迁移学习 之前是使用预训练好的模型来抽取词、句子的特征&#xff0c;例如 word2vec 或语言模型这种非深度学习…

银河麒麟V10如何关闭定期锁屏功能?

银河麒麟V10如何关闭定期锁屏功能? 1. 打开终端2. 执行命令3. 验证设置 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在银河麒麟高级服务器操作系统V10中&#xff0c;关闭定期锁屏功能很简单。使用场景&#xff1a;比如&#xff0c;当你…

大模型~合集6

我自己的原文哦~ https://blog.51cto.com/whaosoft/11566566 # 深度模型融合&#xff08;LLM/基础模型/联邦学习/微调等&#xff09; 23年9月国防科大、京东和北理工的论文“Deep Model Fusion: A Survey”。 深度模型融合/合并是一种新兴技术&#xff0c;它将多个深度学习模…

.NET CORE程序发布IIS后报错误 500.19

发布IIS后浏览时报错误500.19&#xff0c;同时配置文件web.config的路径中也存在问号“?”。 可能原因&#xff1a;没有安装运行时