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

electron项目开发环境搭建

news 2026/4/13 0:47:25

由于最近需要做一款跨平台的桌面应用，所以选择使用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

图像面积计算实战：四邻域标记与轮廓算法的对比与应用

1. 图像面积计算的基础概念 在图像处理领域&#xff0c;计算目标对象的面积是最基础也是最重要的任务之一。想象一下医生需要测量肿瘤的大小&#xff0c;或者质检员要计算产品缺陷的面积&#xff0c;这些都离不开准确的面积计算。我刚开始接触这个领域时&#xff0c;常常被各种…...

编程新知 2026/4/13 0:40:07

Go语言中的内存管理：从原理到优化

Go语言中的内存管理&#xff1a;从原理到优化 1. 内存管理的重要性 内存管理是编程语言的核心特性之一&#xff0c;它直接影响程序的性能和稳定性。Go语言通过内置的垃圾回收器和内存分配器&#xff0c;为开发者提供了自动内存管理能力&#xff0c;使得开发者可以专注于业务逻…...

编程新知 2026/4/13 0:37:59

从源码到挂载：剖析NVIDIA Container Toolkit的GPU设备注入机制

1. 从零理解NVIDIA Container Toolkit的GPU挂载机制 第一次在容器里运行nvidia-smi命令时&#xff0c;那种"魔法般"的体验让我记忆犹新。明明宿主机上能正常使用的GPU设备&#xff0c;怎么在容器里就凭空出现了&#xff1f;这背后的秘密就藏在NVIDIA Container Toolk…...

编程新知 2026/4/12 23:53:46

Akagi：终极雀魂AI辅助工具完整使用指南

Akagi&#xff1a;终极雀魂AI辅助工具完整使用指南 【免费下载链接】Akagi 支持雀魂、天鳳、麻雀一番街、天月麻將&#xff0c;能夠使用自定義的AI模型實時分析對局並給出建議&#xff0c;內建Mortal AI作為示例。 Supports Majsoul, Tenhou, Riichi City, Amatsuki, with the …...

编程新知 2026/4/12 23:21:11

MedGemma-1.5-4B实战指南：医学影像报告一致性校验与AI辅助修订系统

MedGemma-1.5-4B实战指南&#xff1a;医学影像报告一致性校验与AI辅助修订系统 1. 系统概述与核心价值 MedGemma Medical Vision Lab是一个基于Google MedGemma-1.5-4B多模态大模型构建的医学影像智能分析Web系统。这个系统通过直观的Web界面&#xff0c;让医学研究者和教育工…...

编程新知 2026/4/12 23:19:10

pg_service.conf：你团队遗忘的魔法

pg_service.conf&#xff1a;你团队遗忘的魔法 摘要本文介绍 pg_service.conf&#xff0c;这是一个简单的 INI 格式配置文件&#xff0c;允许开发者为 PostgreSQL 定义命名的连接配置文件&#xff0c;无需记忆复杂的连接字符串&#xff0c;并通过配置文件中的统一服务别名实现…...

编程新知 2026/4/12 23:01:00

Langchain实战：如何用ChatGLM-4搭建你的第一个AI对话机器人（附完整代码）

Langchain实战&#xff1a;如何用ChatGLM-4搭建你的第一个AI对话机器人&#xff08;附完整代码&#xff09; 最近两年&#xff0c;大模型技术以惊人的速度渗透到各个领域。从智能客服到内容创作&#xff0c;从代码生成到数据分析&#xff0c;AI对话机器人正在重塑人机交互的方式…...

编程新知 2026/4/12 22:02:53

【51 单片机入门到进阶】10 入门：51单片机模块化编程

一&#xff0c;什么是模块化设计 把一个大程序&#xff0c;按功能拆成一个个独立的小文件、小函数&#xff0c;分开写、分开管理。 例如&#xff1a; led.c / led.h → 负责 LEDkey.c / key.h → 负责按键uart.c / uart.h → 负责串口hc_sr04.c / hc_sr04.c → 负责超声波main.…...

编程新知 2026/4/12 21:11:20

ROS2多机通讯避坑指南：为什么你的节点突然失联了？

ROS2多机通讯避坑指南&#xff1a;为什么你的节点突然失联了&#xff1f; 当你在实验室里调试ROS2多机系统时&#xff0c;突然发现某个机器人节点从话题列表中消失了——这种场景对任何开发者来说都不陌生。不同于ROS1时代的主从架构&#xff0c;ROS2的分布式特性让节点失联问题…...

编程新知 2026/4/12 19:54:20

YOLO11实例分割教程：快速掌握数据标注、格式转换与模型训练

YOLO11实例分割教程&#xff1a;快速掌握数据标注、格式转换与模型训练 1. 准备工作与环境搭建 1.1 获取YOLO11镜像 YOLO11镜像提供了完整的计算机视觉开发环境&#xff0c;包含预装好的所有依赖项。您可以通过以下两种方式使用&#xff1a; Jupyter Notebook方式&#xff1…...

编程新知 2026/4/12 19:23:41