使用 Electron 構(gòu)建一個(gè)簡(jiǎn)單的桌面應(yīng)用程序

使用 Electron 可以輕松創(chuàng)建桌面應(yīng)用程序。你可以構(gòu)建可在任何操作系統(tǒng)中運(yùn)行的跨平臺(tái)應(yīng)用程序。在本篇文章中，我們將使用Vanilla JavaScript項(xiàng)目并將其轉(zhuǎn)換為Electron 應(yīng)用程序。如果你了解 Vanilla JavaScript，請(qǐng)跟隨我一起完成本篇內(nèi)容。

先決條件：

1. 在你的計(jì)算機(jī)上安裝Node.js。

2. 有一個(gè)以前在 Vanilla JavaScript 中的項(xiàng)目示例（todo-list、notes-app、tic-tac-toe 等）

使用選舉構(gòu)建桌面應(yīng)用程序

首先，在終端中寫(xiě)入以下內(nèi)容，替換?my-app?，隨便取什么名字。

此命令將為我們的 Electron 應(yīng)用程序生成結(jié)構(gòu)。

然后，輸入 ?cd?和 ?name of your project?

在 src 文件夾中，你將找到一個(gè) ?index.html?, ?style.css?， 和 ?index.js?文件。

文件名為? index.js? 包含設(shè)置?my-app?。我們必須對(duì)其進(jìn)行一些更改。

這種配置允許 Electron 與 Node.js 并帶有不同的模塊。

現(xiàn)在您可以將文件復(fù)制到? src?文件夾。

請(qǐng)記住，主 HTML 文件必須命名為 ?index.html?，因?yàn)??mainWindow? 函數(shù)將使用該文件來(lái)啟動(dòng)應(yīng)用程序。

你還可以更改起始文件的名稱而不是?index.html?。請(qǐng)記住，你可以替換 HTML 和 CSS 文件，但不要更改?index.js?文件。因?yàn)樵撐募俏覀儜?yīng)用程序的核心。

現(xiàn)在你的項(xiàng)目準(zhǔn)備好運(yùn)行，輸入?npm start?。

你必須在應(yīng)用程序運(yùn)行時(shí)看到一個(gè) Chromium 窗口彈出窗口。

在運(yùn)行之前 ?build? 命令檢查一切正常。

如果你想對(duì)你的應(yīng)用程序進(jìn)行一些調(diào)整，現(xiàn)在是時(shí)候了。接下來(lái)，在你的終端中輸入?npm run make?。

此過(guò)程完成后，你將看到一個(gè)名為“out”的新文件夾。

現(xiàn)在你的應(yīng)用程序已準(zhǔn)備好安裝在你的機(jī)器上。

進(jìn)入目錄?./out/make/squirrel.[system]?并運(yùn)行? setup.exe? 文件。

結(jié)束語(yǔ)

單擊你的桌面窗口并訪問(wèn)你全新的桌面應(yīng)用程序！

到這里，你現(xiàn)在已經(jīng)使用 Electron 構(gòu)建了快速簡(jiǎn)便的桌面應(yīng)用程序！

我希望這篇文章對(duì)大家能有所用。感謝閱讀。