一、介紹?😆 😁 😉

Electron是一個使用 JavaScript、HTML 和 CSS 構建桌面應用程序的框架。 嵌入?Chromium?和?Node.js?到 二進制的 Electron 允許您保持一個 JavaScript 代碼代碼庫并創(chuàng)建 在Windows上運行的跨平臺應用 macOS和Linux——不需要本地開發(fā)經(jīng)驗(這段話是來自官網(wǎng))。

二、搭建Vite+Vue3+TypeScript項目?😆 😁 😉

根據(jù)vite官網(wǎng)文檔

yarn create vite

項目創(chuàng)建完成后進入ts-super-procedure目錄，執(zhí)行yarn安裝相關依賴

三、安裝Electron相關依賴?😆 😁 😉

如果你自己安裝過Electron的相關依賴，想必你一定經(jīng)歷過失敗、失敗、失敗。

這里需要借助一個網(wǎng)站檢測服務器響應速度，然后拿到最快響應的ip進行本地配置加快我們的域名解析。

通過該工具可以多個地點Ping服務器以檢測服務器響應速度。檢查github.com。我都選擇國內(nèi)的，看自己想法選擇啊。

修改 C:\Windows\System32\drivers\etc\hosts

20.27.177.113 github.com

安裝electron依賴?👇 👇 👇 👇

yarn add -D electron electron-builder

根據(jù)官網(wǎng)提供的文檔,需要創(chuàng)建一個BrowserWindow裝載vite項目,你也可以寫一個html頁面。 這里我們啟動vite項目以后就會產(chǎn)生一個連接，正好把它裝載到 BrowserWindow中。

因為src下面存放的使我們的vite項目，所以在根目錄下創(chuàng)建一個electron.ts，你也可以叫man.ts，名字隨便起，知道是干啥的就行。

配置完成以后分別啟動yarn dev 和 yarn start，出現(xiàn)以下窗口表示搭建成功了。

四、優(yōu)化?😆 😁 😉

因為現(xiàn)在需要啟動兩個服務，比較麻煩，可以借助concurrently插件整合。一個命令完成多個應用的啟動。

yarn add concurrently -D

安裝完成以后修改啟動和打包命令?

"scripts": {"dev": "concurrently \"vite\" \"electron .\"","build": "yarn build:vite && yarn build:electron","build:vite": "vue-tsc && vite build","build:electron": "electron-builder","preview": "vite preview"
},

執(zhí)行yarn dev 進行檢測，出現(xiàn)下面的內(nèi)容表示配置成功，基礎腳手架就已經(jīng)搭建完成了。下面開啟你的桌面應用開發(fā)旅程吧。我要過五一去了

我是Etc.End。如果文章對你有所幫助，能否幫我點個免費的贊和收藏😍。

?👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