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

创建基本的 Electron 应用项目的详细步骤

news 来源：原创 2025/7/12 23:26:48

创建一个基本的 Electron 应用项目的详细步骤。我们将从安装 Node.js 开始，然后创建项目文件夹并初始化 Electron 项目。

1. 安装 Node.js

首先，确保你已经安装了 Node.js 和 npm。你可以在终端中运行以下命令来检查是否已经安装：

node -v
npm -v

如果终端返回了 Node.js 和 npm 的版本信息，说明你已经安装了它们。如果没有返回版本信息，你需要先安装 Node.js。

你可以从官网下载并安装最新版本的 Node.js。安装完成后，再次运行上述命令检查版本信息。

2. 创建项目文件夹

打开终端，创建一个名为 demo 的文件夹，并进入该文件夹：

mkdir demo
cd demo

3. 初始化项目

在 demo 文件夹中初始化一个新的 Node.js 项目。运行以下命令：

npm init -y

这将创建一个默认的 package.json 文件，其中包含了项目的元数据。

4. 安装 Electron

安装 Electron 作为项目的开发依赖

npm install --save-dev electron

5. 配置项目

创建主进程文件

在项目根目录下创建一个名为 main.js 的文件，这是 Electron 应用的主进程文件。编辑 main.js，添加以下内容：

