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

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

news 2026/5/19 5:33:33

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

Qt开发避坑｜MQTT客户端频繁下线？竟是setClientId用错了！

做Qt物联网开发的小伙伴&#xff0c;大概率都遇到过这样的坑&#xff1a;本地调试时&#xff0c;MQTT客户端连接正常、消息收发流畅&#xff1b;可当另一个设备&#xff08;或另一个调试窗口&#xff09;启动后&#xff0c;前一个客户端突然被强制下线&#xff0c;日志里没明确…...

编程新知 2026/5/19 4:06:34

开发者效率工具集claw：从Unix哲学到现代开发工作流集成

1. 项目概述&#xff1a;一个为开发者打造的“瑞士军刀”式工具集最近在GitHub上闲逛&#xff0c;发现了一个名为opsyhq/claw的项目&#xff0c;它的名字和图标&#xff08;一个爪子&#xff09;一下子就抓住了我的眼球。点进去一看&#xff0c;简介很简单&#xff1a;“A coll…...

编程新知 2026/5/19 3:40:39

告别仿真报错！手把手教你用Quartus II 21.1和ModelSim 2022.1创建Testbench（附完整代码）

Quartus II与ModelSim联合仿真实战&#xff1a;从零构建高可靠性Testbench 在数字电路设计领域&#xff0c;仿真验证环节往往决定着项目成败。据统计&#xff0c;超过60%的FPGA开发时间消耗在功能验证阶段&#xff0c;而其中近半问题源于Testbench编写不当或仿真环境配置错误。…...

编程新知 2026/5/19 3:06:53

独立开发者如何利用Taotoken的多模型能力构建低成本AI应用原型

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 独立开发者如何利用Taotoken的多模型能力构建低成本AI应用原型 对于资源有限的独立开发者或初创团队而言&#xff0c;在应用开发初…...

编程新知 2026/5/19 1:21:32

NotebookLM脑机接口部署避坑指南：TensorRT加速失效、电极位移漂移补偿、低信噪比场景下的9种fallback策略

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;NotebookLM脑机接口研究 NotebookLM 是 Google 推出的基于用户自有文档进行深度理解与推理的 AI 助手&#xff0c;虽其官方定位并非直接面向脑机接口&#xff08;BCI&#xff09;领域&#xff0c;但其底层架构…...

编程新知 2026/5/19 1:00:48

基于Vercel AI SDK与Next.js 14构建智能编程助手：从架构到部署实战

1. 项目概述&#xff1a;一个面向开发者的AI编程助手脚手架最近在GitHub上看到一个挺有意思的项目&#xff0c;叫vercel-labs/coding-agent-template。光看名字&#xff0c;你大概能猜到&#xff0c;这是一个跟AI编程助手相关的模板项目。没错&#xff0c;它本质上是一个预先配…...

编程新知 2026/5/19 0:37:13

Claude Code Skill 最佳实践：5 分钟封一个，6 条要点 + 团队共享

&#x1f449; 这是一个或许对你有用的社群&#x1f431; 一对一交流/面试小册/简历优化/求职解惑&#xff0c;欢迎加入「芋道快速开发平台」知识星球。下面是星球提供的部分资料&#xff1a; 《项目实战&#xff08;视频&#xff09;》&#xff1a;从书中学&#xff0c;往事上…...

编程新知 2026/5/19 0:33:02

Faster R-CNN PyTorch终极指南：10分钟搭建你的第一个目标检测模型

Faster R-CNN PyTorch终极指南&#xff1a;10分钟搭建你的第一个目标检测模型 【免费下载链接】faster-rcnn-pytorch 这是一个faster-rcnn的pytorch实现的库&#xff0c;可以利用voc数据集格式的数据进行训练。 项目地址: https://gitcode.com/gh_mirrors/fa/faster-rcnn-pyt…...

编程新知 2026/5/18 23:09:49

别再只用脚本了！用MATLAB面向对象编程重构你的科研数据处理流程（附完整Point类示例）

别再只用脚本了&#xff01;用MATLAB面向对象编程重构你的科研数据处理流程&#xff08;附完整Point类示例&#xff09; 科研数据处理中&#xff0c;你是否经常遇到这样的场景&#xff1a;同一个实验数据需要反复处理&#xff0c;每次都要复制粘贴大段脚本&#xff1b;变量命名…...

编程新知 2026/5/18 20:57:08

3个核心优势：重新定义Windows平台Fastboot工具的工作流

3个核心优势&#xff1a;重新定义Windows平台Fastboot工具的工作流 【免费下载链接】FastbootEnhance A user-friendly Fastboot ToolBox & Payload Dumper for Windows 项目地址: https://gitcode.com/gh_mirrors/fa/FastbootEnhance FastbootEnhance是一款专为Win…...

编程新知 2026/5/18 19:52:47