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

electron项目开发环境搭建

news 2026/2/9 19:13:40

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

Go 语言接口详解

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

编程新知 2026/1/4 5:19:25

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

编程新知 2026/2/1 21:58:45

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2026/1/29 21:20:51

Linux云原生安全：零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

编程新知 2025/8/17 17:11:47

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/11/10 10:45:11

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

编程新知 2025/11/21 22:02:37

智能仓储的未来：自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

编程新知 2026/2/1 2:49:30

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

编程新知 2026/1/20 21:59:36

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...

编程新知 2026/2/6 15:56:54

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

编程新知 2025/9/26 12:26:35