Electron实战(一):环境搭建/Hello World/打包exe
文章目录
- Electron
- 安装Node.js
- NodeJs推荐配置
- 开始Electron项目
- 创建index.js文件
- 创建src目录
- 运行
- 打包生成exe
- 生成安装包
- 踩坑
- 下一篇
- Electron实战(二):将Node.js和UI能力(app/BrowserWindow/dialog)等注入html
Electron
Electron是一个使用JavaScript, HTML, CSS开发跨平台桌面应用程序的框架。
Electron整合Chromium浏览器(跨平台界面容器)和Node.js(跨平台系统能力),实现了一个使用JavaScript的全栈开发环境,逐渐成为开发跨平台桌面应用程序的有力竞争者。
2023年7月3日,腾讯正式上线 Windows QQ v9.9.0 体验版本。该版本基于 Electron 重构,实现了 Linux、macOS、Windows 三端架构统一。三个平台一套代码,多端运行,同步更新。三个平台的版本在外观、操作和性能上一致。
官方文档:https://www.electronjs.org/docs/latest/
安装Node.js
官网下载安装最新版NodeJs:
https://nodejs.org/en
安装到D:/env/nodejs/目录底下,安装成功后查看版本:
C:\Users\admin>node -v
v20.10.0C:\Users\admin>npm -v
10.2.3
NodeJs推荐配置
配置npm安装的全局模块的位置,以及缓存目录cache的位置。
如果不配置,后续执行
npm install xxx -g(g代表global全局安装的意思)安装语句时,会将安装的模块安装到C:\Users\用户名\AppData\Roaming\npm路径中,占用C盘空间。
可以在node安目录(比如D:\env\nodejs),下创建node_global目录和node_cache目录,然后执行命令:
npm config set prefix "D:\env\nodejs\node_global"
npm config set cache "D:\env\nodejs\node_cache"
npm config list #查看配置信息
检查设置是否成功:
C:\Users\admin>npm config get prefix
D:\env\nodejs\node_global
C:\Users\admin>npm config get cache
D:\env\nodejs\node_cache
开始Electron项目
创建项目目录,项目目录底下执行npm init,然后安装Electron。
# 进入新建的项目目录
cd D:\dev\web\work\LuckyTools
# 初始化npm项目
npm init
# 项目底下安装electron
npm install electron -S
package.json中记录了安装electron的版本:
"dependencies": {"electron": "^27.1.3"
}
npm安装命令的常用参数比较:
npm install xxx(简写:npm i xxx) 本地安装xxx包,但不将安装包的信息写入package.json(不推荐)
-–global/-g 全局安装,安装后可直接(全局)使用相应包里面提供的命令
–-save/-s/-S 本地安装,安装版本写入package.json的dependencies
–-save-dev/-d/-D 本地安装,安装版本写入package.json的devDependencies
创建index.js文件
项目目录底下创建index.js作为项目的入口文件,文件内容:
//app 模块,控制整个应用程序的生命周期和事件处理
//BrowserWindow 模块,它创建和管理程序的窗口。
const { app, BrowserWindow } = require('electron')
const path = require('path')const iconPath = path.join(__dirname, './src/res/icon.ico')
//在 Electron 中,只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口
app.on('ready', () => {//创建一个窗口const mainWindow = new BrowserWindow({icon: iconPath,});mainWindow.setMenu(null);//禁用默认的菜单栏//窗口加载html文件mainWindow.loadFile('./src/index.html')
})
创建src目录
里面存放前端页面,比如index.html。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><link rel="stylesheet" href="css/xxx.css"/><style></style>
</head>
<body><div>Hello World</div><script src="js/xxx.js"></script><script></script>
</body>
</html>
编辑package.json,scripts属性下,增加start命令:
// package.json
"scripts": {"start": "electron .",
}
运行
npm start

