当前位置: 首页 > news >正文

快速搭建Electron+Vite3+Vue3+TypeScript5脚手架 (无需梯子,快速安装Electron)

一、介绍 😆 😁 😉

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验(这段话是来自官网)。

二、搭建Vite+Vue3+TypeScript项目 😆 😁 😉

根据vite官网文档

yarn create vite

项目创建完成后进入ts-super-procedure目录,执行yarn安装相关依赖

三、安装Electron相关依赖 😆 😁 😉

如果你自己安装过Electron的相关依赖,想必你一定经历过失败、失败、失败。

这里需要借助一个网站检测服务器响应速度,然后拿到最快响应的ip进行本地配置加快我们的域名解析。

通过该工具可以多个地点Ping服务器以检测服务器响应速度。检查github.com。我都选择国内的,看自己想法选择啊。

修改 C:\Windows\System32\drivers\etc\hosts

20.27.177.113 github.com

安装electron依赖 👇 👇 👇 👇

yarn add -D electron electron-builder

根据官网提供的文档,需要创建一个BrowserWindow装载vite项目,你也可以写一个html页面。 这里我们启动vite项目以后就会产生一个连接,正好把它装载到 BrowserWindow中。

因为src下面存放的使我们的vite项目,所以在根目录下创建一个electron.ts,你也可以叫man.ts,名字随便起,知道是干啥的就行。

配置完成以后分别启动yarn dev 和 yarn start,出现以下窗口表示搭建成功了。

四、优化 😆 😁 😉

因为现在需要启动两个服务,比较麻烦,可以借助concurrently插件整合。一个命令完成多个应用的启动。

yarn add concurrently -D

安装完成以后修改启动和打包命令 

"scripts": {"dev": "concurrently \"vite\" \"electron .\"","build": "yarn build:vite && yarn build:electron","build:vite": "vue-tsc && vite build","build:electron": "electron-builder","preview": "vite preview"
},

执行yarn dev 进行检测,出现下面的内容表示配置成功,基础脚手架就已经搭建完成了。下面开启你的桌面应用开发旅程吧。我要过五一去了

我是Etc.End。如果文章对你有所帮助,能否帮我点个免费的赞和收藏😍。

 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇

相关文章:

快速搭建Electron+Vite3+Vue3+TypeScript5脚手架 (无需梯子,快速安装Electron)

一、介绍 😆 😁 😉 Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需…...

语义分割学习笔记(二)转置卷积

目录 1.转置卷积Transposed Convolution概念 2.转置卷积操作步骤 3.转置卷积参数 4.实战案例 推荐课程:转置卷积(transposed convolution)_哔哩哔哩_bilibili 感谢霹雳吧啦Wz,真乃神人也。 1.转置卷积Transposed Convolutio…...

docker运行PostgreSQL数据库维护,执行脚本备份数据库与更新表结构

文章目录 PostgreSQL简介业务场景数据库维护docker-compose配置备份脚本更新表结构脚本 PostgreSQL简介 PostgreSQL是一种开源的关系型数据库管理系统,它是一个功能强大、高度可定制化和支持复杂应用的数据库。它支持广泛的数据类型,包括数值、文字、二…...

【计算机网络】127.0.0.1、0.0.0.0、localhost地址是什么?

目录 0.0.0.0是什么?127.0.0.1是什么?用途 localhost是什么?总结 0.0.0.0是什么? IPV4中,0.0.0.0地址被用于表示一个无效的,未知的或者不可用的目标。 在服务器中,0.0.0.0指的是本机上的所有I…...

分享2款CSS3母亲节主题寄语文字动画特效

目录 ❤️ 前言 第一款:妈妈您辛苦了! 一、效果图 二、代码实现 第二款:Mothers Day! 一、效果图 二、代码实现 ❤️ 祝福 ❤️ 前言 母亲节,在每年五月的第二个星期日,是用来感谢母亲的节日。…...

【AutoGPT】AutoGPT出现,是否意味着ChatGPT已被淘汰

Yan-英杰的主页 悟已往之不谏 知来者之可追 C程序员,2024届电子信息研究生 目录 前言 什么是ChatGPT? 什么是AutoGPT? AutoGPT与ChatGPT的区别 AutoGPT的优势和劣势 优势 劣势 ChatGPT是否会被淘汰? 前言 近年来&#x…...

( 字符串) 9. 回文数 ——【Leetcode每日一题】

❓9. 回文数 难度:简单 给你一个整数 x ,如果 x 是一个回文整数,返回 true ;否则,返回 false 。 回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数。 例如…...

SpringAOP

SpringAOP 一、AOP1. AOP简介1.1 AOP简介和作用1.2 AOP中的核心概念 2. AOP入门案例【重点】2.1 AOP入门案例思路分析2.2 AOP入门案例实现【第一步】导入aop相关坐标【第二步】定义dao接口与实现类【第三步】定义通知类,制作通知方法【第四步】定义切入点表达式、配…...

