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

Electron实战(一)：环境搭建/Hello World/打包exe

news 2025/8/2 2:45:01

文章目录

      • 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实战(二)&#xff1a;将Node.js和UI能力&#xff08;app/BrowserWindow/dialog)等注入html Electron Electron是一个使用JavaScript, HT…...

编程日记 2024/2/5 13:34:51

【C++】运算符重载详解

&#x1f497;个人主页&#x1f497; ⭐个人专栏——C学习⭐ &#x1f4ab;点击关注&#x1f929;一起学习C语言&#x1f4af;&#x1f4ab; 目录 导读 1. 为什么需要运算符重载 2. 运算符重载概念 3. 运算符重载示例 3.1 运算符重载 3.2 >或<运算符 4. 运算符重…...

编程日记 2024/2/5 13:31:48

评论区功能的简单实现思路

评论区功能是社交类项目中的核心组成部分&#xff0c;它涉及到前端的交云和后端的数据处理。基于你的技术栈&#xff08;前端 Vue3&#xff0c;后端 Java&#xff09;&#xff0c;下面是一个具体的实现思路和数据库设计建议&#xff0c;并探索一下知乎的评论系统。 数据库设计…...

编程日记 2024/2/5 13:28:45

Java自救手册

目录 访问地址 访问地址&#xff0c;发现不通&#xff0c;无法访问&#xff1a; 网络不通一般有两种情况&#xff1a; Maven 拿Maven 拿到Maven以后 Maven单独的报红 Git git注意&#xff1a; 目录 访问地址 访问地址&#xff0c;发现不通&#xff0c;无法访问&…...

编程日记 2024/2/5 13:27:45

ASM-HEMT参数提取和模型验证测试

参数提取程序 直流I-V参数提取 DC模型参数提取流程对于ASM-GaN-HEMT模型可以总结在下图中。 以下步骤描述了该流程&#xff1a; 在模型中设置物理参数&#xff0c;如L&#xff08;沟道长度&#xff09;、W&#xff08;沟道宽度&#xff09;、NF&#xff08;栅指数&#xf…...

编程日记 2024/2/5 13:26:44

浅压缩、深压缩、双引擎、计算机屏幕编码……何去何从？

专业视听领域尤其显示控制和坐席控制领域&#xff0c;最近几年最激动人心的技术&#xff0c;莫过于分布式了。 分布式从推出之日就备受关注&#xff1a;担心稳定性的&#xff0c;质疑同步性能的&#xff0c;怀疑画面质量的…… 诚然&#xff0c;我们在此前见多了带着马赛克的…...

编程日记 2024/2/5 13:20:39

2020年通信工程师初级专业实务真题

文章目录 一、第1章 现代通信网概述&#xff1a;信令网、同步网、管理网。第10章 通信业务&#xff1a;通信产业链&#xff0c;通信终端的分类&#xff0c;通信业务的定义及分类二、第3章 接入网&#xff1a;无线接入网的优点&#xff0c;接入网的接口&#xff08;UNI&#xff…...

编程日记 2024/2/5 13:19:38

Linux常见面试题汇总

Linux上如何查询某个端口是否被占用&#xff1f; 在Linux上&#xff0c;你可以使用以下几种方法来查询某个端口是否被占用&#xff1a; 使用netstat命令&#xff1a; netstat -tuln | grep <端口号>这个命令会列出当前正在运行的所有TCP和UDP端口&#xff0c;并过滤出指…...

编程日记 2024/2/5 13:15:33

C语言小游戏：贪吃蛇（游戏开发的环境和功能介绍）

❀❀❀ 文章由不准备秃的大伟原创 ❀❀❀ ♪♪♪ 若有转载&#xff0c;请联系博主哦~ ♪♪♪ ❤❤❤ 致力学好编程的宝藏博主&#xff0c;代码兴国&#xff01;❤❤❤ 生命不停&#xff0c;学习不止。铁汁们&#xff0c;我是大伟&#xff0c;欢迎来到大伟的游戏时间&#xff0c…...

编程日记 2024/2/5 13:14:31

ElementUI Form：InputNumber 计数器

ElementUI安装与使用指南 InputNumber 计数器 点击下载learnelementuispringboot项目源码 效果图 el-radio.vue &#xff08;InputNumber 计数器&#xff09;页面效果图 项目里el-input-number.vue代码 <script> export default {name: el_input_number,data() {re…...

编程日记 2024/2/5 13:13:30

apk反编译修改教程系列---修改apk的默认颜色 布局颜色 手机电脑同步演示【十】

