去皮卡多 发表于 2024-12-15 23:31:57

electron学习笔记(一)

1.创建项目
mkdir myelectron
npm init
npm install --save-dev electron//安装
通过以上下令, 我们就有了一个 electron 的项目
之后, 设置主文件入口 , 添加热启动 nodemon
2. nodemon 的使用和配置
要根目录下添加 nodemon.json 文件,配置发下
{
        "watch": ["*.*"],//监听项目中所有文件的改动
"ignore": ["node_modules","dist"],//忽略 这两个目录中的文件
"restartable": "r",                //在命令行中 输入 r + 回车,强制重启
"ext": "html,js,css"                //如果是 html js 或css后缀的文件名改动,就要重新加载
}
在项目的 package.json 的文件中添加 监听的下令
https://i-blog.csdnimg.cn/direct/16b9ebe204154652aa766b8caf816908.png
接下来, 我们就要在 main.js 中创建 electron 的窗口了
https://i-blog.csdnimg.cn/direct/9cf993844cc34050a7cb6f8b67f4b330.png
https://i-blog.csdnimg.cn/direct/fcddf3bb85ca49edbde55b6cc818d6e1.png
当我们运行 electron 的时间,开启devtools的时间,又会看到以下错误
https://i-blog.csdnimg.cn/direct/029a013b29464a73b8417f48e790a2c1.png
这个错误是由于版本不统一而引起的,这里有 版本对照表 在对照表中,使用相应的 node.js 和 electron 的版本就可以了
然后就是控制台中另有一个警告
https://i-blog.csdnimg.cn/direct/d49ac3084f39408f8730b89e42dac60b.png
这个是安全性方面的错误, 我们的解决办法是在 渲染进程中的 html 中加上 meta 标签中加上一些规则 也就是 csp 访问安全测策, 这主要是由于 electron 的主进程是 node情况, 是可以利用用户电脑上的文件的, 而渲染进程是 web 情况,不能让其运行node ,安全考虑,
解决方法一
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline';">
解决方法二
https://i-blog.csdnimg.cn/direct/e926619c806749afbcb9976809431e14.png
有了以上的步调,项目的控制台就清爽了

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: electron学习笔记(一)