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

快速测试electron环境是否安装成功

news 2026/2/8 17:36:48

快速测试electron环境是否安装成功

  • 测试代码
  • 正确运行的效果
  • 运行错误的效果
    • v22.4.1 版本无法使用
    • v20.15.1版本无法使用
    • v18.20.4 版本无法使用
  • 终极解决办法

测试代码

1.npx create-electron-app my-electron-app
2.cd my-electron-app
3.npm start

正确运行的效果

环境没问题,你就会正常运行:
在这里插入图片描述

运行错误的效果

错误分析:因为代码是从git上面拉去的,在语法和逻辑上肯定是没有错的,所以就node的问题了,尝试降低你的node版本

补充:并非你的node环境有问题,而是你的html文件被加密了,所以运行之后,会显示乱码.

v22.4.1 版本无法使用

在这里插入图片描述

v20.15.1版本无法使用

在这里插入图片描述

v18.20.4 版本无法使用

在这里插入图片描述

终极解决办法

你先打开接下来三个网站
node下载
Node.js安装与配置的教程
electron官方文档
开始配置:

  1. 首先,先把你电脑上的node全部卸载干净
  2. 1)参考下面这位前辈的文章一步一步进行配置,一步都不能差!
    在这里插入图片描述
    我安装的是这个,你和我安一样的就可以
    在这里插入图片描述
    在这里插入图片描述

2)补充：注意! 需要注意文件夹的权限:
如果你看到一个路径,后面加了not permitted这样的字样,那百分百就是文件夹权限的问题.

怎么给文件夹授予权限?如下图:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
3. 根据下面的electron官方教程进行代码编写
在这里插入图片描述
如果你不想写,可以直接看我下面的,已经写好了

1)第一步:创建文件夹,进入文件夹,并npm init初始化
在这里插入图片描述
请复制:

mkdir my-electron-app && cd my-electron-app
npm init

初始化你全部直接回车就行了,初始化成功后你会有下面框住的两个文件:
在这里插入图片描述

2)第二步,修改一下package.json:
请复制:

{"name": "electron","version": "1.0.0","description": "","main": "main.js","scripts": {"start": "electron .","test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","devDependencies": {"electron": "^31.1.0"}
}

3)第三步:执行一下下面这个:
在这里插入图片描述
请复制:

npm install --save-dev electron

执行成功后,你会多一个下面框住的文件:
在这里插入图片描述

4)第四步:编写main.js与index.html

main.js:

const { app, BrowserWindow } = require('electron')const createWindow = () => {const win = new BrowserWindow({width: 800,height: 600})win.loadFile('index.html')
}

index.html:

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --><metahttp-equiv="Content-Security-Policy"content="default-src 'self'; script-src 'self'"/><metahttp-equiv="X-Content-Security-Policy"content="default-src 'self'; script-src 'self'"/><title>Hello from Electron renderer!</title></head><body><h1>Hello from Electron renderer!</h1><p>👋</p></body>
</html>

5)第五步,直接npm start运行,或者npx electron .
在这里插入图片描述

相关文章：

快速测试electron环境是否安装成功

快速测试electron环境是否安装成功 测试代码正确运行的效果运行错误的效果v22.4.1 版本无法使用v20.15.1版本无法使用v18.20.4 版本无法使用 终极解决办法 测试代码 1.npx create-electron-app my-electron-app 2.cd my-electron-app 3.npm start 正确运行的效果 环境没问题…...

编程日记 2024/7/12 3:00:16

数电设计提问求帮助，出租车计费器。

&#x1f3c6;本文收录于《CSDN问答解惑-》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&…...

编程日记 2024/7/12 2:59:14

xcode项目添加README.md文件并进行编辑

想要给xcode项目添加README.md文件其实还是比较简单的&#xff0c;但是对于不熟悉xcode这个工具的人来讲&#xff0c;还是有些陌生&#xff0c;下面简单给大家讲一下流程。 选择“文件”>“新建”>“文件”&#xff0c;在其他&#xff08;滚动到工作表底部&#xff09;下…...

编程日记 2024/7/12 2:56:11

基于 cookiecutter 的 python 项目模板

