Electron 应用初体验

222 阅读1分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

环境准备

在开始 Electron 项目之前,我们要先安装 Node.js。 下载安装 Node.js 的过程是傻瓜式的,直接去 Node.js 官网 选择 LTS 稳定版本进行下载和安装即可。

image.png 安装完毕后,在终端中执行 node -v 指令,如果看到如下界面就算安装成功了。

image.png

初始化项目

mkdir electron-app && cd electron-app
npm init -y

项目初始化完毕后,需要将 electron 包安装到项目的开发依赖中。

npm install electron --save-dev

注意:如果遇到安装 electron 包失败或慢的问题,大概被墙了,可以参考一下我的另外一篇文章《解决 npm 下载速度慢》

项目初始化完毕后的目录结构如下:

image.png

创建并运行最小的 Electron 项目,有如下四个步骤:

  • 修改 package.json 配置, 并添加 scripts 指令

image.png

  • 创建 HTML 页面

image.png

  • 创建 package.json 配置下 main 字段对应的文件,并编写 index.js 文件

image.png

  • 执行 npm start, 启动 electron 应用

image.png

执行 "start": "electron ." 命令时,Electron 将依据应用中 package.json 配置下 main 字段中配置的值查找文件,并运行该文件。 恭喜,完成上述操作后,即可实现你的第一个 Electron 项目。