Electron之集成vue+vite开发桌面程序

在electron中集成vue开发桌面程序

使用我们之前创建的electron项目

创建vue 项目

命令行进入electron根目录
执行下面命令

npm create vite@latest vue -- --template vue

这样就创建了一个vue项目,文件名是vue,命令行进入vue下,执行下面命令安装依赖包

npm install

然后执行下面命令启动项目

npm run dev

在这里插入图片描述

浏览器打开http://localhost:5173/
在这里插入图片描述

这样一个简单的vue项目就创建好了

配置electron的main.js

修改main.js的代码

win.loadFile('index.html')

改为

win.loadURL('http://localhost:5173/')

这样在运行electron的时候就会加载我们的vue项目
在这里插入图片描述

也可以将vue项目打包,然后修改electron的main.js,这样是加载的打包后的vue入口文件

win.loadFile('vue/dist/index.html')

这样就可以将vue项目集成到electron中了。
这里附上代码下载连接,不需要积分的那种🤓
欢迎大家在评论区留言,相互学习!

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

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

相关文章

【ajax】withCredentials

默认值:false。在获取同域资源时设置 withCredentials 没有影响。 true:在跨域请求时,会携带用户凭证 false:在跨域请求时,不会携带用户凭证;返回的 response 里也会忽略 cookie ajax中的作用 跨域请求时…

常见的 NoSQL 数据库有哪些?

前言 今天我们来介绍一下工作开发中常见的一些NoSQL数据库及其基本特点。欢迎在评论区留下文章中没有介绍且好用的NOSQL数据库🤞。 什么是(NOSQL)非关系型数据库 非关系型数据库又被称为 NoSQL(Not Only SQL ),意为不…

单片机点亮led管(01)

如何开始学习单片机 1:实践第一 2:补充必要的理论知识,缺什么补什么 3:做工程积累经验(可以在网络上收集题目,也可以有自己的想法大胆的实验) 单片机是什么? 单片机&#xff08…

实现mnist手写数字识别

>- **🍨 本文为[🔗365天深度学习训练营](https://mp.weixin.qq.com/s/Nb93582M_5usednAKp_Jtw) 中的学习记录博客** >- **🍖 原作者:[K同学啊 | 接辅导、项目定制](https://mtyjkh.blog.csdn.net/)** >- **🚀…

Linux | vim的入门手册

目录 前言 一、什么是vim 二、vim编辑器的模式 1、插入模式 (1)用vim打开文件 (2)进入插入模式 2、默认模式 (1)光标移动 (2)复制、粘贴与剪切操作 (3&#x…

互联网Java工程师面试题·Java 总结篇·第七弹

目录 68、Java 中如何实现序列化,有什么意义? 69、Java 中有几种类型的流? 70、写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数。 71、如何用 Java 代码列出一个目录下所有的文件&a…

【算法练习Day21】组合剪枝

​📝个人主页:Sherry的成长之路 🏠学习社区:Sherry的成长之路(个人社区) 📖专栏链接:练题 🎯长路漫漫浩浩,万事皆有期待 文章目录 组合剪枝总结: …

Linux系统管理:虚拟机OpenEuler安装

目录 一、理论 1.OpenEuler 二、实验 1.虚拟机OpenEuler安装准备阶段 2.安装OpenEuler 3.进入系统 一、理论 1.OpenEuler (1)简介 欧拉(Euler)是数字基础设施的开源操作系统,可广泛部署于服务器、云计算、边缘…

BookStack 详解及 Docker-Compose 部署

BookStack 是一款用于创建文档和文档管理的开源平台。它提供了一个直观且功能丰富的界面,可用于组织和管理各种文档,包括文档编写、编辑和共享。本文将介绍 BookStack 的核心功能,并展示如何使用 Docker-Compose 快速部署 BookStack。 BookS…

34 机器学习(二):数据准备|knn

文章目录 数据准备数据下载数据切割转换器估计器 kNN正常的流程网格多折交叉训练原理讲解距离度量欧式距离(Euclidean Distance)曼哈顿距离(Manhattan Distance)切比雪夫距离 (Chebyshev Distance)还有一些自定义的距离 就请读者自行研究 再识K-近邻算法API选择n邻居的思辨总结…

c语言内功修炼--深度剖析数据的存储

前言: 我们知道在c语言中的几种基本内置数据类型,分别是: char //字符数据类型 short //短整型 int //整形 long //长整型 long long //更长的整形 float //单精度浮点数 double //双精度浮点数 在…

攻防世界web篇-Training-WWW-Robots

直接点击给出的地址,然后会转到另一个网页界面,在这个界面,已经给出了提示,robots.txt 在浏览器中,直接在地址的后面加上robots.txt,会进到下面这个界面 因为对php语言一窍不通,所以这里纯粹就…

无法访问 github ,解决办法

一、使用代理(首选) 这种办法只需要更改github.com为代理的域名即可,使用方式与GitHub除了域名不同其他都一样,速度挺快,可登陆,可提交。 1、查看当前的代理: git config --global --get htt…

VR、AR、MR、XR到底都是什么?有什么区别

目录 VRARMRXRAR、VR、MR、XR的区别 VR 英:Virtual Reality 中文翻译:虚拟现实 又称计算机模拟现实。是指由计算机生成3D内容,为用户提供视觉、听觉等感官来模拟现实,具有很强的“临场感”和“沉浸感”。我们可以使用耳机、控制器…

动态规划算法(3)--0-1背包、石子合并、数字三角形

目录 一、0-1背包 1、概述 2、暴力枚举法 3、动态规划 二、石子合并问题 1、概述 2、动态规划 3、环形石子怎么办? 三、数字三角形问题 1、概述 2、递归 3、线性规划 四、租用游艇问题 一、0-1背包 1、概述 0-1背包:给定多种物品和一个固定…

采用医疗AI、自然语言处理技术的java智能导诊导医系统源码

一套java智能导诊导医系统源码(演示自主版权商业项目应用) 随着人工智能技术的快速发展,语音识别与自然语言理解技术的成熟应用,基于人工智能的智能导诊导医逐渐出现在患者的生活视角中,智能导诊系统应用到医院就医场景…

Kotlin Compose Multiplatform 跨平台开发实践之加入 iOS 支持

前言 几个月前 Compose Multiplatform 的 iOS 支持就宣布进入了 Alpha 阶段,这意味着它已经具备了一定的可用性。 在它发布 Alpha 的时候,我就第一时间尝鲜,但是只是浅尝辄止,没有做过多的探索,最近恰好有点时间&…

计算机网络-计算机网络体系结构-网络层

目录 一、IPV4 IP数据报格式 *IP 数据报分片 *IPV4地址 分类 网络地址转换(NAT) 二、子网划分与子网掩码 *CIDR *超网 协议 ARP协议 DHCP协议 ICMP协议 三、IPV6 格式 IPV4和IPV6区别 地址表示形式 四、路由选择协议 RIP(路由信息协议) OPSF(开发最短路径优…

SpringBoot整合Caffeine实现缓存

Caffeine Caffeine是一种基于Java的高性能缓存库,它提供了可配置、快速、灵活的缓存实现。Caffeine具有以下特点: 高性能:Caffeine使用了一些优化技术,如基于链表的并发哈希表和无锁算法,以提供卓越的读写性能。容量…

nodejs+vue 学生宿舍管理系统设计与实现

可将教师信息、宿管信息、学生信息、楼栋信息等输入到系统中。只有管理员才能录入相关的资料,按照提示,输入相应的资料,而“导入”则可以通过上传档案,导入成功后,相应的寝室就会相应的减少。在录入大楼的时候&#xf…