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

正确运行的效果

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

运行错误的效果

错误分析:因为代码是从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运行
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/44539.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

springboot高校讲座预约管理系统-计算机毕业设计源码21634

摘 要 本系统旨在设计和实现一个基于Android平台的高校讲座预约管理系统&#xff0c;以提供管理员和普通用户便捷的讲座预约服务和全面的管理功能。系统将包括在线讲座发布、讲座预约、座位安排、签到信息记录等功能模块&#xff0c;旨在提高高校讲座活动的组织效率和用户体验。…

【三维向量旋转】基于Matlab的三维坐标旋转

一、问题描述 若空间中存在三个点A,B,C&#xff0c;其中A点是不动点&#xff0c;B点是当前方向向量上的一个点&#xff0c;C是目标方向上的一个点。如果要让AB向量沿着BC方向进行旋转&#xff0c;使得AB最终旋转到AC。这个过程就是三维向量的旋转过程。我们关注的是这个过程&am…

MT3047 区间最大值

思路&#xff1a; 使用哈希表map和set&#xff08;去重&#xff09;维护序列 代码&#xff1a; #include <bits/stdc.h> using namespace std; const int N 1e5 10; int n, k, A[N]; map<int, int> mp; // 元素出现的次数 set<int> s; // 维护出现…

【案例】python集成OCR识别工具调研

目录 一、前言二、Tesseract_OCR2.1、安装过程2.2、python代码使用三、PaddleOCR3.1、安装过程3.2、python代码使用四、EasyOCR五、ddddOCR六、CnOCR一、前言 因项目需要OCR识别能力,且要支持私有化部署。本文将对比市场一些开源的OCR识别工具,从中选择适合项目需要的OCR,且…

Win10屏幕录制,这3种方法分享给你

数字化时代里&#xff0c;电脑的屏幕录制功能已经不再是简单的工具&#xff0c;而是成为我们表达、学习和交流的重要媒介。Win10系统依然是大部分人使用的电脑系统&#xff0c;那么关于Win10屏幕录制&#xff0c;有哪些好用高效的录制软件&#xff0c;能够帮助我们更加深入地捕…

美国商超入驻Homedepot,会成为传统家织厂家跨境赛道吗?

近年来&#xff0c;随着全球化步伐的加快和电子商务的蓬勃发展&#xff0c;越来越多的企业开始寻求跨境拓展的机会。在这样的背景下&#xff0c;美国知名的家居用品零售商超——Homedepot成为了许多国内外家织厂家关注的焦点。那么&#xff0c;美国商超入驻Homedepot究竟如何呢…

短视频剪辑软件-剪映必备快捷键大全 沈阳短视频剪辑培训

对于用剪映电脑版的朋友来说 快捷键是很重要的 那么剪映专业版有哪些快捷键呢 今天总结了一下快捷键大全 赶快收藏吧 1、基础功能 复制&#xff1a;Ctrl&#xff0b;C 粘贴&#xff1a;Ctrl&#xff0b;v 分割&#xff1a;Ctrl B 删除&#xff1a;Back 新建草稿&…

15.x86游戏实战-汇编指令jmp call ret

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 本次游戏没法给 内容参考于&#xff1a;微尘网络安全 工具下载&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1rEEJnt85npn7N38Ai0_F2Q?pwd6tw3 提…

webGL可用的14种3D文件格式,但要具体问题具体分析。

hello&#xff0c;我威斯数据&#xff0c;你在网上看到的各种炫酷的3d交互效果&#xff0c;背后都必须有三维文件支撑&#xff0c;就好比你网页的时候&#xff0c;得有设计稿源文件一样。WebGL是一种基于OpenGL ES 2.0标准的3D图形库&#xff0c;可以在网页上实现硬件加速的3D图…

985研究生8年终毕业,学位证颁发11天后被作废?

“正常是学校颁证给学院&#xff0c;但学院就没告诉我&#xff0c;还把学校颁发的证书给撤销了&#xff0c;这中间学院并没有书面或电话告知我本人。”34岁读研&#xff0c;如今已42岁的内蒙古任女士回想起求学不易&#xff0c;很是心酸。 2015年3月&#xff0c;任女士考取2015…

