当前位置: 首页 > 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;阿里云国际…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

uniapp手机号一键登录保姆级教程(包含前端和后端)

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...

Linux系统部署KES

1、安装准备 1.版本说明V008R006C009B0014 V008&#xff1a;是version产品的大版本。 R006&#xff1a;是release产品特性版本。 C009&#xff1a;是通用版 B0014&#xff1a;是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存&#xff1a;1GB 以上 硬盘&#xf…...

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题&#xff0c;说是客户的导入文件模版想支持部分导入内容的下拉选&#xff0c;于是我就找了easyexcel官网寻找解决方案&#xff0c;并没有找到合适的方案&#xff0c;没办法只能自己动手并分享出来&#xff0c;针对Java生成Excel下拉菜单时因选项过多导…...