学系统集成项目管理工程师(中项)系列15_质量管理

1. 质量(Quality)的定义 1.1. 反应实体满足主体明确和隐含需求的能力的特性总和 1.2. 明确需求是指在标准、规范、图样、技术要求、合同和其他文件中用户明确提出的要求与需要 1.3. 隐含需求是指用户和社会通过市场调研对实体的期望以及公认的、不必明…...

统计学习方法第四章——朴素贝叶斯法

x.1 前言 朴素贝叶斯法是基于贝叶斯定理与特征条件独立假设的分类方法。是通过给定training dataset学习联合概率分布的方法,是一种生成方法。 x.2 使用贝叶斯定理做分类 使用贝叶斯定理做分类,相比较于朴素贝叶斯即丢除特征条件独立假设这个条件。 …...

安装配置goaccess实现可视化并实时监控nginx的访问日志

一、业务需求 我们安装了nginx后,需要对nginx的访问情况进行监控(希望能够实时查看到访问nginx的情况),如下图所示: 二、goaccess的安装配置步骤 2.1、准备内容 需要先安装配置nginx或OpenResty - 安装 Linux环境对Nginx开源版源码下载、编译、安装、开机自启https://b…...

springboot第14集:MyBatis-CRUD讲解

注意点:增、删、改操作需要提交事务! 为了规范操作,在SQL的配置文件中,我们尽量将Parameter参数和resultType都写上! 编写Mapper接口类 import com.da.pojo.User; import java.util.List; public interface UserMapper…...

ES6新特性(1)

目录 一、字符串扩展 (1)字符串遍历器接口(for...of...) (2)模板字符串 二、字符串新增方法 (1)包含方法 (2)重复方法 (3)补全方…...

这就是二分查找?(C语言版)

大家好!我又来了,哈哈~今天我要和大家分享一种神奇的算法——二分查找!你可能会问,“二分查找有什么好玩的?”但在我看来它就像一场魔法表演,当你输入一个数,他会在一堆数中快速找到它的位置。找…...

操作系统之内存管理

连续分配 一、单一连续 直接为要运行的进程分配一个内存,只适合单任务,只能用于单对象、单任务,内存被分配为系统区和用户区,系统区在低地址,用户区是一个用户独享 二、等分分区 由于分配一个内存只能执行单任务&a…...

【Python | matplotlib】matplotlib.cm的理解以及举例说明

文章目录 一、模块介绍二、颜色举例 一、模块介绍 matplotlib.cm是Matplotlib中的一个模块,它提供了一组用于处理颜色映射(colormap)的函数和类。颜色映射是一种将数值映射到颜色的方法,常用于制作热力图、等值线图、散点图等。 …...

数据库单实例升级

一、单实例环境,全时长二个半钟多。详细图文说明到这下载 1、停止所有oracle相关进程。 Emctlstop dbconsole Isqlplusctl stop Lsnrctl stop sqlplus /nolog sql>conn /as sysdba Connectedtoanidleinstance. sql>shutdown 然后,冷备份下数据库cp…...

Photoshop如何使用选区之实例演示?

文章目录 0.引言1.利用快速选择工具抠图2.制作网店产品优惠券3.利用选区改变眼睛颜色4.抠取复杂的花束5.制作丁达尔光照效果6.利用选区调整图像局部颜色 0.引言 因科研等多场景需要进行绘图处理,笔者对PS进行了学习,本文通过《Photoshop2021入门教程》及…...

ThreadLocal的使用介绍和底层原理解析和开源框架的使用实例

文章目录 ThreadLocal的使用介绍和底层原理解析和开源框架的使用实例ThreadLocal简介ThreadLocal使用示例ThreadLocal原理解析Spring中ThreadLocal的应用小结ThreadLocal的使用步骤常见面试题案例解析(框架源码经典案例)案例实战 ThreadLocal的使用介绍和底层原理解析和开源框架…...

带你学c带你飞-P7取值范围

比特位 CPU能读懂的最小单元——比特位,bit,b 字节 内存机构的最小寻址单元——字节,Byte,B 1Byte8bit 进制 怎么算 注意:int默认是signed类型,signed类型第一位是符号位 符号位 存放signed类型的存…...

ramfs, rootfsinitramfs

什么是ramfs? ramfs是一个非常简单的文件系统,它将Linux的磁盘缓存机制(页面缓存和dentry缓存)导出为一个动态可调整大小的基于ram的文件系统。 Linux通常将所有文件缓存在内存中。从后备存储(通常是挂载文件系统的块设备)读取的数据页被保留下来,以防…...

十三届蓝桥杯研究生组国赛-最大公约数(线段树+二分)

十三届蓝桥杯研究生组国赛-最大公约数 1、问题描述2、解题思路2.1 解法一:暴力查询区间gcd(75%)2.2 解法二:线段树+二分法(AC)1、问题描述 问题描述 给定一个数组, 每次操作可以选择数组中任意两个相邻的元素 x , y x,y x,y...

