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

Electron[2] Electron使用准备

1 背景

        介绍一个技术栈的入门基础,往往要以该技术栈的入门案例作为开始比较合适,更能诱惑到刚需的粉丝,深度的学习。Electron的入门也不例外。在入门案例的讲解过程中,我们会学习到Electron引入需要的准备工作有哪些。

2 入门案例

        入门案例比较简单,就是直接将hello wolrd的静态网页打包成一个桌面应用。

2.1 软件

        使用Vscode来操作

2.2 依赖

        默认用户本地已经安装了Node环境,按照官方的说法,最新的Electron需要本地安装最新的Node稳定版本。所以如果本地不是最新版的Node的话,请升级。

        注:我一直使用的是免安装方式来使用Node的,所以,我只需要下载最新版本的Node下来,重新生成nvm的快捷连接即可。这个过程你们可能会遇到如下问题:

Node切换版本-CSDN博客

2.3 配置镜像

        正式下载Electron之前,需要配置electron的镜像地址,因为国内不好下,因此需要在.npmc里头添加如下配置:

# 使用国内的镜像地址下载electron
ELECTRON_MIRROR = "https://npmmirror.com/mirrors/electron/"
# 使用国内的镜像地址下载electron-builder
ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/

2.4 安装Electron

        本地新建一个空文件夹,作为项目的文件夹,然后使用vscode打开该文件夹。然后在vscode的terminal终端上,执行如下命令:

npm init -y

 执行完之后,自动就有了node项目需要的相关配置文件了。

再执行如下命令:

npm install --save-dev electron

执行完之后,安装的版本如下:

"electron": "^27.0.2"

以前经历过一些教训,就是前端的发展可谓日新月异,经常有网友看到我的文章,但是发现没办法直接解决他们的问题,其实就是因为依赖包版本的更新,导致语法的迥异。因此附上版本号,就是告知,这篇博客仅针对这个版本的。

2.5 安装打包工具

打包工具选用Electron Forge。当然还有其他的选择像Electron builder,这个等后面再说。目前先考虑Electron Forge。

2.5.1 Git检查

由于Electron Forge依赖Git,所以需要实现安装好Git,如果没有安装的,请先安装。

Git

2.5.2 安装Electron Forge

将 Electron Forge 添加到您应用的开发依赖中

npm install --save-dev @electron-forge/cli

安装的版本号如下:

"@electron-forge/cli": "^6.4.2",
 2.5.2.1 设置Forge脚手架

使用其"import"命令设置 Forge 的脚手架

npx electron-forge import

设置日志:

npx electron-forge import
✔ Checking your system
✔ Locating importable project
✔ Processing configuration and dependencies✔ Installing dependencies✔ Copying base template Forge configuration✔ Fixing .gitignore
✔ Finalizing import› We have attempted to convert your app to be in a format that Electron Forge understands.Thanks for using…

新增配置,import之后package.json的script节点自动多了几行配置:

 "start": "electron-forge start","package": "electron-forge package","make": "electron-forge make"

至此,准备工作就做好了。

下一篇介绍,入门案例打包。

相关文章:

Electron[2] Electron使用准备

1 背景 介绍一个技术栈的入门基础,往往要以该技术栈的入门案例作为开始比较合适,更能诱惑到刚需的粉丝,深度的学习。Electron的入门也不例外。在入门案例的讲解过程中,我们会学习到Electron引入需要的准备工作有哪些。 2 入门案例…...

npm create vue@latest 原理

文章目录 使用实际调用流程 使用 npm create vitelatest当执行上述命令时,会通过一个可交互的命令行终端下载模版,实际最终是调用 create-vue 库实现的 实际调用流程 npm create、innit 实际是 npm init 别名 ,npm init 后面加包名时,实际…...

【Unity基础】7.动画状态参数

【Unity基础】7.动画状态参数 大家好,我是Lampard~~ 欢迎来到Unity基础系列博客,所学知识来自B站阿发老师~感谢 (一)创建动画状态 (1) 创建动画状态 不好意思各位~最近工作比较忙,稍微耽误了这两周的博客。话…...

C语言映射表在串口数据解析中的应用