【ffmpeg系列二点五】(失败,建议放弃)ubuntu下进行源码构建,给ffmpeg7.0.1添加hevc支持。

背景 windows下构建失败&#xff0c;ffmpeg对于flv-h265的处理得到新的报错。 开始ubuntu22下编译 pre&#xff1a;清除我们之前编译的nightly版本 sudo rm -rf /usr/local/bin/ffmpeg sudo rm -rf /usr/local/bin/ffprobe sudo rm -rf /usr/local/bin/ffserver sudo rm -…

3D线上展示技术如何应用到汽车营销中?有哪些优势?

传统的汽车销售主要是通过实体店面展示汽车&#xff0c;但这样的展示方式成本高昂&#xff0c;而且还有空间限制。近年来&#xff0c;随着互联网的不断发展&#xff0c;线上看车逐渐成为当下年轻消费群体的看车新选择&#xff0c;并且线上看车正在从2D平面转向3D立体体验。 一、…

Phospho:LLM应用的文本分析利器

今天向大家介绍phospho文本分析平台&#xff0c;专门为大型语言模型&#xff08;LLM&#xff09;应用程序设计。它可以帮助开发者从用户或应用程序的文本消息中检测问题、提取洞见、收集用户反馈&#xff0c;并衡量成功。作为一个开源项目&#xff0c;phospho允许开发者查看和修…

零基础STM32单片机编程入门(十二) HC-SR04超声波模块测距实战含源码

文章目录 一.概要二.HC-SR04主要参数1.模块引脚定义2.模块电气参数3.模块通讯时序4.模块原理图 三.STM32单片机超声波模块测距实验四.CubeMX工程源代码下载五.小结 一.概要 HC-SR04超声波模块常用于机器人避障、物体测距、液位检测、公共安防、停车场检测等场所。HC-SR04超声波…

泛型

背景 优点 类型绝对安全避免强制类型转换 泛型类 定义 使用 举例 泛型类 // 泛型类 T就是类型参数 public class Generic<T>{// key这个成员变量的类型为T,T的类型由外部指定private T t;public void set(T t){this.t t;}public T get(){return t;} }使用 // 创建一个泛…

k8s 部署RuoYi-Vue-Plus之server部署

1.先使用项目编排构建镜像, 修改prod使用的mysql, redis地址 获取运行的服务 kubectl get svc -n ruoyi对应连接修改 然后运行打包package命令, 生成jar包, 再打包为docker容器, 上传到所有节点上, 也可以上传到个人私有仓库 2.部署server-deploy.yaml 镜像名自行修改, apiV…

el-input-number @input.native触发,修改值失效

试过在方法里用this.$set()、this.$next(()>{})没生效 解决方案&#xff1a;如下

DDL也会有undo吗?模拟Oracle中DML、DDL与undo的关系,10046跟踪DDL语句

已经有两个月没有更新博客了&#xff0c;主要实在忙毕设和毕业的一些事情&#xff01;这两个月也是非常的精彩呀&#xff0c;充分体会到了职场的和校园的不同&#xff0c;作为一名刚毕业就满 1 年工作经验的牛马人&#xff0c;在两个月期间经历了两次调岗、两次降薪&#xff0c…

VScode 格式化插件Prettier设置无效

VScode在配置格式化代码的插件的时候&#xff0c;可以选择Prettier或者ESlint等插件 比如选择Prettier格式化代码 在某文件修改代码之后&#xff0c;ctrls 保存代码&#xff0c;保存之后会自动格式化代码&#xff0c;但是我们发现控制台有报错 为什么已经设置了格式化插件为Pr…

使用 MinIO 赢得 RAG 权利

人们常说&#xff0c;在人工智能时代&#xff0c;数据是你的护城河。为此&#xff0c;构建生产级 RAG 应用程序需要合适的数据基础架构来存储、版本控制、处理、评估和查询构成专有语料库的数据块。由于 MinIO 采用数据优先的 AI 方法&#xff0c;因此对于此类项目&#xff0c;…