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

electron教程（一）创建项目

news 2025/9/15 20:34:55

一、方式①

根据官网描述将electron/electron-quick-start项目克隆下来并启动

electron/electron-quick-start地址：

GitHub - electron/electron-quick-start: Clone to try a simple Electron app

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

一、方式②

创建自己的项目

1.cmd打开运行窗口
mkdir demo-electron-app && cd demo-electron-app
npm init
2.根据提示确认

 3.修改package.json文件
{"name": "demo-electron-app","version": "1.0.0","description": "my-app","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "ljx","license": "ISC"
}

4.安装electron 

npm容易报错,建议用cnpm

npm install --save-dev electron

package.json文件中添加运行命令

 "start": "nodemon --watch main.js --exec npm run build", // 如果没安装nodemon，这行不要"build": "electron ."

建议：在node环境中，安装nodemon，官网介绍，自行了解：诺德蒙 - NPM (npmjs.com)

安装步骤：

  1. win+r，输入cmd，打开运行窗口
  2. 输入npm install -g nodemon
  3. nodemon -v检查是否安装成功

5.创建index.html文件 
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --><meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"><title>我的app</title>
</head><body><h1>Hello World!</h1>我们正在使用 Node.js <span id="node-version"></span>,Chromium <span id="chrome-version"></span>,and Electron <span id="electron-version"></span>.
</body></html>
6.创建main.js文件

主进程文件

const { app, BrowserWindow } = require('electron')
const path = require('node:path')// 创建窗口
const createWindow = () => {// 设置窗口大小const win = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js')}})// 当前窗口显示的页面win.loadFile('index.html')
}// app启动后创建窗口
app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})// 关闭所有窗口时退出应用
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})
7.创建preload.js文件

预加载文件，通过 contextBridge 定义一个全局变量 versions 的示例如下：

const { contextBridge } = require('electron/renderer')contextBridge.exposeInMainWorld('versions', {node: () => process.versions.node,chrome: () => process.versions.chrome,electron: () => process.versions.electron
})
8.创建renderer.js文件

通过全局变量 versions 可以获取浏览器/node/electron版本信息，并将这些信息插入到html中

const information = document.getElementById('info')
information.innerText = `本应用正在使用 Chrome (v${versions.chrome()}), Node.js (v${versions.node()}), 和 Electron (v${versions.electron()})`

 在index.html文件中添加id=info的标签，并引入render.js文件

<div id="info"></div><script src="./renderer.js"></script>
 9.启动看效果
npm run build

相关文章：

electron教程（一）创建项目

一、方式① 根据官网描述将electron/electron-quick-start项目克隆下来并启动 electron/electron-quick-start地址&#xff1a; GitHub - electron/electron-quick-start: Clone to try a simple Electron app git clone https://github.com/electron/electron-quick-start…...

编程日记 2024/7/3 10:58:49

如何在Oracle、MySQL、PostgreSQL上终止会话或取消SQL查询

How to Kill session or Cancel SQL query on Oracle , MySQL, PostgreSQL 数据库维护过程中难免会遇到一些不正常的SQL或会话进程正在占用系统大量资源&#xff0c;临时需要终止查询或kill会话&#xff0c;在Oracle, MySQL, Postgresql数据库中不同的操作。 Oracle KILL会话…...

编程日记 2024/7/3 10:57:47

3、FTL基本工作过程

上文描述了FTL的四大功能&#xff0c;这里简述一下每个功能的含义。 地址转换简述 FTL要维护一个地址转换表&#xff0c;这个转换表是主机读/写硬盘的逻辑地址到硬盘实际物理地址的转换关系。 假如SSD的容量是128G&#xff0c;SSD逻辑块的大小是4KB&#xff0c;那SSD的逻辑块…...

编程日记 2024/7/3 10:55:45

微信小程序的跳转页面

