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

electron项目开发环境搭建

news 2025/12/25 19:31:07

由于最近需要做一款跨平台的桌面应用，所以选择使用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项目开发环境搭建

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

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

Spring 知识点

Spring 1.1 Spring 简介 1.1.1 Spring 概念 Spring是一个轻量级Java开发框架&#xff0c;最早有Rod Johnson创建为了解决企业级应用开发的业务逻辑层和其他各层的耦合问题Spring最根本的使命是解决企业级应用开发的复杂性&#xff0c;即简化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证书！

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

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

linux自定义网络访问规则

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

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

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

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

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

动手学深度学习Pytorch 4.4练习

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

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

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

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

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

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

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

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

torch.multiprocessing

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

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

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

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

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

最新AI创作系统ChatGPT程序源码+详细搭建部署教程+微信公众号版+H5源码/支持GPT4.0+GPT联网提问/支持ai绘画+MJ以图生图+思维导图生成！

使用Nestjs和Vue3框架技术&#xff0c;持续集成AI能力到系统&#xff01; 新增 MJ 官方图片重新生成指令功能同步官方 Vary 指令 单张图片对比加强 Vary(Strong) | Vary(Subtle)同步官方 Zoom 指令 单张图片无限缩放 Zoom out 2x | Zoom out 1.5x新增GPT联网提问功能、手机号注…...

编程日记 2023/8/10 18:28:48

910数据结构（2014年真题）

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

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

Idea创建maven管理的web项目

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

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

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

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

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

D. Strong Vertices - 思维 + 二分

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

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

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

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

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

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

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

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

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

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

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

HTML笔记（2）

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

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

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/12/25 1:39:24

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

编程新知 2025/12/25 13:10:22

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

编程新知 2025/12/23 13:21:02

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/12/17 2:10:10

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2025/12/22 12:07:54

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

编程新知 2025/12/21 4:29:36

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

编程新知 2025/10/23 14:10:35

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...

编程新知 2025/12/21 9:19:45

深度学习水论文：mamba＋图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

编程新知 2025/12/19 2:25:32

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

编程新知 2025/12/24 8:39:38