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

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

news 2025/11/7 2:25:59

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

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

编程新知 2025/11/3 1:47:28

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

编程新知 2025/11/5 17:12:12

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

编程新知 2025/11/5 22:03:11

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2025/10/16 1:31:30

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2025/10/30 22:14:59

css3笔记 （1） 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

编程新知 2025/10/11 5:18:43

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2025/11/2 5:42:57

Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

编程新知 2025/11/3 21:36:57

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

编程新知 2025/11/5 15:46:44

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

编程新知 2025/8/21 23:03:46