Cookiecutter 介绍 使用 Python 这种动态语言进行 web 开发&#xff0c;团队中经常会遇到的问题就是代码的质量比较难控制。Python 语言本身灵活性比较高&#xff0c;不加控制的情况下代码质量可能最后很难维护。而且代码的各方面的标准&#xff0c;比如提示的 lint&#xff0…...

编程日记 2024/7/12 2:55:10

如何玩转澳大利亚Facebook直播？

近年来&#xff0c;直播带货已经成为国内最赚钱的行业之一&#xff0c;各种玩法也越来越成熟。然而&#xff0c;在海外市场&#xff0c;尤其是澳大利亚&#xff0c;直播带货仍然是一片蓝海。作为社交媒体营销的主阵地&#xff0c;Facebook的直播功能却常常被卖家忽视。那么&…...

编程日记 2024/7/12 2:53:08

C# IOC容器、依赖注入和控制反转

控制反转&#xff08;Inversion of Control, IoC&#xff09; 定义&#xff1a;控制反转是一种设计原则&#xff0c;它反转了传统编程中的控制流程。在传统的编程模式中&#xff0c;组件之间的依赖关系是由组件自身在内部创建和维护的。而在控制反转模式中&#xff0c;这种依赖…...

编程日记 2024/7/12 2:52:07

论文学习_An Empirical Study of Deep Learning Models for Vulnerability Detection

1. 引言 研究背景：近年来，深度学习漏洞检测工具取得了可喜的成果。最先进的模型报告了 0.9 的 F1 分数，并且优于静态分析器。结果令人兴奋，因为深度学习可能会给软件保障带来革命性的变化。因此，IBM、谷歌和亚马逊等行业公司非常感兴趣，并投入巨资开发此类工具和数据集。…...

编程日记 2024/7/12 2:50:05

ctfshow-web入门-文件上传（web166、web167）（web168-web170）免杀绕过

目录 1、web166 2、web167 3、web168 4、web169 5、web170 1、web166 查看源码&#xff0c;前端只让传 zip 上传 zip 成功后可以进行下载 随便搞一个压缩包&#xff0c;使用记事本编辑&#xff0c;在其内容里插入一句话木马&#xff1a; 上传该压缩包&#xff0c;上传成功…...

编程日记 2024/7/12 2:49:04

Jitsi Meet指定用户成为主持人

前言 在Jitsi Meet进行会议的时候&#xff0c;我们有可能会使用到预约会议的这一个功能&#xff0c;预约会议的时候&#xff0c;我们希望我预约的会议&#xff0c;我就是主持人&#xff0c;而不希望其他人是主持人。 但是Jitsi Meet默认会认为第一个进入房间的是主持人&#…...

编程日记 2024/7/12 2:48:03

MySQL慢查询日志详解与性能优化指南

1. 什么是慢查询日志 慢查询日志是MySQL提供的一种日志记录功能&#xff0c;它能够记录执行时间超过预设阈值的SQL查询语句&#xff0c;并将这些信息写入到日志文件中。 2. 查看慢查询日志的设置和状态 2.1 慢查询日志的开启状态和日志文件位置 通过以下命令可以查看慢查询…...

编程日记 2024/7/12 2:47:02