const { app, BrowserWindow, Menu } = require('electron');
const path = require('path');function createWindow() {const mainWindow = new BrowserWindow({width: 800,height: 600,icon: path.join(__dirname, '/img/logo.ico'), // 设置图标webPreferences: {preload: path.join(__dirname, 'preload.js')}});mainWindow.loadFile('index.html');// 隐藏菜单栏Menu.buildFromTemplate([]);Menu.setApplicationMenu(null);
}app.whenReady().then(() => {createWindow();app.on('activate', function() {if (BrowserWindow.getAllWindows().length === 0) createWindow();});
});app.on('window-all-closed', function() {if (process.platform !== 'darwin') app.quit();
});

创建预加载文件

在项目根目录下创建一个名为 preload.js 的文件，这是预加载脚本文件，用于在主进程和渲染进程之间进行通信。编辑 preload.js，添加以下内容：

const { contextBridge, ipcRenderer } = require('electron');contextBridge.exposeInMainWorld('electron', {send: (channel, data) => {ipcRenderer.send(channel, data);},receive: (channel, func) => {ipcRenderer.on(channel, (event, ...args) => func(...args));}
});

创建 HTML 文件

在项目根目录下创建一个名为 index.html 的文件，这是 Electron 应用的主界面。编辑 index.html，添加以下内容：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Electron App</title>
</head>
<body><h1>Welcome to Electron App</h1><button id="sendButton">Send Message</button><script src="renderer.js"></script>
</body>
</html>

创建渲染进程文件

在项目根目录下创建一个名为 renderer.js 的文件，这是渲染进程的脚本文件。编辑 renderer.js，添加以下内容：

document.getElementById('sendButton').addEventListener('click', () => {window.electron.send('message', 'Hello from Renderer');
});window.electron.receive('response', (data) => {alert(`Received response: ${data}`);
});

6. 修改 `package.json`

确保 package.json 文件中有启动脚本。编辑 package.json，添加 start 脚本：

{"name": "demo","version": "1.0.0","description": "","main": "main.js","scripts": {"start": "electron .","test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC","devDependencies": {"electron": "^33.3.1"}
}

7. 启动项目

在终端中运行以下命令来启动 Electron 应用：

npm start

运行效果：

8. 安装 Electron 和 electron-builder

npm install electron --save-dev
npm install electron-builder --save-dev

9.配置 `package.json`

在 package.json 文件中添加或修改以下内容：

{"name": "your-app-name","version": "1.0.0","main": "main.js","scripts": {"start": "electron .","build": "electron-builder"},"build": {"appId": "com.yourcompany.yourapp","productName": "YourAppName","directories": {"buildResources": "build","output": "release"},"files": ["dist/**/*","node_modules/**/*","package.json"],"win": {"target": "nsis","icon": "build/icon.ico"},"mac": {"target": "dmg","icon": "build/icon.icns"},"linux": {"target": "AppImage","icon": "build/icon.png"}}
}

10. 打包应用

在项目根目录下运行以下命令来打包应用：

npm run build

11. 检查输出

打包完成后，你会在 release 目录下找到生成的安装包。根据你的配置，可能有以下几种格式：

Windows: .exe 或 .msi
macOS: .dmg 或 .app
Linux: .AppImage 或 .deb

创建基本的 Electron 应用项目的详细步骤

创建一个基本的 Electron 应用项目的详细步骤。我们将从安装 Node.js 开始，然后创建项目文件夹并初始化 Electron 项目。 1. 安装 Node.js 首先，确保你已经安装了 Node.js 和 npm。你可以在终端中运行以下命令来检查是否已经安装： node -v…...

编程日记 2025/7/12 23:26:48

《异步编程之美》— 全栈修仙《Java 8 CompletableFuture 对比 ES6 Promise 以及Spring @Async》

哈喽，大家好！在平常开发过程中会遇到许多意想不到的坑，本篇文章就记录在开发过程中遇到一些常见的问题，看了许多博主的异步编程，我只能说一言难尽。本文详细的讲解了异步编程之美，是不可多得的好文&#xf…...

编程日记 2025/7/8 19:35:49

Android 修改SVG属性并显示图片（AndroidSvg）

引入依赖： dependencies {implementation com.caverock:androidsvg-aar:1.4 }核心代码： import com.caverock.androidsvg.SVG import org.w3c.dom.Document import java.io.StringWriter import javax.xml.transform.OutputKeys import javax.xml.tran…...

编程日记 2025/7/12 23:09:52

Ubuntu 磁盘修复

Ubuntu 磁盘修复在 ubuntu 文件系统变成只读模式，该处理呢？ 文件系统内部的错误，如索引错误、元数据损坏等，也可能导致系统进入只读状态。磁盘坏道或硬件故障也可能引发文件系统只读的问题。/etc/fstab配置错误，可能…...

编程日记 2025/7/12 23:17:53

移动云自研云原生数据库入围国采！

近日，中央国家机关2024年度事务型数据库软件框架协议联合征集采购项目产品名单正式公布，移动云自主研发的云原生数据库产品顺利入围。这一成就不仅彰显了移动云在数据库领域深耕多年造就的领先技术优势，更标志着国家权威评审机构对移动云在数…...

编程日记 2025/7/10 21:13:04

Java一个简单的反弹动画练习

文章目录说明代码详解创建窗体代码创建绘图板创建线程运行结果完整代码说明做了一个小球和星型做反弹动画的窗体作为练习，分享给大家，为了方便和我一样的小白可以看的比较明白，所以尽量详细的标注了注释，希望能帮到同样在学习…...

编程日记 2025/7/12 23:03:22

互联网架构变迁：从 TCP/IP “呼叫” 到 NDN “内容分发” 的逐浪之旅

本文将给出关于互联网架构演进的一个不同视角。回顾一下互联网的核心理论基础产生的背景： 左边是典型的集中控制通信网络，很容易被摧毁，而右边的网络则没有单点问题，换句话说它很难被全部摧毁，与此同时，分…...

编程日记 2025/7/12 21:39:45

git push命令

git push 常用命令 1. 拉取远程仓库最新数据使用 git fetch git fetch作用： 获取远程仓库的最新数据（包括分支、标签等），但不会修改本地工作目录。结果： 仅更新远程分支（如 origin/main）的…...

编程日记 2025/7/12 22:25:14

day01-HTML-CSS——基础标签样式表格标签表单标签

目录此篇为简写笔记下端1-3为之前笔记（强迫症、保证文章连续性）完整版笔记代码模仿新浪新闻首页完成审核不通过发不出去HTMLCSS1 HTML1.1 介绍1.1.1 WebStrom中基本配置 1.2 快速入门1.3 基础标签1.3.1 标题标签1.3.2 hr标签1.3.3 字体标签1.3.4 换行标…...

编程日记 2025/7/11 23:02:23

软考信安16~网络安全风险评估技术原理与应用

1、网络安全风险评估概述 1.1、网络安全风险评估概念网络安全风险评估（简称“网络风险评估＂）就是指依据有关信息安全技术和管理标准，对网络系统的保密性、完整性、可控性和可用性等安全属性进行科学评价的过程，评估内容涉及网络系统的脆弱性、网络安全威胁以及脆弱性被…...

编程日记 2025/7/10 12:39:22

嵌入式C语言：二维数组

目录一、二维数组的定义二、内存布局 2.1. 内存布局特点 2.2. 内存布局示例 2.2.1. 数组元素地址 2.2.2. 内存布局图（简化表示） 2.3. 初始化对内存布局的影响三、访问二维数组元素 3.1. 常规下标访问方式 3.2. 通过指针访问 3.2.1. 指向数…...

编程日记 2025/7/12 23:16:27

计算机网络期末复习（知识点）

概念题在实际复习之前，可以看一下这个视频将网络知识串一下，以便更好地复习：【你管这破玩意叫网络？】网络规模的分类 PAN（个人区域网络）：用于个人设备间的连接，如手机与蓝牙耳机…...

编程日记 2025/7/12 23:22:53

LeetCode：3298. 统计重新排列后包含另一个字符串的子字符串数目 II（滑动窗口 Java）

目录 3298. 统计重新排列后包含另一个字符串的子字符串数目 II 题目描述： 实现代码与解析： 滑动窗口原理思路： 3298. 统计重新排列后包含另一个字符串的子字符串数目 II 题目描述： 给你两个字符串 word1 和 word2 。如果…...

编程日记 2025/7/6 2:03:21

【SpringAOP】Spring AOP 底层逻辑：切点表达式与原理简明阐述

前言 🌟🌟本期讲解关于spring aop的切面表达式和自身实现原理介绍~~~ 🌈感兴趣的小伙伴看一看小编主页：GGBondlctrl-CSDN博客 🔥 你的点赞就是小编不断更新的最大动力 &am…...

编程日记 2025/7/12 23:01:58

es 3期第23节-运用Pipeline实现二转聚合统计

#### 1.Elasticsearch是数据库，不是普通的Java应用程序，传统数据库需要的硬件资源同样需要，提升性能最有效的就是升级硬件。 #### 2.Elasticsearch是文档型数据库，不是关系型数据库，不具备严格的ACID事务特性&#xff…...

编程日记 2025/7/12 12:23:20

T-SQL语言的编程范式

T-SQL编程范式探析引言随着信息技术的迅猛发展，数据库在各个行业的应用日益广泛。在众多数据库管理系统中，SQL Server以其高性能和易用性受到广泛欢迎。T-SQL（Transact-SQL）是SQL Server的扩展版本，是一种用于查询…...

编程日记 2025/7/12 5:47:25

【ArcGIS微课1000例】0137：色彩映射表转为RGB全彩模式

本文讲述ArcGIS中，将tif格式的影像数据从色彩映射表转为RGB全彩模式。参考阅读：【GlobalMapper精品教程】093：将tif影像色彩映射表（调色板）转为RGB全彩模式文章目录一、色彩映射表预览二、色彩映射表转为RGB全彩模式一、色彩映射表预览加载配套数据包中的0137.rar中的…...

编程日记 2025/7/12 23:03:22

论文笔记（六十一）Implicit Behavioral Cloning

Implicit Behavioral Cloning 文章概括摘要1 引言2 背景：隐式模型的训练与推理3 隐式模型与显式模型的有趣属性4 policy学习成果5 理论见解：隐式模型的通用逼近性6 相关工作7 结论文章概括引用： inproceedings{florence2022implicit,titl…...

编程日记 2025/7/12 22:48:37

网络安全核心目标CIA

网络安全的核心目标是为关键资产提供机密性(Confidentiality)、可用性(Availablity)、完整性(Integrity)。作为安全基础架构中的主要的安全目标和宗旨，机密性、可用性、完整性频频出现，被简称为CIA，也被成为你AIC，只是顺序不同而已…...

编程日记 2025/7/12 22:23:02

hive迁移后修复分区慢，怎么办？

我有1个30TB的分区表，客户给的带宽只有600MB，按照150%的耗时来算，大概要迁移17小时。使用hive自带的修复分区命令（一般修复分区比迁移时间长一点），可能要花24小时。于是打算用前面黄大佬的牛B方案。 Hive增…...

编程日记 2025/7/12 23:22:08

一块钱的RISC-V 32位芯片

‍‍ ‍‍之前跟一个朋友聊天，说以后的芯片一定是越来越趋向于定制化，比如我们需要一个ADC芯片，这颗ADC芯片需要有串口功能，那就只开发一颗这样的芯片就好了，其他的功能都可以裁剪掉。 ➵➵➵➵➵➵➵➵➵➵➵➵➵➵➵…...

编程日记 2025/7/11 5:23:56

Linux常用指令

目录 1 概述2 指令2.1 简单指令2.2 解压缩2.2.1 tar.bz2和tar.gz2.2.2 单独bz22.2.3 zip2.2.4 7z 2.3 网卡操作 1 概述本章主要是记录一些日常用到的Linux指令，方便自己忘记的时候查找，也为有需要的人提供参考。 2 指令 2.1 简单指令指令解释cat /…...

编程日记 2025/7/12 23:12:24

车载音频开发（二）：对音频数据作音量调节

通过前一个章节打下的基础车载音频开发（一）：从看懂wav开始https://blog.csdn.net/Hellomino_/article/details/140873133?fromshareblogdetail&sharetypeblogdetail&sharerId140873133&sharereferPC&sharesourceHellomino_&…...

编程日记 2025/7/9 9:16:34

误差与误差限

目录误差误差限小结误差设 x x x为准确值 , x ∗ ,x^* ,x∗为 x x x的一个近似值，称 e ∗ x ∗ − x e^*x^*-x e∗x∗−x为近似值的绝对误差，简称误差. 这样定义的误差 e ∗ e^{*} e∗可正可负，当绝对误差为正时近似值偏大，…...

编程日记 2025/7/12 11:47:39

halcon三维点云数据处理（七）find_shape_model_3d_recompute_score

目录一、find_shape_model_3d_recompute_score例程代码二、set_object_model_3d_attrib_mod函数三、prepare_object_model_3d 函数四、create_cube_shape_model_3d函数五、获得CamPose六、project_cube_image函数七、find_shape_model_3d函数八、project_shape_model_3d函数一…...

编程日记 2025/7/10 13:58:28

如何从串 ‘ 中国 +86‘ 中，获取到‘中国’：strip()、split()及正则表达式的使用

业务中有这样一个场景，国家列表中的数据格式是这样： 中国 86 ，其中的 "中国" 前面有3个空格，需要从中提取出 "中国"，有哪些方法呢？ 方法 1：使用 strip() 和 split() str…...

编程日记 2025/7/8 1:57:26

Java Web开发进阶——Spring Security基础与应用

Spring Security是Spring框架的核心模块之一，用于保护Web应用程序和微服务的安全。它提供强大的认证和授权功能，并与Spring生态系统无缝集成。本节将详细介绍Spring Security的基础知识及其在实际项目中的应用。 1. Spring Security概述与功能 1.1 什么…...

编程日记 2025/7/9 19:13:05

1. Doris分布式环境搭建

一. 环境准备本次测试集群采用3台机器hadoop1、hadoop2、hadoop3, Frontend和Backend部署在同一台机器上，Frontend部署3台组成高可用，Backend部署3个节点，组成3副本存储。主机IP操作系统FrontendBackendhadoop1192.168.47.128Centos7Foll…...

编程日记 2025/7/8 20:25:29

消息中间件类型介绍

消息中间件是一种在分布式系统中用于实现消息传递的软件架构模式。它能够在不同的系统或应用之间异步地传输数据，实现系统的解耦、提高系统的可扩展性和可靠性。以下是几种常见的消息中间件类型及其介绍： 1.RabbitMQ 特点： • 基于AMQP&#…...

编程日记 2025/7/3 22:40:03

Win10微调大语言模型ChatGLM2-6B

在《Win10本地部署大语言模型ChatGLM2-6B-CSDN博客》基础上进行，官方文档在这里，参考了这篇文章首先确保ChatGLM2-6B下的有ptuning AdvertiseGen下载地址1，地址2，文件中数据留几行模型文件下载地址 （注意&#xff1…...

编程日记 2025/7/9 19:20:45

C# GID+绘制不透明和半透明的线条

绘制线条时，必须将 Pen 对象传递给 DrawLine 类的 Graphics 方法。 Pen 构造函数的参数之一是 Color 对象。若要绘制不透明的线条，请将颜色的 alpha 分量设置为 255。若要绘制半透明的线条，请将 alpha 分量设置为从 1 到 254 的任何值。在…...

编程日记 2025/7/10 15:03:56

解锁 C# 与 LiteDB 嵌入式 NoSQL 数据库

一、开篇：邂逅 C# 与 LiteDB 新世界在当今的软件开发领域，数据管理如同建筑的基石，而选择一款合适的数据库则是项目成功与否的关键因素之一。对于 C# 开发者来说，面对琳琅满目的数据库选项，如何抉择常常令人头疼。今…...

编程日记 2025/7/8 20:24:20

iOS - 数组的真实类型

1. NSArray 类簇 // 1. __NSArray0 (空数组) NSArray *empty [];// 2. __NSArrayI (不可变数组) NSArray *immutable [1, 2, 3];// 3. __NSArrayM (可变数组) NSMutableArray *mutable [NSMutableArray array];// 4. __NSSingleObjectArrayI (单元素数组) NSArray *single …...

编程日记 2025/7/12 10:21:03

Unity热更新之 Addressables(2) 本地/远端打包流程测试

基础篇：Unity热更新之 Addressables(1) 资源基础加载-CSDN博客基础方法来源于唐老狮,我也是初学热更这一块，所有不保证步骤完全正确，如有不足还请斧正目录 0.前提 1.本地打包 1.1.资源放入包 1.2.简化路径名称给出标签(如有需要的话) …...

编程日记 2025/7/8 21:26:09

Python标准库之SQLite3

包含了连接数据库、处理数据、控制数据、自定义输出格式及处理异常的各种方法。官方文档：sqlite3 --- SQLite 数据库的 DB-API 2.0 接口 — Python 3.13.1 文档官方文档SQLite对应版本：3.13.1 SQLite主页：SQLite Home Page SQL语法教程&a…...

编程日记 2025/7/8 1:59:02

php 使用simplexml_load_string转换xml数据格式失败

本文介绍如何使用php函数解析xml数据为数组。 <?php$a <xml><ToUserName><![CDATA[ww8b77afac71336111]]></ToUserName><FromUserName><![CDATA[sys]]></FromUserName><CreateTime>1736328669</CreateTime><Ms…...

编程日记 2025/7/10 9:22:03

Linux第二课：LinuxC高级学习记录day01

0、大纲 0.1、Linux 软件安装，用户管理，进程管理，shell 命令，硬链接和软连接，解压和压缩，功能性语句，结构性语句，分文件，make工具，shell脚本 0.2、C高级 …...

编程日记 2025/7/8 21:43:48

Notepad++上NppFTP插件的安装和使用教程

一、NppFTP插件下载图示是已经安装好了插件。在搜索框里面搜NppFTP，一般情况下，自带的下载地址容易下载失败。这里准备了一个下载连接：Release v0.29.10 ashkulz/NppFTP GitHub 这里我下载的是x86版本下载好后在nodepad的插件里面选择打…...

编程日记 2025/7/11 1:17:06

怎样提高服务器中的数据传输速度？

服务器中的数据传输速度会影响着用户的体验感，当企业中的数据传输速度出现卡顿或者是过慢时，用户不能及时浏览到所需的内容，给用户造成不好的体验感，那么企业该怎样才能提高服务器中的数据传输速度呢？ 服务器之间如何传…...

编程日记 2025/7/7 13:02:06

Java聊天小程序

拟设计一个基于 Java 技术的局域网在线聊天系统，实现客户端与服务器之间的实时通信。系统分为客户端和服务器端两类，客户端用于发送和接收消息，服务器端负责接收客户端请求并处理消息。客户端通过图形界面提供用户友好的操作界面，服务器端监听多个客户端的连接并管理消息通…...

编程日记 2025/7/12 22:44:26

Spring事件发布与监听

Spring事件机制详解：事件发布与监听在Spring框架中，事件机制基于发布-订阅模式，允许组件之间进行解耦。发布者发布事件，监听者订阅并响应这些事件。Spring事件机制的核心在于ApplicationEvent和ApplicationListener，…...

编程日记 2025/7/9 17:24:57

【PPTist】公式编辑、插入音视频、添加动画

一、插入公式点击公式的时候 latexEditorVisible 会变成 true src/views/Editor/CanvasTool/index.vue <Modalv-model:visible"latexEditorVisible" :width"880" ><LaTeXEditor close"latexEditorVisible false"update"data &…...

编程日记 2025/7/7 21:22:08

Dart语言的面向对象编程

Dart语言的面向对象编程 Dart是一种由谷歌开发的编程语言，主要用于构建Web、移动应用及服务器端应用。作为一门现代编程语言，Dart自带丰富的特性，尤其是在面向对象编程（Object-Oriented Programming, OOP）方面&#x…...

编程日记 2025/7/12 8:20:37

selenium+pyqt5自动化工具总结

说明：本工具是，操作外部google浏览器、selenium是无法操作qt界面中嵌套的浏览器的， 工具在后面 1. 代码结构 pycharm打开的文件下，再写一个子文件，文件导入的时候把子文件名带上这样就可以在外层使用命令 pyinst…...

编程日记 2025/7/8 1:18:43

Java 基于微信小程序的高校科研团队管理系统设计与实现（附源码，部署，文档

博主介绍：✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇…...

编程日记 2025/6/28 13:51:19

如何规模化实现完全自动驾驶？Mobileye提出解题“新”思路

在CES 2025上，Mobileye展示了端到端自动驾驶系统Mobileye Drive™，通过高度集成的传感器、算法和计算平台，可以实现自动驾驶功能的全覆盖。 Mobileye创始人兼首席执行官Amnon Shashua教授期间，Mobileye创始人兼首席执行官Amnon …...

编程日记 2025/7/8 9:15:42

Vue2与Vue3在项目开发中的选择：深入探讨

文章目录前言一、Vue2的优势与挑战二、Vue3的进步与特性三、如何做出选择？结语前言 Vue.js 是一个用于构建用户界面的渐进式JavaScript框架。Vue2和Vue3是其两个主要版本，它们各自拥有一系列特点和优势。随着Vue3的发布，开发者们面临着在新…...

编程日记 2025/7/9 8:53:36

Git 操作与技巧

一、开发日常常用 Git 操作与技巧 1.1 基础操作 1.1.1 查看 Git 状态 git status：查看当前工作区的状态，了解哪些文件已经修改、哪些文件已经暂存。git status这个命令是最常用的命令之一，可以帮助你理解当前的开发状态，哪些文…...

编程日记 2025/7/11 17:56:39

vs2022开发.net窗体应用开发环境安装配置以及程序发布详细教程

文章目录一、安装visual studio1.1推荐win10操作系统1.2推荐vs20221.3选择工作负载二、新建基于.net的winform应用程序2.1为什么要.net 2.2 新建.net窗体应用2.2.1 选择Window窗体应用2.2.2 .net窗体对比framework窗体三、发布.net应用一、安装visual studio 1.1推荐win10…...

编程日记 2025/7/8 4:38:25

Mysql--基础篇--视图，存储过程，触发器

1、视图 MySQL视图（View）是一个虚拟表，其内容由查询定义。同真实的表一样，视图包含一系列带有名称的列和行数据。但是，视图并不在数据库中以存储的数据值集形式存在。行和列数据来自由定义视图的查询所引用的表&#…...

编程日记 2025/7/9 13:01:54