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,一经查实,立即删除!

相关文章

css 文字溢出问题

文字溢出处理方案 : 1首先 , 强制文本在一行中显示 ; white-space: nowrap; 2然后 , 隐藏文本的超出部分 ; overflow: hidden; 3最后 , 使用省略号代替文本超出部分 ; text-overflow: ellipsis; white-space 样式 用于设置 文本显示方式 : 默认方式 : 显示多行 ; white-s…

了解Qt QScreen的geometry ,size

目的 了解qt 对于屏幕的size, geometry含义, 更能有效实现最大化, 向下还原逻辑操作 Test 目前我有两个屏 ,1920x1080, 3840*2160. 检测当前程序所在screen(1920x1080)下属性 int screenNum…

算法课作业2 OJ for Divide and Conquer

https://vjudge.net/contest/581947 A - Ultra-QuickSort 题意 每次给n个无序的数,互不重复,问最少需要多少次必要的交换操作使n个数有序。 思路 看一眼想到逆序数,然后验证了逆序数的个数符合样例,但想了一个3 2 1的话实际上…

Camera BSP之GPIO/I2C/PMIC简介

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

有序性

在多线程编程中,有序性是指程序执行的顺序和操作的期望顺序一致。在多线程环境下,由于线程的并发执行,可能会导致操作的执行顺序与程序代码中编写的顺序不一致,从而引入了并发问题。 有序性问题通常涉及到以下两个方面: 指令重排序:现代处理器通常会对指令进行重排序以提…

Java数据结构之第二十章、手撕平衡AVL树

目录 一、二叉平衡树 1.1二叉搜索树回顾以及性能分析 1.1.1二叉搜索树的概念 1.2二叉搜索树的查找 1.3二叉树查询性能分析 二、AVL树 2.1AVL树的概念 2.2AVL树节点的定义 2.3AVL树的插入 2.4AVL树的旋转 2.4.1新节点插入较高左子树的左侧---右单旋 2.4.2新节点插入较…

互联网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官方版与苹果设备连接后&…

AI在日常生活中有哪些应用?

AI在日常生活中有很多应用&#xff0c;以下是其中一些常见的应用&#xff1a; 智能助手&#xff1a;AI助手已经成为日常生活中不可或缺的一部分&#xff0c;如Siri、小度等&#xff0c;它们可以为我们提供日常提醒、天气预报、智能家居控制、行程安排等功能。智能家居&#xf…

Ajax技术实现前端开发

一、原生AJAX 1.1AJAX 简介 AJAX 全称为Asynchronous JavaScript And XML,就是异步的JS 和XML。 通过AJAX 可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据。 AJAX 不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式。 1.2XML 简介 XML 可扩…

使用transformers过程中出现的bug

1. The following model_kwargs are not used by the model: [encoder_hidden_states, encoder_attention_mask] (note: typos in the generate arguments will also show up in this list) 使用text_decoder就出现上述错误&#xff0c;这是由于transformers版本不兼容导致的 …

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内容并解析、提取所需的信息。 多页面爬虫流程 ​​​​​​​多页面网页爬虫流程

设计模式的学习顺序

设计模式的学习顺序可以按照以下步骤进行&#xff1a; 掌握基础知识&#xff1a;先确保你对编程语言和软件开发的基本概念有深入的理解&#xff0c;包括面向对象编程、继承、多态等。学习常用设计模式&#xff1a;首先学习并理解一些常用的设计模式&#xff0c;例如单例模式、…

(Python) Python语音处理工具包AudioSegment的基本使用

1. AudioSegment库的使用 from pydub import AudioSegment # 可以看到读取文件有很多方式 # 有直接from_file(),也有from_mp3()、from_wav() # 下面的两个读取语句是等价的&#xff1a; soundAudioSegment.from_file("aaa.mp3","mp3") soundAudioSegment…

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

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