往期教程&#xff1a; apk反编译修改教程系列-----修改apk应用名称 任意修改名称 签名【一】 apk反编译修改教程系列-----任意修改apk版本号 版本名 防止自动更新【二】 apk反编译修改教程系列-----修改apk中的图片 任意更换apk桌面图片【三】 apk反编译修改教程系列---简单…...

编程日记 2024/2/5 13:08:21

响应式开发如何设置断点，小屏幕界面该如何显示（有动图）

Hi&#xff0c;我是贝格前端工场&#xff0c;本期分享响应式开发&#xff0c;如何设置屏幕断点&#xff0c;pc页面布局到了移动端之后该如何布局的问题&#xff0c;微软也提供了设置屏幕断点的动图演示&#xff0c;非常直观。 一、什么是响应式开发&#xff0c;为何要设置屏幕断…...

编程日记 2024/2/5 13:06:19

Java基础 集合（二）List详解

目录 简介 数组与集合的区别如下&#xff1a; 介绍 AbstractList 和 AbstractSequentialList Vector 替代方案 Stack ArrayList LinkedList 前言-与正文无关 生活远不止眼前的苦劳与奔波&#xff0c;它还充满了无数值得我们去体验和珍惜的美好事物。在这个快节奏的世界…...

编程日记 2024/2/5 13:00:11

UE4运用C++和框架开发坦克大战教程笔记（十七）（第51~54集）

UE4运用C和框架开发坦克大战教程笔记&#xff08;十七&#xff09;&#xff08;第51~54集&#xff09; 51. UI 框架介绍UE4 使用 UI 所面临的问题以及解决思路关于即将编写的 UI 框架的思维导图 52. 管理类与面板类53. 预加载与直接加载54. UI 首次进入界面 51. UI 框架介绍 U…...

编程日记 2024/2/5 12:55:06

GaussDB新体验，新零售选品升级注入新思路【华为云GaussDB：与数据库同行的日子】

选品思维&#xff1a;低频VS高频 一个的商超&#xff0c;假设有50个左右的品类&#xff0c;每个品类下有2到10个不等的商品。然而如此庞大的商品&#xff0c;并非所有都是高频消费品。 结合自身日常的消费习惯&#xff0c;对于高频和低频的区分并不难。一般大型家电、高端礼盒…...

编程日记 2024/2/5 12:54:05

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&#xff1a;取a数组的地址&#xff0c;然后1&#xff0c;即指针跳过int [4]大小的字节…...

编程日记 2024/2/5 12:53:04

QT 的 blockSignals(true) 的作用范围

在 Qt 中&#xff0c;blockSignals 是一个用于控件的方法&#xff0c;它用于阻止控件发出的信号。如果你在一个 MainWindow 对象上调用 blockSignals(true)&#xff0c;它会阻止该 MainWindow 对象发出的所有信号。 这意味着&#xff0c;如果 MainWindow 上有任何子控件&#…...

编程日记 2024/2/5 12:52:02

【C++私房菜】类和对象万字详解

目录 一、类与对象 1、类是什么 二、类和对象的基础知识 2.1 定义类&#xff1a;成员变量和成员函数 2.2 创建对象&#xff1a;实例化一个类的对象。 2.3对象的生命周期&#xff1a;构造函数和析构函数。 a. 构造函数 b. 析构函数 c.小结&#xff1a; 三、成员变量和…...

编程日记 2024/2/5 12:44:55

PDF下载添加水印和访问密码

下载接口 ApiOperation(value "下载文件-pdf", notes "下载文件pdf版", httpMethod "GET", response WebResult.class)RequestMapping(value "/downloadPdf", method RequestMethod.GET)public void downloadFilePdf(RequestPar…...

编程日记 2024/2/5 12:43:54

基于SSM+MySQL的的新闻发布系统设计与实现

目录 项目简介 项目技术栈 项目运行环境 项目截图 代码截取 源码获取 项目简介 新闻发布系统是一款基于Servletjspjdbc的网站应用程序&#xff0c;旨在提供一个全面且高效的新闻发布平台。该系统主要包括后台管理和前台新闻展示两个平台&#xff0c;涵盖了新闻稿件的撰写…...

编程日记 2024/2/5 12:42:54

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2025/7/31 21:58:04

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

编程新知 2025/7/30 12:22:37

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/6/15 19:07:20

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2025/7/29 5:46:33

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2025/8/1 6:58:48

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

编程新知 2025/7/29 11:30:47

Caliper 配置文件解析：config.yaml

Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...

编程新知 2025/7/7 17:01:50

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

编程新知 2025/7/29 9:20:56

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

编程新知 2025/7/31 10:30:39

Proxmox Mail Gateway安装指南：从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...

编程新知 2025/7/30 18:22:10