数据结构——二叉树层序遍历

数据结构——二叉树层序遍历 107. 二叉树的层序遍历 II199. 二叉树的右视图思路: 637. 二叉树的层平均值 107. 二叉树的层序遍历 II 107. 二叉树的层序遍历 II 给你二叉树的根节点 root ,返回其节点值 自底向上的层序遍历 。 (即按从叶子节…...

【微机原理】8088/8086微处理器

目录 一、8088/8086的功能结构 1.总线接口部件(BIU) 2.执行部件(EU) 二、8088/8086的寄存器结构(14个) 溢出标志的概念 溢出和进位的区别 8086CPU是Intel系列的16位微处理器,他有16根数据…...

springboot第12集:DAO功能代码

在Spring Boot中,DAO是数据访问对象的缩写,它是一种设计模式用于提供对数据库操作的抽象层。通过使用DAO模式,我们可以将数据操作与业务逻辑分离,并提供一个单独的接口来执行所有的数据库操作。 在Spring Boot中,通常使…...

基于KZG多项式承诺方案的RLN

1. 引言 RLN——Rate-Limiting Nullifier为PSE团队主导的项目,源自: Barry White Hat 2019年博客 Semaphore RLN, rate limiting nullifier for spam prevention in anonymous p2p setting RLN(Rate-Limiting Nullifier)是一种…...

《站在巨人的肩膀上学习Java》

Java从诞生距今已经有28年了,在这段时间里,随着Java版本的不断迭代,Java新特性的不断出现,使得Java被使用的越来越广泛。在工程界Java语言一直是大家最喜欢的语言之一,Java一直排行在编程语言热门程度的前3名。 可想而…...

敏捷ACP.敏捷估计与规划.Mike Cohn.

第一部分 传统规划失败的原因 vs 敏捷规划有效的原因 传统的项目规划方式往往会让我们失望。要回答-一个 新产品的范围/进度/资源的组合问题,传统规划过程不一定会产生令人非常满意的答案和最终产品。以下- -些论据可以支持这个结论: ●大约2/3的项目会显著超…...

[创新工具和方法论]-01- DOE课程基础知识

文章目录 1.DOE实验设计的介绍1.1 什么是实验设计DOE?1.2 DOE的优势有哪些?1.3 如何开展DoE研究?步骤 2.DOE实验培训3.数据分析步骤4.实验的随机化5.偏差6.R方 相关系数假设检验 7.三因子二水平全因子设计 1.DOE实验设计的介绍 实验设计是一种安排实验和分析实验数…...

LeetCode-1033. 移动石子直到连续

题目链接 LeetCode-1033. 移动石子直到连续 题目描述 题解 题解一(Java) 作者:仲景 这题目挺难懂的,得画画图才能更好的理解 这也是LeetCode的尿性,习惯了,非得整这种别人看不懂的鸟语 你可以这样理解&a…...

优秀的网站建设公司排名/搞一个公司网站得多少钱

服务器端为简体系统。但客户端为繁体操作系统的时候就出问题了。在脚本里这样写,在简体的系统下可以正常,但在客户端为繁体的时候,取到的action的值就不行了(乱码)。不知道为什么?window.open("test.a…...

天猫网站做真丝服装批发/海南网站制作公司

在计算机系统中,通过文件的名称对信息进行管理,计算机的文件管理系统使信息按名称存取成为可能。典型的文件名由主文件名 ( 简称文件名 ) 和文件扩展名 ( 类型名 ) 组成,在文件名和文件扩展名之间加一个点(1)DOS 操作系统中文件的命名规则早期…...

浙江建站优化品牌/青岛网站推广公司排名

1、ARRAY_SIZE 用来判断一个数组的 size,若传入的参数不是一个数组,编译将会报错。 使用此宏来安全的获取一个数组的 size。 include/linux/kernel.h#define ARRAY_SIZE(arr) (sizeof(arr) / sizeof((arr)[0]) __must_be_array(arr))2、__must_be_arr…...

网站制作什么做/搜索引擎优化方法有哪些

Transactional(readOnly false, rollbackFor BusinessException.class) 设置下这个注解,处理下事务即可。...

家电网站设计/百度服务热线电话

今天使用IntelliJ IDEA构建Maven聚合项目时,在子项目的pom文件中正确导入了资源后,在代码中却无法引用 下图为父项目的pom 下图为子项目的pom 下图为项目中引用 下图为Maven管理窗口 图示看出资源时正确的导入的,但是在代码使用却不行&a…...

孝感个人网站建设/优化网络的软件下载

Flask-SQLAlchemy库让flask更方便的使用SQLALchemy,是一个强大的关系形数据库框架,既可以使用orm方式操作数据库,也可以使用原始的SQL命令. Flask-Migrate 是一个数据迁移框架,需要通过Flask-script库来操作. 一.配置Flask-SQLAlchemy 程序使用的数据库地址需要配置在SQLALCHEM…...