electron入门 | 手把手带electron项目初始化

news2024/11/28 16:46:09

Electron是一个基于Chromium和 Node.js,可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架,兼容 Mac、Windows 和 Linux。

目录

1.了解electron

2.开发环境

3.初始化

采坑插曲:


 

1.了解electron

Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你可以把它看作是专注于桌面应用而不是 web 服务器的,io.js 的一个变体。

它还有其它一些特性:

  • 自动更新 —— 应用支持自动更新
  • 原生菜单和通知 —— 可以创建原生应用菜单和上下文菜单
  • 应用崩溃报告 —— 可以将崩溃报告提交到远程服务器
  • 调试和分析 —— Chrominum 的内容模块可以发现性能瓶颈和缓慢的操作。你也可以在应用中使用自己喜欢的 Chrome 开发者工具。
  • Windows installer —— 可以快速便捷地创建安装包。

这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反,Electron 使用 web 页面作为它的 GUI,所以你能把它看作成一个被 JavaScript 控制的,精简版的 Chromium 浏览器。

2.开发环境

nvm切换node到:v18.16.0

npm 版本:9.5.1

关于node版本切换欢迎先学习:使用nvm替换nvmw作为nodejs的版本切换(亲测)_啥咕啦呛的博客-CSDN博客

3.初始化

本次我采用的是直接GIT上克隆一个A minimal Electron application的方式,其他方式下次尝试哈,比如脚手架构建啊,还有直接引入啊等。

GitHub - electron/electron-quick-start: Clone to try a simple Electron app

 打开上述链接,按照To Use介绍直接clone到本地:

 防止被割,我翻译如下:

# 克隆
git clone https://github.com/electron/electron-quick-start

# 打开文件夹
cd electron-quick-start

# 按照依赖
npm install

# 允许应用
npm start

采坑插曲:

说一下这边的采坑之旅啊

我这边现在下载的是electron 24.0.0版本,然后,npm下载不下来,换镜像源也不行。然后我采用广大网友的土方法,直接在electron目录中下载对应版本。

然后进行骚操作:

  • 进入目录 XXXXXXXX/node_modules/electron
  • 新建文件夹 dist
  • 新建文件path.txt,根据自己的系统类型输入:
    windows系统输入: electron.exe
    mac系统输入:Electron.app/Contents/MacOS/Electron
    linux系统输入:electron
  • 解压缩刚下载的文件到dist目录

but,我还是坚持用npm install 了eletron的7.0.0的版本,就是package.json里修改版本号:

我记得我之前用的还是7.0.0,这些年electron更新换代不少版本,我还是把当年的版本下载下来试试了。总之,electron终于是安装可以运行了。

 最后,执行

npm start

可以看到自动打开的窗口:

 electron项目初始化就大功告成了。

以上,就是今天的学习,关注我,我们一起进步!

欢迎点赞、评论,谢谢!~

学习参考:Electron 快速入门_w3cschool

不一样的 npm 快速安装electron的方案 - 简书

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

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

相关文章

easyexcel读取excel合并单元格数据

普通的excel列表,easyexcel读取是没有什么问题的。但是,如果有合并单元格,那么它读取的时候,能获取数据,但是数据是不完整的。如下所示的单元格数据: 我们通过简单的异步读取,最后查看数据内容&…

symfonos 2

目录 扫描 SMB SSH 提权 扫描 由于端口80是打开的,我们试图在浏览器中打开IP地址,但在网页上没有找到任何有用的信息。我们还尝试了dirb和其他目录暴力工具,但没有找到任何东西。 SMB 为了进一步枚举,我们使用Enum4Linux工具并找到了一些有用的信息。我们发现了一个名…

Microelectronic学习章节总结(1)-- 计算机架构复习

文章目录 Part1. 处理器架构,以及流水线的实现方法part2 DLX架构part3 ULTRA SPARC T2架构part4 PENTIUM 4架构part5 不同架构之间的性能比较 PPT:2,4,5,6 这一章主要对之前的计算机架构一些知识进行复习,因…

数字中国建设峰会|大模型带来产业智能化新机遇

第六届数字中国建设峰会在福建省福州市举办。峰会期间,百度与福州市政府签署战略协议,将基于文心一言为代表的大模型和百度智能云通用AI能力深入合作。未来,双方将聚焦算力产业,共建百度智能云(福州)智算中…

移动推车定位查找方案

CK_Label_v24 产品型号 CK_Label_v24 尺寸 124x90x12mm(不含安装支架) 屏幕尺寸 4.2 inch 显示技术 电子墨水屏显示 显示区域面积 (mm) 84.8(H) x 63.6(V) 分辨率 400*300 像素密度 120dpi 显示颜色 黑/白 外观颜色 白色&灰外圏…

Mozilla 自身是如何模糊 Firefox 浏览器的?

导语:Mozilla一直在模糊Firefox及其底层组件,它已被证明是识别质量和安全漏洞的最有效方法之一。 Mozilla一直在模糊Firefox及其底层组件,它已被证明是识别质量和安全漏洞的最有效方法之一。通常,研究人员会在不同级别上应用模糊测…