一、映射表在串口数据解析中的应用 1、数据结构 typedef struct {char CMD[CMDLen];unsigned char (*cmd_operate)(char *data); }Usart_Tab; 2、指令、函数映射表 static const Usart_Tab InstructionList[CMDMax] {{"PWON",PowOn},{"PWOFF",PowOff}…...

叁[3],感兴趣区域ROI

1,简介 ROI,感兴趣区域(region of interest),截取图像 2,获取方法 方法1:使用Rect cv::Mat srccv::imread("*.bmp");//读取原图 cv::Mat matROI src(cv::Rect(100,200,50,100));//截取原图&am…...

文件数据交换格式说明

对于文件的说明 二进制文件和文本文件的对比 对比项二进制文件文本文件定义二进制文件直接由二进制数字0和1组成,不存在统一的字符编码。文本文件是基于字符编码的文件,一般采用定长编码方式,如ASCII编码、UNICODE编码。优势1. 存储利用率高…...

2023NOIP A层联测24 总结

T1 给出树的一度点和三度点的数量,构造树的形态,节点数不超过 2000 2000 2000。我考虑先构造出三度点,发现这一度点至少是三度点2,打完后测样例不对,发现加一度点时要特判是否为三度点,花 5min 打完&#…...

vue3 项目如何配置测试环境打包

vue3 项目如何配置测试环境打包 根目录下创建.env.staging # 测试环境 NODE_ENV staging VUE_APP_MODE staging VUE_APP_TITLE 系统名称# 测试环境API接口地址 VUE_APP_API_URL 接口地址package.json文件中 scripts配置中添加以下代码 "scripts": {"serve&q…...

【CSS】样式的计算过程

标签的 CSS 样式 现在有这么一段 HTML 代码&#xff1a; <div class"test"><h1>Hello World</h1> </div>目前我们没有给 h1 设置任何样式&#xff0c;可以看到 h1 自带了一些样式&#xff0c;eg&#xff1a;font-size、font-weight、margi…...

【ArcGIS微课1000例】0076:KMZ转换KML的方法

文章目录 ArcGIS转kmzkmz转kmlArcGIS转kmz ArcGIS可以很方便的将dwg,shp、等矢量数据转为kmz。 拓展阅读: 【ArcGIS微课1000例】0075:将AutoCAD(Dwg、Dxf)文件转换为shp、KML(kml、kmz)文件...

Python基础入门例程46-NP46 菜品的价格(条件语句)

最近的博文&#xff1a; Python基础入门例程45-NP45 禁止重复注册&#xff08;条件语句&#xff09;-CSDN博客 Python基础入门例程44-NP44 判断列表是否为空&#xff08;条件语句&#xff09;-CSDN博客 Python基础入门例程43-NP43 判断布尔值&#xff08;条件语句&#xff0…...

Docker数据管理、网络与Cgroup资源限制

目录 一、Docker的数据管理 1、数据卷 2、数据卷容器 3、端口映射 4、容器互联 二、Docker网络 2.1Docker网络实现原理 2.2Docker 的网络模式 3.3网络模式详解&#xff1a; host模式 container模式 none模式 bridge模式 自定义网络 创建自定义网络 三、Cgroup资源…...

ubuntu strings | grep使用说明

例子1 查找/bin/ls路径中中&#xff0c;包含libc的字符串&#xff0c;不区分大小写&#xff1a; strings /bin/ls | grep -i libc strings /bin/ls | grep -i libcstrings表示查找字符/bin/ls表示路径| grep表示抓取 -i 表示不区分大小写libc表示要查询的内容 例子2 strings …...

<Vue>使用依赖注入的方式共享数据

什么是vue依赖注入&#xff1f; Vue是一个用于构建用户界面的渐进式框架。 它提供了一种简单而灵活的方式来管理组件之间的数据流&#xff0c;即依赖注入&#xff08;Dependency Injection&#xff0c;DI&#xff09;。 依赖注入是一种设计模式&#xff0c;它允许一个组件从另一…...

从0到1:腾讯云服务器使用教程

腾讯云服务器入门教程包括云服务器CPU内存带宽配置选择&#xff0c;选择云服务器CVM或轻量应用服务器&#xff0c;云服务器创建后重置密码、远程连接、搭建程序环境等&#xff0c;腾讯云服务器网txyfwq.com分享从0到1腾讯云服务器入门教程&#xff1a; 目录 腾讯云服务器入门…...

VScode + opencv + c++ + win配置教程

准备&#xff1a; 1、下载opencv 2、下载MinGw 3、 3、下载CMake 下载完解压放到一个文件夹里面&#xff0c;便于环境管理&#xff0c;文件夹我重命名了&#xff0c;解压出来文件名不一样正常 环境变量配置 C:\Users\wuxulong\cpp_env\MinGw\mingw64\bin C:\Users\wuxulon…...

机器学习---SVM目标函数求解,SMO算法

1. 线性可分支持向量机 1.1 定义输入数据 假设给定⼀个特征空间上的训练集为&#xff1a; 其中&#xff0c;(x , y )称为样本点。 x 为第i个实例&#xff08;样本&#xff09;。 y 为x 的标记&#xff1a; 当y 1时&#xff0c;x 为正例&#xff1b;当y −1时&#xff0c;x…...

044_第三代软件开发-保存PDF

第三代软件开发-保存PDF 文章目录 第三代软件开发-保存PDF项目介绍保存PDF头文件源文件使用 关键字&#xff1a; Qt、 Qml、 pdf、 painter、 打印 项目介绍 欢迎来到我们的 QML & C 项目&#xff01;这个项目结合了 QML&#xff08;Qt Meta-Object Language&#xff…...

2023红帽论坛:构建开放AI生态,助力企业数字革新之路

随着人工智能技术的飞速发展&#xff0c;各行各业正面临着一场前所未有的数字化转型浪潮。尤其是AIGC&#xff08;人工智能生成内容&#xff09;技术自2022年底以来的蓬勃兴起&#xff0c;不仅重塑了用户体验&#xff0c;也为企业运营带来了深刻的变革。 在这样的大背景下&…...

阿里云国际站和华为云国际站之间该如何选择?

阿里云国际站和华为云国际站都是知名的云计算服务提供商&#xff0c;它们各自具有一些独特的优势和劣势。以下是它们之间的一些对比&#xff0c;九河云根据不同的使用场景提供的建议&#xff1a; 阿里云国际站&#xff1a; 优势&#xff1a; 全球覆盖&#xff1a;阿里云国际…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...