建立网站的成本,赣州搜赢网络科技有限公司,高度国际装饰公司官网,石家庄百度seo排名1 背景 介绍一个技术栈的入门基础#xff0c;往往要以该技术栈的入门案例作为开始比较合适#xff0c;更能诱惑到刚需的粉丝#xff0c;深度的学习。Electron的入门也不例外。在入门案例的讲解过程中#xff0c;我们会学习到Electron引入需要的准备工作有哪些。
2 入门案例…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_MIRRORhttps://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
至此准备工作就做好了。
下一篇介绍入门案例打包。
