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

electron项目开发环境搭建

news 2026/2/9 14:03:55

由于最近需要做一款跨平台的桌面应用，所以选择使用electron来作为开发的框架，下面说一下如何搭建一个简单的electron项目:

一、准备工作

安装git：下载git | 官网

安装node：下载 | Node.js 中文网

安装npm/cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org

安装electron：cnpm install -g electron

验证安装是否完成：electron -v / node -v

二、新建工程

1. 新建目录命名为electronDemo，使用npm init -y 新建一个前端工程，在package.json中增加一行"main": “main.js”，这行代表应用程序的入口是main.js文件。

{"name": "electron-quick-start","version": "1.0.0","description": "A minimal Electron application","main": "main.js","scripts": {"start": "electron ."},"repository": "https://github.com/electron/electron-quick-start","keywords": ["Electron","quick","start","tutorial","demo"],"author": "GitHub","license": "CC0-1.0","devDependencies": {"electron": "^25.4.0"}
}

2. 在electronDemo目录中新建index.html文件，在body中增加了hello, electron!这行文本。

<!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>Document</title>
</head>
<body>hello, electron!
</body>
</html>

3. 在electronDemo目录中新建main.js文件，在main.js文件增加内容

const { app, BrowserWindow } = require('electron')
const path = require('path')function createWindow () {const win = new BrowserWindow({width: 800,height: 600})win.loadFile('index.html')
}app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow()}})
})app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit()}
})

app.whenReady()是app启动后的Promise，使用then可以监听对应的状态，在这个回调里面增加createWindow函数，createWindow新建了一个浏览器窗口，设置宽高，并且使用浏览器窗口加载index.html文件。

在终端运行npm run start命令，electron应用的窗口可以正常弹出。

4. 测试electron项目

调试main.js中代码，需要使用VSCode打开工程，点击左侧debug菜单，创建launch.json文件。

{"version": "0.2.0","configurations": [{"name": "Debug Main Process","type": "node","request": "launch","cwd": "${workspaceFolder}","runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron","windows": {"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"},"args" : ["."]}]
}

在main.js文件app.whenReady()的回调中增加一个断点，点击debug区域的启动程序按钮，断点可以正常执行。

三、克隆实例代码案例

git地址：git clone https://github.com/electron/electron-quick-start.git

安装完成通过npm start执行即可

electron项目开发环境搭建

由于最近需要做一款跨平台的桌面应用，所以选择使用electron来作为开发的框架，下面说一下如何搭建一个简单的electron项目: 一、准备工作安装git：下载git | 官网安装node：下载 | Node.js 中文网安装npm/cnpm：npm …...

编程日记 2023/8/10 18:40:06

Spring 知识点

Spring 1.1 Spring 简介 1.1.1 Spring 概念 Spring是一个轻量级Java开发框架，最早有Rod Johnson创建为了解决企业级应用开发的业务逻辑层和其他各层的耦合问题Spring最根本的使命是解决企业级应用开发的复杂性，即简化Java开发。使现有的技术更加容易使…...

编程日记 2023/8/10 18:39:04

目标跟踪与检测后进行 OpenCV 人脸识别，马赛克

文章大纲简介模型下载地址ONNX 静态与动态参数OpenCV 中支持的人脸检测、识别Face detection 人脸检测YuNetFace recognition 人脸识别sFace目标检测，跟踪后的人脸模糊问题汇总不支持动态输入的问题参考文献与学习路径简介 OpenCV 4.5.4版本收录了一个基于深度学习神经网…...

编程日记 2023/8/10 18:38:03

持有PMP证书，可申请CSPM证书！

一，CSPM介绍 CSPM的全称是：项目管理专业人员能力评价，是我们国内的“PMP”，是我们中国人自己的项目管理专业人士评价指南，符合中国国情且符合中国未来发展的项目管理专业人员能力评价标准。 2022年10月12日发布实施了…...

编程日记 2023/8/10 18:37:01

linux自定义网络访问规则

1.更改防火墙默认区域为trusted firewall-cmd --set-default-zonetrusted 2.新建一个zone，将想要访问本机80端口的ip，如：192.168.3.99 ，添加的这个zone中，同时在这个zone中放行80端口。 firewall-cmd --permanent --ne…...

编程日记 2023/8/10 18:36:00

247 个经典实用有趣的 Python 实例附源码

今天给大家整理了 247 个经典实用有趣的 Python 实例，185 页代码齐全可复制 pdf，几乎涵盖了 Python 各个方面的知识点，即可以帮助小白快速全面的学习 Python，也可以让老手通过实战练习来查缺补漏。福利：文末有chat-g…...

编程日记 2023/8/10 18:34:58

动手学深度学习Pytorch 4.4练习