打包生成exe
安装electron-packager后,可打包生成Windows可执行文件exe。
npm install electron-packager -g
添加打包package命令:
"scripts": {"start": "electron .","package":"electron-packager . needle-server --platform=win32 --arch=x64 --out=./out --asar --app-version=1.0.0 --overwrite --ignore=node_modules"},
执行打包命令:
PS D:\dev\web\work\LuckyTools> npm run package> lucky_tools@1.0.0 package
> electron-packager . needle-server --platform=win32 --arch=x64 --out=./out --asar --app-version=1.0.0 --overwrite --ignore=node_modulesPackaging app for platform win32 x64 using electron v27.1.3
Wrote new app to: out\needle-server-win32-x64
生成安装包
可以使用electron-builder,由于没有实际测试,略过。
npm i electron-builder --D
踩坑
笔者安装的版本:
"devDependencies": {"electron-builder": "^24.9.1","electron-packger": "^24.9.1"}
由于electron-packager依赖较新的node版本。只好重装了node最新版本。但安装后发现npm不能用了,npm -v 报错:
D:\env\nodejs\node_modules\npm\lib\es6\validate-engines.js:31throw err^TypeError: Class extends value undefined is not a constructor or nullat Object.<anonymous> (D:\env\nodejs\node_modules\npm\node_modules\fs-minipass\lib\index.js:136:4)at Module._compile (node:internal/modules/cjs/loader:1376:14)at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)at Module.load (node:internal/modules/cjs/loader:1207:32)at Module._load (node:internal/modules/cjs/loader:1023:12)at Module.require (node:internal/modules/cjs/loader:1235:19)at require (node:internal/modules/helpers:176:18)at Object.<anonymous> (D:\env\nodejs\node_modules\npm\node_modules\cacache\lib\content\read.js:4:13)at Module._compile (node:internal/modules/cjs/loader:1376:14)at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)Node.js v20.10.0
无奈,遇到版本不兼容了!!
只好先卸载nodejs,删除nodejs/node_modules/npm整个目录,然后重新安装最新版的nodejs。
下一篇
Electron实战(二):将Node.js和UI能力(app/BrowserWindow/dialog)等注入html
相关文章:
Electron实战(一):环境搭建/Hello World/打包exe
文章目录 Electron安装Node.jsNodeJs推荐配置开始Electron项目创建index.js文件创建src目录运行打包生成exe生成安装包踩坑 下一篇Electron实战(二):将Node.js和UI能力(app/BrowserWindow/dialog)等注入html Electron Electron是一个使用JavaScript, HT…...
【C++】运算符重载详解
💗个人主页💗 ⭐个人专栏——C学习⭐ 💫点击关注🤩一起学习C语言💯💫 目录 导读 1. 为什么需要运算符重载 2. 运算符重载概念 3. 运算符重载示例 3.1 运算符重载 3.2 >或<运算符 4. 运算符重…...
评论区功能的简单实现思路
评论区功能是社交类项目中的核心组成部分,它涉及到前端的交云和后端的数据处理。基于你的技术栈(前端 Vue3,后端 Java),下面是一个具体的实现思路和数据库设计建议,并探索一下知乎的评论系统。 数据库设计…...
Java自救手册
目录 访问地址 访问地址,发现不通,无法访问: 网络不通一般有两种情况: Maven 拿Maven 拿到Maven以后 Maven单独的报红 Git git注意: 目录 访问地址 访问地址,发现不通,无法访问&…...
ASM-HEMT参数提取和模型验证测试
参数提取程序 直流I-V参数提取 DC模型参数提取流程对于ASM-GaN-HEMT模型可以总结在下图中。 以下步骤描述了该流程: 在模型中设置物理参数,如L(沟道长度)、W(沟道宽度)、NF(栅指数…...
浅压缩、深压缩、双引擎、计算机屏幕编码……何去何从?
专业视听领域尤其显示控制和坐席控制领域,最近几年最激动人心的技术,莫过于分布式了。 分布式从推出之日就备受关注:担心稳定性的,质疑同步性能的,怀疑画面质量的…… 诚然,我们在此前见多了带着马赛克的…...
2020年通信工程师初级专业实务真题
文章目录 一、第1章 现代通信网概述:信令网、同步网、管理网。第10章 通信业务:通信产业链,通信终端的分类,通信业务的定义及分类二、第3章 接入网:无线接入网的优点,接入网的接口(UNIÿ…...
Linux常见面试题汇总
Linux上如何查询某个端口是否被占用? 在Linux上,你可以使用以下几种方法来查询某个端口是否被占用: 使用netstat命令: netstat -tuln | grep <端口号>这个命令会列出当前正在运行的所有TCP和UDP端口,并过滤出指…...
C语言小游戏:贪吃蛇(游戏开发的环境和功能介绍)
❀❀❀ 文章由不准备秃的大伟原创 ❀❀❀ ♪♪♪ 若有转载,请联系博主哦~ ♪♪♪ ❤❤❤ 致力学好编程的宝藏博主,代码兴国!❤❤❤ 生命不停,学习不止。铁汁们,我是大伟,欢迎来到大伟的游戏时间,…...
ElementUI Form:InputNumber 计数器
ElementUI安装与使用指南 InputNumber 计数器 点击下载learnelementuispringboot项目源码 效果图 el-radio.vue (InputNumber 计数器)页面效果图 项目里el-input-number.vue代码 <script> export default {name: el_input_number,data() {re…...
apk反编译修改教程系列---修改apk的默认颜色 布局颜色 手机电脑同步演示【十】
往期教程: apk反编译修改教程系列-----修改apk应用名称 任意修改名称 签名【一】 apk反编译修改教程系列-----任意修改apk版本号 版本名 防止自动更新【二】 apk反编译修改教程系列-----修改apk中的图片 任意更换apk桌面图片【三】 apk反编译修改教程系列---简单…...
响应式开发如何设置断点,小屏幕界面该如何显示(有动图)
Hi,我是贝格前端工场,本期分享响应式开发,如何设置屏幕断点,pc页面布局到了移动端之后该如何布局的问题,微软也提供了设置屏幕断点的动图演示,非常直观。 一、什么是响应式开发,为何要设置屏幕断…...
Java基础 集合(二)List详解
目录 简介 数组与集合的区别如下: 介绍 AbstractList 和 AbstractSequentialList Vector 替代方案 Stack ArrayList LinkedList 前言-与正文无关 生活远不止眼前的苦劳与奔波,它还充满了无数值得我们去体验和珍惜的美好事物。在这个快节奏的世界…...
UE4运用C++和框架开发坦克大战教程笔记(十七)(第51~54集)
UE4运用C和框架开发坦克大战教程笔记(十七)(第51~54集) 51. UI 框架介绍UE4 使用 UI 所面临的问题以及解决思路关于即将编写的 UI 框架的思维导图 52. 管理类与面板类53. 预加载与直接加载54. UI 首次进入界面 51. UI 框架介绍 U…...
GaussDB新体验,新零售选品升级注入新思路【华为云GaussDB:与数据库同行的日子】
选品思维:低频VS高频 一个的商超,假设有50个左右的品类,每个品类下有2到10个不等的商品。然而如此庞大的商品,并非所有都是高频消费品。 结合自身日常的消费习惯,对于高频和低频的区分并不难。一般大型家电、高端礼盒…...
C语言问题汇总
指针 #include <stdio.h>int main(void){int a[4] {1,2,3,4};int *p &a1;int *p1 a1;printf("%#x,%#x",p[-1],*p1);} 以上代码中存在错误。 int *p &a1; 错误1:取a数组的地址,然后1,即指针跳过int [4]大小的字节…...
QT 的 blockSignals(true) 的作用范围
在 Qt 中,blockSignals 是一个用于控件的方法,它用于阻止控件发出的信号。如果你在一个 MainWindow 对象上调用 blockSignals(true),它会阻止该 MainWindow 对象发出的所有信号。 这意味着,如果 MainWindow 上有任何子控件&#…...
【C++私房菜】类和对象万字详解
目录 一、类与对象 1、类是什么 二、类和对象的基础知识 2.1 定义类:成员变量和成员函数 2.2 创建对象:实例化一个类的对象。 2.3对象的生命周期:构造函数和析构函数。 a. 构造函数 b. 析构函数 c.小结: 三、成员变量和…...
PDF下载添加水印和访问密码
下载接口 ApiOperation(value "下载文件-pdf", notes "下载文件pdf版", httpMethod "GET", response WebResult.class)RequestMapping(value "/downloadPdf", method RequestMethod.GET)public void downloadFilePdf(RequestPar…...
基于SSM+MySQL的的新闻发布系统设计与实现
目录 项目简介 项目技术栈 项目运行环境 项目截图 代码截取 源码获取 项目简介 新闻发布系统是一款基于Servletjspjdbc的网站应用程序,旨在提供一个全面且高效的新闻发布平台。该系统主要包括后台管理和前台新闻展示两个平台,涵盖了新闻稿件的撰写…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端,它允许HTTP与Elasticsearch 集群通信,而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 (忘了有没有这步了 估计有) 刷机程序 和 镜像 就不提供了。要刷的时…...
IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)
文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...
【Oracle】分区表
个人主页:Guiat 归属专栏:Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...
免费数学几何作图web平台
光锐软件免费数学工具,maths,数学制图,数学作图,几何作图,几何,AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...
SpringAI实战:ChatModel智能对话全解
一、引言:Spring AI 与 Chat Model 的核心价值 🚀 在 Java 生态中集成大模型能力,Spring AI 提供了高效的解决方案 🤖。其中 Chat Model 作为核心交互组件,通过标准化接口简化了与大语言模型(LLM࿰…...
QT开发技术【ffmpeg + QAudioOutput】音乐播放器
一、 介绍 使用ffmpeg 4.2.2 在数字化浪潮席卷全球的当下,音视频内容犹如璀璨繁星,点亮了人们的生活与工作。从短视频平台上令人捧腹的搞笑视频,到在线课堂中知识渊博的专家授课,再到影视平台上扣人心弦的高清大片,音…...
快速排序算法改进:随机快排-荷兰国旗划分详解
随机快速排序-荷兰国旗划分算法详解 一、基础知识回顾1.1 快速排序简介1.2 荷兰国旗问题 二、随机快排 - 荷兰国旗划分原理2.1 随机化枢轴选择2.2 荷兰国旗划分过程2.3 结合随机快排与荷兰国旗划分 三、代码实现3.1 Python实现3.2 Java实现3.3 C实现 四、性能分析4.1 时间复杂度…...
32单片机——基本定时器
STM32F103有众多的定时器,其中包括2个基本定时器(TIM6和TIM7)、4个通用定时器(TIM2~TIM5)、2个高级控制定时器(TIM1和TIM8),这些定时器彼此完全独立,不共享任何资源 1、定…...