二叉树的遍历及相关衍生

二叉树的遍历及相关衍生 前言二叉树的遍历建树二叉树的遍历遍历的分类代码部分 遍历根的应用打印树中的每个数据代码部分 遍历计算树节点个数代码部分 计算二叉树的深度思路代码部分 第k层个数 结束 前言 如标题所示,在这里我们要研究的是二叉树的遍历。 为什么不…

java获取星期几

如果你要问 java什么时候学习比较好,那么答案肯定是 java的星期几。 在 Java中,你可以使用 public static void main ()方法来获取一个类的所有成员变量,然后在所有类中调用这个方法来获取对象的所有成员变量。它能以对…

MCSM面板一键搭建我的世界服务器-外网远程联机【内网穿透】

文章目录 前言1.Mcsmanager安装2.创建Minecraft服务器3.本地测试联机4. 内网穿透4.1 安装cpolar内网穿透4.2 创建隧道映射内网端口 5.远程联机测试6. 配置固定远程联机端口地址6.1 保留一个固定TCP地址6.2 配置固定TCP地址 7. 使用固定公网地址远程联机 转载自远程穿透文章&…

【C++】模拟实现map和set

1.关联式容器 关联式容器也是用来存储数据的,与序列式容器不同的是,其里面存储的是结构的 键值对,在数据检索时比序列式容器效率更高。 2 .键值对 用来表示具有一一对应关系的一种结构,该结构中一般只包含两个成员变量key和val…

2023-04-16 学习记录--C/C++-邂逅C/C++(上)

合抱之木&#xff0c;生于毫末&#xff1b;九层之台&#xff0c;起于累土&#xff1b;千里之行&#xff0c;始于足下。&#x1f4aa;&#x1f3fb; 一、固定格式 ⭐️ stdio的理解: abbr.标准输入输出&#xff08;standard input/output&#xff09;。 #include <stdio.h>…

【LeetCode:72. 编辑距离 | 暴力递归=>记忆化搜索=>动态规划 】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

【Linux篇】Shell脚本语法

前言 在安卓源码里&#xff0c;离不开两个东西&#xff0c;一个就是.sh文件&#xff0c;还有一个就是.mk文件。 这两个文件各持有一个语法&#xff0c;一个是Makefile语法&#xff0c;一个是Shell脚本语法。 这两个是真的让我头疼&#xff0c;就像看天书一样&#xff0c;呜呜…

Mysql为json字段创建索引的两种方式

目录 一、前言二、通过虚拟列添加索引&#xff08;Secondary Indexes and Generated Columns&#xff09;三、多值索引&#xff08;Using multi-valued Indexes&#xff09;四、官网地址 一、前言 JSON 数据类型是在mysql5.7版本后新增的&#xff0c;同 TEXT&#xff0c;BLOB …

国内首款多节点/无需密钥/无需登录的ChatGPT客户端开源项目

在这个AI浪潮推动下&#xff0c;涌现了一大批“参差不齐”的GPT产品&#xff0c;有的一直在更新迭代&#xff0c;有的不断升级乃至付费订阅&#xff0c;有的中途停止运营。在这个AI产品也需要优胜劣汰的时代下&#xff0c;谁能够“谁主沉浮&#xff0c;且看今朝&#xff01;”&…

Ansible的基础了解

目录 第一章.Ansible概述 1.1.Ansible是什么 1.2.Ansible的特性和过程 1.3.ansible 具有如下特点&#xff1a; 1.4.Ansible的四个组件 1.5.ansible 核心程序 1.6.ansible执行的过程 第二章.Ansible 环境安装部署 2.1.实验环境&#xff0c;安装部署 第三章.ansible 命…

BLE调制与解调的一些东西

BLE调制 BLE是GFSK的IQ调制 IQ调制 所谓IQ调制&#xff0c;就是利用IQ两个分量序列去控制两路正交信号&#xff0c;I和Q两个序列可以是任意数字&#xff0c;也可以是符合某些规律的序列。 总的原理公式就是&#xff1a; cos(ab)cos(a)cos(b)-sin(a)sin(b) Acos(b)-Bsin(b)M…

音视频 FFmpeg

文章目录 前言视频编解码硬件解码(高级)软解码(低级)软、硬解码对比视频解码有四个步骤Android 系统中编解码器的命名方式查看当前设备支持的硬解码 基础知识RGB色彩空间常见的格式对比YUV索引格式分离RGB24像素数据中的R、G、B分量 BMP 文件格式格式组成像素排列顺序RGB24格式…

双指针技巧总结

一、双指针技巧——情景1 通常&#xff0c;我们只需要一个指针进行迭代&#xff0c;即从数组中的第一个元素开始&#xff0c;最后一个元素结束。然而&#xff0c;有时我们会使用两个指针进行迭代。 双指针的典型场景 (1)从两端向中间迭代数组。 (2)一个指针从头部开始&#…