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.mzph.cn/news/110056.shtml

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

相关文章

Camera BSP之GPIO/I2C/PMIC简介

和你一起终身学习,这里是程序员Android 经典好文推荐,通过阅读本文,您将收获以下知识点: 一、GPIO介绍二、IC 总线概括三、PMIC 概括四、思考 一、GPIO介绍 GPIO:General Purpose Input Output (通用输入/输出&#xf…

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

目录 72、用 Java 的套接字编程实现一个多线程的回显(echo)服务器。 73、XML 文档定义有几种形式?它们之间有何本质区别?解析XML 文档有哪几种方式? 74、你在项目中哪些地方用到了 XML? 72、用 Java 的套…

为网站配置SSL

HTTPS (全称:Hyper Text Transfer Protocol over SecureSocket Layer),是以安全为目标的 HTTP 通道,在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性。HTTPS 在HTTP 的基础下加入SSL 层,HTTPS…

【AI视野·今日Robot 机器人论文速览 第五十五期】Mon, 16 Oct 2023

AI视野今日CS.Robotics 机器人学论文速览 Mon, 16 Oct 2023 Totally 27 papers 👉上期速览✈更多精彩请移步主页 Interesting: 📚***AcTExplore, 对于未知物体的主动触觉感知。基于强化学习自动探索物体的表面形貌,增量式重建。(from 马里兰…

uni-app通过 vuedraggable 创建上下拖动排序组件

我们右键项目 选择 使用命令行窗口打开所在目录 然后 在终端中输入 npm install vuedraggable --save导入 vuedraggable 然后组件编写代码如下 <template><view class"container"><draggable v-model"list" :options"dragOptions&…

ios设备管理软件iMazing 2.17.11官方中文版新增功能介绍

iMazing 2.17.11官方中文版(ios设备管理软件)是一款管理苹果设备的软件&#xff0c; Windows 平台上的一款帮助用户管理 IOS 手机的应用程序&#xff0c;软件功能非常强大&#xff0c;界面简洁明晰、操作方便快捷&#xff0c;设计得非常人性化。iMazing官方版与苹果设备连接后&…

Chrome 115之后的版本,安装和使用chromedriver

在Python中使用selenium 时报如下错误&#xff1a; 1. 老版本chrome对应的chromedriver 下载地址&#xff1a;CNPM Binaries Mirror 2. 新版本chrome对应的chromedriver 下载地址&#xff1a;Chrome for Testing availability

sd卡的坏块管理与负载均衡

坏块管理 坏块是指在存储介质中出现物理损坏或不可靠的数据块。由于SD卡使用的是闪存技术&#xff0c;它也面临着坏块的问题。 SD卡通过实现坏块管理机制来处理坏块。具体的坏块管理方法可能因制造商和产品型号而有所不同&#xff0c;但通常会采取以下策略&#xff1a; 坏块标…

Python 网络爬虫

爬虫原理 计算机一次Request请求和服务器端的Response回应&#xff0c;即实现了网络连接。 爬虫需要做两件事&#xff1a;模拟计算机对服务器发起Request请求。 接受服务器的Response内容并解析、提取所需的信息。 多页面爬虫流程 ​​​​​​​多页面网页爬虫流程

PLC 学习day02 硬件输入/输入的知识

1.资料来源 1.链接&#xff1a;三菱PLC视频教程全集之FX3U基本单元输入接线_哔哩哔哩_bilibili 2. 链接&#xff1a; 三菱plc视频教程全集之FX3U基本单元输出接线_哔哩哔哩_bilibili 2. PLC 的输入部分器件连接。 2.1 PLC输入部分的硬件知识 1. 一般输入部分是PLC获取信息的地…

WhatsApp 私域营销指南

当涉及到WhatsApp私域营销时&#xff0c;企业正逐渐意识到这个强大工具的潜力&#xff0c;为建立与用户之间更紧密的关系、提供个性化的服务和推广&#xff0c;以及增加用户忠诚度&#xff0c; WhatsApp已成为一个不可或缺的营销渠道。在如今竞争激烈的市场中&#xff0c;私域营…

基于SSM的仓库管理系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

【SpringCloud微服务项目实战-mall4cloud项目(4)】——mall4cloud-rbac

mall4cloud-rbac角色权限访问控制模块 系统架构与模块介绍系统架构rbac模型介绍 相关代码权限校验接口代码 补充 代码地址 github地址 fork自github原始项目 gitee地址 fork自gitee原始项目 系统架构与模块介绍 系统架构 从图中可以看到&#xff0c;微服务集群中&#xff0c;…

03 里氏替换原则

官方定义&#xff1a; 里氏替换原则&#xff08;Liskov Substitution Principle&#xff0c;LSP&#xff09;是由麻省理工学院计算机科学系教授芭芭拉利斯科夫于 1987 年在“面向对象技术的高峰会议”&#xff08;OOPSLA&#xff09;上发表的一篇论文《数据抽象和层次》&#…

『Linux升级路』基本指令

&#x1f525;博客主页&#xff1a;小王又困了 &#x1f4da;系列专栏&#xff1a;Linux &#x1f31f;人之为学&#xff0c;不日近则日退 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、认识操作系统 &#x1f4d2;1.1什么是操作系统 &#x1f4d2;1.2操作系统…

如何处理前端路由懒加载?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

js实现红包雨功能(canvas,react,ts),包括图片不规则旋转、大小、转速、掉落速度控制、屏幕最大红包数量控制等功能

介绍 本文功能由canvas实现红包雨功能&#xff08;index.tsx&#xff09;本文为react的ts版。如有其他版本需求可评论区观赏地址&#xff0c;需过墙 import React, { Component } from react; // import ./index.css; import moneyx from /assets/images/RedEnvelopeRain/bal…

算水质TDS加温度补偿

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

Android11 移植memtester压测内存

需求如题&#xff0c;从网上下载了memtest源码压缩包&#xff0c;准备放到系统源码编译&#xff0c;然后push到板子上执行&#xff0c;结果&#xff0c;编译出来一堆问题&#xff0c;报build err。 做如下代码改动&#xff1a; external/memtester-4.5.1/Android.mk | 16 exte…

机器学习基础之《回归与聚类算法(4)—逻辑回归与二分类(分类算法)》

一、什么是逻辑回归 1、逻辑回归&#xff08;Logistic Regression&#xff09;是机器学习中的一种分类模型&#xff0c;逻辑回归是一种分类算法&#xff0c;虽然名字中带有回归&#xff0c;但是它与回归之间有一定的联系。由于算法的简单和高效&#xff0c;在实际中应用非常广…