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.hqwc.cn/news/140072.html

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

相关文章

算水质TDS加温度补偿

先上图,就图里这款水质检测,用树莓派3/4的话,要配个温度检测作为温度校正,以及一个adc 元器件。我选ds18b20和ads1115。 再把模拟数据计算过程放一下: 温度检测元器件在农历钟那里提过,就是同款。此处先测个…

GO 语言的函数??

函数是什么? 学过编程的 xdm 对于函数自然不会陌生,那么函数是什么呢? 函数是一段可以重用的代码块,可以被多次调用,我们可以通过使用函数,提高咱们代码代码的模块化,提高程序的可读性和可维护…

基于nodejs+vue学生论坛设计与实现

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性:…

5.12.webrtc接口调用过程

嗨,大家好,我是李超,在上节课中呢,我向你介绍了外接口的设计以及我们红接口展开之后的样子,对吧?那今天呢?我们再来看看整个接口调用过程。那整个这个调用过程啊,非常的复杂&#xf…

【Machine Learning】01-Supervised learning

01-Supervised learning 1. 机器学习入门1.1 What is Machine Learning?1.2 Supervised learning1.3 Unsupervised learning 2. Supervised learning2.1 单元线性回归模型2.1.1 Linear Regression Model(线性回归模型)2.1.2 Cost Function(代…

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

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

为什么高精度机器人普遍使用谐波减速器而不是普通减速器?

机器人作为一种能够代替人类完成各种工作的智能设备,已经广泛应用于工业生产、医疗卫生、军事防卫等领域。其中,机器人的关节传动系统是机器人运动的核心,而减速器作为关节传动系统中的重要组成部分部分,对机器人的性能和技术水平…

Google Authenticator 和gitlab使用的方法配置Google AuthenticatorGoogle

Google Authenticator 和gitlab使用的方法 目录概述需求: 设计思路实现思路分析1.配置过程: 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy,skip hardness,make a bette…

ffmpeg+安卓+yolo+RK3399部署

一次满足多项需求. 首先, 思路是, 使用ffmpeg解码本地mp4文件, 在无需任何其他改动的情况下, 就可以直接播放rtsp流, 这个是使用ffmpeg的好处. ffmpeg本身是c语言的, 所以需要编译成jni的库, https://note.youdao.com/s/6XeYftc 具体过程在这里, 用windows/macOS, Ubuntu应该都…

【网络爬虫】2 初探网络爬虫

爬虫练手 把豆瓣的书评list页爬取下来,并获取其书名,和detail的连接地址 豆瓣的书评list的url地址, start1,2,3,4…是其地址页 https://book.douban.com/top250?start1 f12 观察其html结构 思路 按照找到的list的页面地址: 1.获取list页…

Qt 窗口常用位置API函数 绘图原理 双缓冲机制 总结

一、Qt 窗口API函数基础知识 在Qt窗口编程中,常用的API函数有: QWidget类的API函数:包括setWindowTitle()、resize()、move()、show()、hide()、setFixedSize()、setWindowFlags()等。 QMainWindow类的API函数:包括setCentralWi…

网页构造与源代码

下载google浏览器 设置打开特定网址:www.baidu.com 查看网页或元素源代码 网页右键选择“检查”查看源代码 网页源代码 元素源代码