1.这个多项式回归问题可以准确地解出吗？提⽰：使⽤线性代数。可以,把多项式问题，用matlab的str2sym表示出来，再用solve求解。 2.考虑多项式的模型选择。 1. 绘制训练损失与模型复杂度（多项式的阶数）的关系…...

编程日记 2023/8/10 18:33:57

【计算机视觉 | Kaggle】飞机凝结轨迹识别 Baseline 分享和解读（含源代码）

文章目录一、导读二、比赛背景三、比赛任务四、比赛数据五、评价指标六、Baseline6.1 Training part6.2 Submission part 一、导读比赛名称：Google Research - Identify Contrails to Reduce Global Warming https://www.kaggle.com/competitions/google-researc…...

编程日记 2023/8/10 18:32:56

ThinkPHP文件上传：简便安全的解决方案

在现代Web应用程序中，文件上传是一项常见而重要的功能。ThinkPHP是一种流行的PHP开发框架，提供了便捷而安全的文件上传解决方案。本文将介绍ThinkPHP框架中的文件上传功能，并探讨如何使用它来实现安全可靠的文件上传功能。一、ThinkPHP文件…...

编程日记 2023/8/10 18:31:54

torch.multiprocessing

文章目录张量共享torch.multiprocessing.spawnmultiprocessing.Pool与torch.multiprocessing.Pool阻塞非阻塞map阻塞非阻塞 starmap torch.multiprocessing是具有额外功能的multiprocessing，其 API 与multiprocessing完全兼容，因此我们可以将其用作直接…...

编程日记 2023/8/10 18:30:51

解决本地代码commit后发现远程分支被更新的烦恼！

解决本地代码commit后远程分支更新的烦恼！ 在进行代码开发过程中，当我们准备将本地代码推送到远程分支时，有时会遇到远程分支已经被更新的情况。这给我们的开发工作带来了一些挑战，因为我们需要确保我们的修改与远程分支的更新保持…...

编程日记 2023/8/10 18:29:49

910数据结构（2014年真题）

算法设计题问题1 已知一个带头结点的单链表head，假设结点中的元素为整数，试编写算法：按递增次序输出单链表中各个结点的数据元素，并释放结点所占的存储空间。要求：(1)用文字给出你的算法思想；(2)不允许使…...

编程日记 2023/8/10 18:27:47

Idea创建maven管理的web项目

如果你想在项目中添加一个传统的 src 目录来存放源代码，可以按照以下步骤操作： 1. 在项目视图中，右键单击项目名称，选择 “New” -> “Directory”。 2. 在弹出的对话框中，输入目录名称为 “src”，然后…...

编程日记 2023/8/10 18:26:46

Java并发编程（一）多线程基础概念

概述多线程技术：基于软件或者硬件实现多个线程并发执行的技术线程可以理解为轻量级进程，切换开销远远小于进程在多核CPU的计算机下，使用多线程可以更好的利用计算机资源从而提高计算机利用率和效率来应对现如今的高并发网络环境并发编程…...

编程日记 2023/8/10 18:25:45

D. Strong Vertices - 思维 + 二分

分析： 首先找到边的指向很容易，但是暴力是o(n2），超时，可以将给定的式子变形，au - av > bu - bv即au - bu > av - bv，可以将两个数组转变为一个数组中的任意两个值之间的关系，因…...

编程日记 2023/8/10 18:24:44

8月9日上课内容 nginx负载均衡

负载均衡工作当中用的很多的，也是面试会问的很重要的一个点负载均衡：通过反向代理来实现（nginx只有反向代理才能做负载均衡） 正向代理的配置方法（用的较少） 反向代理的方式：四层代理与七层代…...

编程日记 2023/8/10 18:23:43

为何我们都应关心算法备案？

随着技术的日新月异，算法成为现代生活的核心组成部分，从社交媒体推荐、在线广告到智能交通管理，几乎无处不在。然而，如此普及的技术给我们带来了一个新的挑战：如何确保算法的透明度、公正性和道德性？答案可…...

编程日记 2023/8/10 18:22:42

[IDEA]使用idea比较两个jar包的差异

除了一些小工具外，idea自带了jar包比较的功能。把需要比对的jar包放到任意目录下，然后选中两个需要比较的jar包，右键，选择Compare Archives，然后就可以比较了。这次疏忽了，每次打包前需要commit界面看一下…...

编程日记 2023/8/10 18:21:41

HTML笔记（2）

列表标签项目标识符（项目符号）一般是不需要的代码演示改变符号样式，type属性表格标签代码演示练习案例布局标签 div是块儿级标签，占一整行； span标签不会占一整行，它只占包裹内容的那块儿区域&a…...

编程日记 2023/8/10 18:20:40

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段，极易成为DDoS攻击的目标。一旦遭遇攻击，可能导致服务器瘫痪、玩家流失，甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案，帮助快速应对并构建长期防护体系。一、遭遇攻击的紧急应…...

编程新知 2026/2/8 4:37:03

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37