xml CDATA

]]>之间的任何内容标记为字符数据。内容不会被解释为标记。 <![CDATA[这里的任何文本&#xff0c;即使是也被解释为文本而不是起始标签]]> 这是什么意思? 这段描述解释了XML中CDATA部分的作用和用法。让我来详细解释一下&#xff1a; CDATA&#xff08;Character Da…...

编程日记 2024/7/12 2:46:02

C++的线程管理

C的线程管理 线程类&#xff08;Thread&#xff09;线程构造器约定构造器初始化构造器复制构造器移动构造器 多线程atomiccondition_variable应用实列 futurepromise应用实列 future应用实列 线程类&#xff08;Thread&#xff09; 执行线程是一个指令序列&#xff0c;它可以在…...

编程日记 2024/7/12 2:43:59

捷配笔记-如何设计PCB板布线满足生产标准？

PCB板布线是铺设连接各种设备与通电信号的路径的过程。PCB板布线是铺设连接各种设备与通电信号的路径的过程。 在PCB设计中&#xff0c;布线是完成产品设计的重要步骤。可以说&#xff0c;之前的准备工作已经为它做好了。在整个PCB设计中&#xff0c;布线设计过程具有最高的极限…...

编程日记 2024/7/12 2:42:58

【Java数据结构】初识线性表之一：顺序表

使用Java简单实现一个顺序表 顺序表是用一段物理地址连续的存储单元依次存储数据元素的线性结构&#xff0c;一般情况下采用数组存储。在数组上完成数据的增删查改。 线性表大致包含如下的一些方法&#xff1a; public class MyArrayList { private int[] array; pri…...

编程日记 2024/7/12 2:41:57

对接高德开放平台API

高德开放平台API&#xff1a; https://lbs.amap.com/ 一、天气查询 天气查询: https://lbs.amap.com/api/webservice/guide/api/weatherinfo adcode城市码表下载: https://lbs.amap.com/api/webservice/download Component public class WeatherUtil {Resourceprivate GdCon…...

编程日记 2024/7/12 2:39:55

Linux 初识

目录 ​编辑 1.Linux发展史 1.1UNIX发展历史 1.2Linux发展历史 2.Linux的开源属性 2.1 开源软件的定义 2.2 Linux的开源许可证 2.3 开源社区与协作 3.Linux的企业应用现状 3.1 服务器 3.1.1 Web服务器 3.1.2 数据库服务器 3.1.3 文件服务器 3.1.4 电子邮件服务器 …...

编程日记 2024/7/12 2:38:52

CSS技巧专栏：一日一例 4.纯CSS实现两款流光溢彩的酷炫按钮特效

大家好&#xff0c;今天是 CSS技巧专栏&#xff1a;一日一例 第三篇《纯CSS实现两款流光溢彩的酷炫按钮特效》 先看图&#xff1a; 特此说明&#xff1a; 本专题专注于讲解如何使用CSS制作按钮特效。前置的准备工作和按钮的基本样式&#xff0c;都在本专栏第一篇文章中又详细…...

编程日记 2024/7/12 2:37:51

int类型变量表示范围的计算原理

文章目录 1. 了解2. 为什么通常情况下int类型整数的取值范围是-2147483648 ~ 21474836473. int类型究竟占几个字节4. 推荐 1. 了解 通常情况下int类型变量占4个字节&#xff0c;1个字节有8位&#xff0c;每位都有0和1两种状态&#xff0c;所以int类型变量一共可以表示 2^32 种状…...

编程日记 2024/7/12 2:35:48

STM32崩溃问题排查

文章目录 前言1. 问题说明2. STM32&#xff08;Cortex M4内核&#xff09;的寄存器3. 崩溃问题分析3.1 崩溃信息的来源是哪里&#xff1f;3.2 崩溃信息中的每个关键字代表的含义3.3 利用崩溃信息去查找造成崩溃的点3.4 keil5中怎么根据地址找到问题点3.5 keil5上编译时怎么输出…...

编程日记 2024/7/12 2:33:46

CSS 【详解】样式选择器（含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器）

CSS 样式选择器&#xff0c;用于选中页面中的 html 元素&#xff0c;以便添加 CSS 样式。 按渲染性能由高到低 依次是&#xff1a; ID 选择器 #id 通过元素的 id 属性选中元素&#xff0c;区分大小写 <p id"p1" >第一段</p>#p1{color: red; }但不推荐使…...

编程日记 2024/7/12 2:31:44

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/12/14 17:38:17

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/10/22 11:16:20

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/11/15 16:18:24

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

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

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

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/11/9 2:57:17

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

编程新知 2025/11/2 5:30:15

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

编程新知 2025/11/28 5:32:31

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

编程新知 2026/1/25 7:20:01

LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

编程新知 2025/11/26 18:23:29

上位机开发过程中的设计模式体会(1)：工厂方法模式、单例模式和生成器模式

简介 在我的 QT/C 开发工作中&#xff0c;合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式&#xff1a;工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...

编程新知 2025/8/18 3:01:22