electron学习笔记(一)

1.创建项目

js 复制代码
mkdir myelectron
npm init
npm install --save-dev electron  //安装

通过以上命令, 我们就有了一个 electron 的项目

之后, 设置主文件入口 , 添加热启动 nodemon

  1. nodemon 的使用和配置

要根目录下添加 nodemon.json 文件,配置发下

js 复制代码
{
	"watch": ["*.*"],  //监听项目中所有文件的改动
  "ignore": ["node_modules","dist"],  //忽略 这两个目录中的文件
  "restartable": "r",		//在命令行中 输入 r + 回车,强制重启
  "ext": "html,js,css"		//如果是 html js 或css后缀的文件名改动,就要重新加载
}

在项目的 package.json 的文件中添加 监听的命令

接下来, 我们就要在 main.js 中创建 electron 的窗口了

当我们运行 electron 的时候,开启devtools的时候,又会看到以下错误

这个错误是由于版本不统一而引起的,这里有 版本对照表 在对照表中,使用相应的 node.js 和 electron 的版本就可以了

然后就是控制台中还有一个警告

这个是安全性方面的错误, 我们的解决办法是在 渲染进程中的 html 中加上 meta 标签中加上一些规则 也就是 csp 访问安全测策, 这主要是因为 electron 的主进程是 node环境, 是可以操作用户电脑上的文件的, 而渲染进程是 web 环境,不能让其运行node ,安全考虑,

解决方法一

html 复制代码
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline';">

解决方法二

有了以上的步骤,项目的控制台就清爽了

相关推荐
研梦非凡10 小时前
CVPR 2025|无类别词汇的视觉-语言模型少样本学习
人工智能·深度学习·学习·语言模型·自然语言处理
姚瑞南10 小时前
【AI产品思路】AI 原型设计工具横评:产品经理视角下的 v0、Bolt 与 Lovable
人工智能·经验分享·笔记·aigc·产品经理
你好~每一天10 小时前
2025年B端产品经理进阶指南:掌握这些计算机专业技能,决胜职场!
java·人工智能·经验分享·学习·产品经理·大学生
努力打怪升级10 小时前
容器学习day05_k8s(二)
学习·容器·kubernetes
叫我Zoe就行11 小时前
MySQL集群——主从复制
linux·数据库·学习·mysql
Source.Liu11 小时前
【Python基础】 19 Rust 与 Python if 语句对比笔记
笔记·python·rust
维斯路11 小时前
ANSYS 热力耦合计算
学习
程序员Xu11 小时前
【LeetCode热题100道笔记】二叉树的中序遍历
笔记·算法·leetcode
Source.Liu12 小时前
【Python基础】 18 Rust 与 Python print 函数完整对比笔记
笔记·python·rust
闻道且行之12 小时前
嵌入式|Linux中打开视频流的两种方式V4l2和opencv
linux·笔记·opencv·嵌入式