在微信小程序中&#xff0c;要实现从当前页面返回到指定页面的功能&#xff0c;通常不直接使用“返回上一页”的逻辑&#xff0c;而是利用小程序的页面栈管理和navigateBack或者重新定向到目标页面的API。下面我将介绍两种主要的方法&#xff1a; 方法一&#xff1a;使用 navi…...

编程日记 2024/7/3 10:53:42

深入理解 Java 中的线程间通信：`wait()`, `notify()`, `notifyAll()`

引言 在多线程编程中&#xff0c;线程间通信是一个重要且复杂的主题。Java 提供了一套基本的机制来实现线程间通信&#xff0c;即使用 wait(), notify(), 和 notifyAll() 方法。这些方法由 Object 类提供&#xff0c;用于协调多个线程对共享资源的访问。本文将详细介绍这些方法…...

编程日记 2024/7/3 10:48:36

23种设计模式【创建型模式】详细介绍之【单例模式】

23种设计模式【创建型模式】详细介绍之【单例模式】 设计模式的分类和应用场景总结单例模式1. 概述2. 实现方式2.1 饿汉式单例模式2.2 懒汉式单例模式&#xff08;非线程安全&#xff09;2.3 懒汉式单例模式&#xff08;线程安全&#xff09; 3. 单例模式的优缺点3.1 优点3.2 缺…...

编程日记 2024/7/3 10:46:34

某汽车配件制造公司任职资格体系项目成功案例纪实

——基于岗位特点和核心能力要求&#xff0c;分层分级能力测评&#xff0c;实现个性化人才培养 【客户行业】生产制造&#xff1b;汽车配件制造 【问题类型】任职资格体系建立&#xff1b;人才管理系统 【客户背景】 某汽车配件制造公司是一家专注于汽车配件研发、生产和销…...

编程日记 2024/7/3 10:42:28

【Linux】生物信息学常用基本命令

wget网址用于直接从网上下载某个文件到服务器&#xff0c;当然也可以直接从网上先把东西下到本地然后用filezilla这个软件来传输到服务器上。 当遇到不会的命令时候&#xff0c;可以使用man “不会的命令”来查看这个命令的详细信息。比如我想要看看ls这个命令的详细用法&…...

编程日记 2024/7/3 10:41:27

React Native V0.74 — 稳定版已发布

嗨，React Native开发者们， React Native 世界中令人兴奋的消息是，V0.74刚刚在几天前发布，有超过 1600 次提交。亮点如下： Yoga 3.0New Architecture: Bridgeless by DefaultNew Architecture: Batched onLayout UpdatesYarn 3 for New Projects让我们深入了解每一个新亮点…...

编程日记 2024/7/3 10:40:25

Python面试宝典第4题：环形链表

题目 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。如果存在环 &#xff0c;则返回 true 。 否则&#xff0c;返回 false 。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xf…...

编程日记 2024/7/3 10:37:21

Kubernetes (K8s) 底层原理

Kubernetes (K8s) 的底层原理涉及多个关键组件和概念&#xff0c;确保容器化应用程序的自动化部署、扩展和管理。以下是 Kubernetes 的底层原理及其关键组件的详细描述。 核心组件 Etcd 功能&#xff1a;分布式键值存储&#xff0c;用于存储集群的所有数据&#xff0c;包括配置…...

编程日记 2024/7/3 10:36:19

解析Kotlin中的委托（包括类委托，属性委托）【笔记摘要】

1.委托模式 委托模式&#xff1a;操作对象不会去处理某段逻辑&#xff0c;而是会把工作委托给另外一个辅助对象去处理。 例如我们要设计一个自定义类的来实现Set&#xff0c;可以将该实现委托给另一个对象&#xff1a; class MySet<T> (val helperSet: HashSet<T>…...

编程日记 2024/7/3 10:32:12

vue3+ts+uniapp+vite+pinia项目配置

