Windows,使用VSCode建立Electron项目

一 说明

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 .

20220723230811.jpg

学海无涯，错误难免，如有发现，尽请指正。

--the end