Electron安装使用教程

京漂大叔 2024-09-12 PM 369℃ 0条

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
使用Electron需要先按照nodejs环境。nodejs环境的安装滤过
然后安装npm包
1、开始创建Electron项目
创建目录 my-electron,然后进入my-electron目录,初始化 npm init 回车
生成一个package.json的文件
2、安装Electron包依赖
npm install electron --save-dev 命令回车
由于国内太慢,导致安装失败,可以换成国内镜像
npm install -g cnpm --registry=https://registry.npmmirror.com 回车,安装国内镜像
微信图片_20240912153431.png

安装镜像成功之后 输入命令 cnpm install --save-dev electron 回车,如果报下图中的 错误
33333333645.png

,参考 https://blog.csdn.net/JYB150740115/article/details/111280056 这篇文章,可以解决,我就是这么解决的。
然后继续执行 cnpm install --save-dev electron 安装命令,这次成功安装
23232323_20240912153827.png
3、在初始化生成的package.json里面main指定的 main 文件是 Electron 应用的入口。 这个文件控制 主程序 (main process),它运行在 Node.js 环境里,负责控制您应用的生命周期、显示原生界面、执行特殊操作并管理渲染器进程 (renderer processes),在根目录的创建 main.js 文件中写一行代码:console.log('Hello from Electron')

由于 Electron 的主进程是一个 Node.js 运行时,您可以使用 electron 命令执行任意的 Node.js 代码 (甚至可以将其作为 REPL 使用)。 要执行这个脚本,需要在 package.json 的 scripts 字段中添加一个 start 命令,内容为 electron . 。 这个命令会告诉 Electron 在当前目录下寻找主脚本,并以开发模式运行它。
4、执行命令 npm run start 运行,您的终端应该会输出 欢迎来到 Electron
5、打包成桌面应用
cnpm install electron-packager --save-dev 执行命令安装Electron打包依赖包,安装好之后
打开package.json文件 在scripts项目里面加上"package":"electron-packager ./ demo --platform=win32 --arch=x64 --version=1.6.2"

♦ package:script脚本的名称

  ♦ demo:打包后的程序的名字

  ♦ platform:操作系统(这边是windows系统)

  ♦ arch:系统的位数(这边是64位)

  ♦ version:electron的版本号
然后执行 npm run packager 运行完了,当前目录下会生成一个文件夹,名称为程序名+操作系统+位数。

  

标签: none

非特殊说明,文章均为原创。

评论啦~