开发环境&#xff1a; node >18&#xff0c;npm >8.10.2&#xff0c;vue < 3.2.31 安装项目 npx degit dcloudio/uni-preset-vue#vite-ts vue3-uniapp 1、引入样式规范 npm add -D eslint eslint-config-airbnb-base eslint-config-prettier eslint-import-resolv…...

编程日记 2024/7/3 10:30:08

大数据开发语言 Scala（四）：面向对象编程

目录 1. 概述 2. 面向对象编程的基本概念 2.1 类和对象 2.2 继承和多态 2.3 封装和访问控制 3. 面向对象编程在大数据开发中的应用 3.1 Spark中的面向对象编程 3.2 面向对象编程在数据清洗和预处理中 3.3 面向对象编程在机器学习中的应用 4. 面向对象编程的高级特性 …...

编程日记 2024/7/3 10:29:07

C++ //练习 14.31 我们的StrBlobPtr类没有定义拷贝构造函数、赋值运算符及析构函数，为什么？

C Primer&#xff08;第5版&#xff09; 练习 14.31 练习 14.31 我们的StrBlobPtr类没有定义拷贝构造函数、赋值运算符及析构函数&#xff0c;为什么&#xff1f; 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 解释&#xff1a; 因为…...

编程日记 2024/7/3 10:28:06

通配符和正则表达式之间的关系

通配符和正则表达式&#xff08;正则&#xff09;都是用于匹配字符串的工具&#xff0c;但它们的复杂性和用途有所不同。下面是它们之间的主要关系和区别&#xff1a; 通配符 通配符主要用于简单的模式匹配&#xff0c;常见于文件系统操作中&#xff0c;例如在命令行中查找文…...

编程日记 2024/7/3 10:26:03

GY-30光照传感器软件I2C方式驱动代码，基于STM32Cube

GY-30光照传感器的具体资料可以去淘宝搜索然后问卖家要&#xff0c;网上也有&#xff0c;所以这里我就不多嘴了。 VCC连接3到5伏电压&#xff0c;根据文件开头的描述在STM32CubeMX中配置好外设。 STM32Cube开发方式就是4个字“简单直接”&#xff0c;直接上代码。 gy30.h #…...

编程日记 2024/7/3 10:25:01

双相元编程：一种新语言设计方法

本文讨论了编程语言的一种趋势&#xff0c;即允许相同的语法表达 在两个不同阶段或环境&#xff08;上下文&#xff09;中执行的计算同时保持跨阶段&#xff08;上下文&#xff09;的一致行为。这些阶段通常在时间上&#xff08;运行时间&#xff09;或空间上&#xff08;运行…...

编程日记 2024/7/3 10:24:00

基于SpringBoot校园外卖配送系统设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f; 感兴趣的可以先收藏起来&#xff0c;…...

编程日记 2024/7/3 10:22:57

茗鹤APS高级计划排程系统，在集团多工厂协同生产下的应用

随着业务规模的扩大和市场的全球化&#xff0c;越来越多的企业选择“总部多工厂基地”的模式&#xff0c;此种模式大幅提升企业的产能与产量&#xff0c;有效分散风险。然后&#xff0c;与之而来的是对企业的管理提出更高的管理要求。多个生产基地不仅面临集团下发的周期性计划…...

编程日记 2024/7/3 10:18:51

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石， 设计模式 在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类： 一、创建型模式（5种） 1. 单例模式（Sing…...

编程新知 2025/8/10 21:01:28

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

编程新知 2025/9/12 22:07:42

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

编程新知 2025/9/9 10:12:01

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

编程新知 2025/8/22 5:05:32

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

编程新知 2025/8/25 15:23:12

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

编程新知 2025/9/15 8:33:21

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

编程新知 2025/9/12 23:22:06

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

编程新知 2025/6/11 3:20:47

Go 并发编程基础：通道（Channel）的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

编程新知 2025/8/28 22:40:10

RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

编程新知 2025/9/6 1:25:52