一 說明

1.1 當(dāng)前軟件環(huán)境，Windows10，VSCode

1.2 主要參考：https://blog.csdn.net/u013584271/article/details/102764898 Electron 7.0.0 解決failed to install correctly 的問題

1.3 開發(fā)框架，Electron https://www.electronjs.org/ 【使用 JavaScript，HTML 和 CSS 構(gòu)建跨平臺的桌面應(yīng)用程序】。electron主要是開發(fā)跨平臺的桌面應(yīng)用，至于移動端，需要使用原生或其他框架開發(fā)。

二 大體步驟

2.1 安裝node.js運(yùn)行環(huán)境，因?yàn)樵趀lectron框架中，主要使用開發(fā)語言是JavaScript+TypeScript，所以需要有js的運(yùn)行環(huán)境。npm【Node Package Manager，是一個NodeJS包管理和分發(fā)工具，已經(jīng)成為了非官方的發(fā)布Node模塊（包）的標(biāo)準(zhǔn)?！坑糜诠芾硪蕾嚢卜浅７奖恪ｎ愃朴趃o項(xiàng)目的go mod管理依賴包。

2.2 下載示例代碼：https://github.com/electron/electron-quick-start

2.3 使用vscode打開項(xiàng)目。打開 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/】對應(yīng)版本的壓縮包。注意目錄。下面示例代碼中的版本號，必須修改為自己本機(jī)需要的版本號。

解決方法1

前往淘寶鏡像
https://npm.taobao.org/mirrors/electron/7.0.0/
手動下載對應(yīng)的包，我用windows，所以下載electron-v7.0.0-win32-x64.zip
然后在node_modules\electron\下創(chuàng)建dist文件夾。
將下載的壓縮包解壓進(jìn)剛剛創(chuàng)建的dist。
在node_modules\electron\中創(chuàng)建path.txt，內(nèi)容為electron.exe（對應(yīng)自己的平臺，不同平臺不一樣）。

現(xiàn)在運(yùn)行，已經(jīng)可以正常啟動了。
原文鏈接：https://blog.csdn.net/u013584271/article/details/102764898

2.4 electron安裝完成之后，就可以開始調(diào)試了。創(chuàng)建 launch.json文件。

{
    // 使用 IntelliSense 了解相關(guān)屬性。 
    // 懸停以查看現(xiàn)有屬性的描述。
    // 欲了解更多信息，請?jiān)L問: 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調(diào)試應(yīng)用【啟動應(yīng)用前可以設(shè)置斷點(diǎn)】或者在 終端 運(yùn)行 npm start命令 啟動應(yīng)用，運(yùn)行測試效果。

PS D:\test\electron\electron-quick-start-master> npm start

> electron-quick-start@1.0.0 start
> electron .

20220723230811.jpg

學(xué)海無涯，錯誤難免，如有發(fā)現(xiàn)，盡請指正。

--the end