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

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

news 2026/4/3 6:12:55

快速测试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

OpenClaw极简安装：Qwen3.5-9B云端体验与快速验证方案

OpenClaw极简安装&#xff1a;Qwen3.5-9B云端体验与快速验证方案 1. 为什么选择云端体验OpenClaw&#xff1f; 上周我在本地尝试部署OpenClaw时&#xff0c;被各种环境依赖折腾得够呛——Node版本冲突、Python包缺失、端口占用问题接踵而至。正当准备放弃时&#xff0c;偶然发…...

编程新知 2026/4/3 5:24:19

一个关键词的SEO优化过程中需要注意什么

一个关键词的SEO优化过程中需要注意什么 在数字营销的世界里&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;是一个核心的组成部分。其中&#xff0c;关键词优化是SEO策略的关键环节。对于一个关键词的SEO优化过程中&#xff0c;有许多细节需要注意&#xff0c;以确保最…...

编程新知 2026/4/3 5:04:07

百考通：一站式计算机与工程类项目学习与精准开发平台

在信息技术高速发展的今天&#xff0c;无论是高校学生、编程爱好者还是行业从业者&#xff0c;都面临着项目实践资源分散、学习路径不清晰、开发效率低下的困境。百考通&#xff08;https://www.baikaotongai.com&#xff09; 应运而生&#xff0c;以一站式项目资源聚合平台的姿…...

编程新知 2026/4/3 3:55:13

ArduinoEigen：嵌入式平台轻量级Eigen线性代数库移植

1. ArduinoEigen&#xff1a;面向嵌入式平台的轻量化Eigen线性代数库移植1.1 项目定位与工程价值ArduinoEigen 是一个专为资源受限嵌入式平台定制的 Eigen 线性代数库移植版本&#xff0c;其核心目标并非简单地将桌面级 C 数值计算库“搬上”MCU&#xff0c;而是通过深度裁剪、…...

编程新知 2026/4/3 3:53:11

EasyAnimation性能优化指南：确保动画流畅运行的7个关键点

EasyAnimation性能优化指南&#xff1a;确保动画流畅运行的7个关键点 【免费下载链接】EasyAnimation A Swift library to take the power of UIView.animateWithDuration(_:, animations:...) to a whole new level - layers, springs, chain-able animations and mixing view…...

编程新知 2026/4/3 3:47:02

开源工具Wand-Enhancer功能增强技术解析与实战指南

开源工具Wand-Enhancer功能增强技术解析与实战指南 【免费下载链接】Wand-Enhancer Advanced UX and interoperability extension for Wand (WeMod) app 项目地址: https://gitcode.com/gh_mirrors/we/Wand-Enhancer 一、问题定位&#xff1a;WeMod功能增强的核心挑战 …...

编程新知 2026/4/3 3:47:02

OpenClaw压力测试：千问3.5-9B持续运行24小时稳定性

OpenClaw压力测试&#xff1a;千问3.5-9B持续运行24小时稳定性 1. 为什么需要压力测试&#xff1f; 上周我在本地部署了OpenClaw千问3.5-9B组合&#xff0c;想用它自动处理一些日常文档整理工作。最初几小时运行很顺畅&#xff0c;但第二天早上发现系统卡死了——这让我意识到…...

编程新知 2026/4/3 3:14:42

WebPlotDigitizer终极指南：从科研图表到结构化数据的完整解决方案

WebPlotDigitizer终极指南&#xff1a;从科研图表到结构化数据的完整解决方案 【免费下载链接】WebPlotDigitizer Computer vision assisted tool to extract numerical data from plot images. 项目地址: https://gitcode.com/gh_mirrors/we/WebPlotDigitizer 在科研和…...

编程新知 2026/4/3 3:04:32

三维建模师必看：Blender中坐标变换的数学原理与操作技巧

三维建模师必看&#xff1a;Blender中坐标变换的数学原理与操作技巧 在Blender的世界里&#xff0c;每个顶点、每条边、每个面都在三维空间中占据着精确的位置。当我们移动一个物体、缩放一个模型或旋转一个摄像机时&#xff0c;背后是一套精密的数学机制在运作。对于艺术背景的…...

编程新知 2026/4/2 23:08:56

从4.3(a)到2.1再到4.3(a)：一次App Store审核“过山车”的实战复盘与破局

1. 当4.3(a)突然降临&#xff1a;一场没有预警的"Spam"风暴 那天早上我像往常一样打开邮箱&#xff0c;看到苹果审核团队的回复时&#xff0c;整个人瞬间清醒——醒目的"Guideline 4.3(a) - Design - Spam"像一盆冷水浇下来。这已经是我们的RPG游戏第三次提…...

编程新知 2026/4/2 22:42:14