一 说明
1.1 当前软件环境,Windows10,VSCode
1.2 主要参考:https://blog.csdn.net/u013584271/article/details/102764898 Electron 7.0.0 解决failed to install correctly 的问题
1.3 开发框架,Electron https://www.electronjs.org/ 【使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序】。electron主要是开发跨平台的桌面应用,至于移动端,需要使用原生或其他框架开发。
二 大体步骤
2.1 安装node.js运行环境,因为在electron框架中,主要使用开发语言是JavaScript+TypeScript,所以需要有js的运行环境。npm【Node Package Manager,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。】用于管理依赖包也非常方便。类似于go项目的go mod管理依赖包。
2.2 下载示例代码:https://github.com/electron/electron-quick-start
2.3 使用vscode打开项目。打开 vscode 的 终端,开始 安装 electron 框架。
在Windows下安装,可能会失败,参考 https://blog.csdn.net/u013584271/article/details/102764898 解决。
PS D:\test\electron\electron-quick-start-master> npm ls electron
electron-quick-start@1.0.0 D:\test\electron\electron-quick-start-master
└── electron@19.0.9
手动下载【https://registry.npmmirror.com/binary.html?path=electron/】对应版本的压缩包。注意目录。下面示例代码中的版本号,必须修改为自己本机需要的版本号。
解决方法1
前往淘宝镜像
https://npm.taobao.org/mirrors/electron/7.0.0/
手动下载对应的包,我用windows,所以下载electron-v7.0.0-win32-x64.zip
然后在node_modules\electron\下创建dist文件夹。
将下载的压缩包解压进刚刚创建的dist。
在node_modules\electron\中创建path.txt,内容为electron.exe(对应自己的平台,不同平台不一样)。
现在运行,已经可以正常启动了。
原文链接:https://blog.csdn.net/u013584271/article/details/102764898
2.4 electron安装完成之后,就可以开始调试了。创建 launch.json文件。
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "pwa-node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\main.js",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron"
}
]
}
直接按 F5调试应用【启动应用前可以设置断点】或者在 终端 运行 npm start命令 启动应用,运行测试效果。
PS D:\test\electron\electron-quick-start-master> npm start
> electron-quick-start@1.0.0 start
> electron .
学海无涯,错误难免,如有发现,尽请指正。
--the end