工欲善其事必先利其器，在進行實戰開發的時候，我們最終的步驟是搞好一個舒服的開發環境，目前支持 Vue 的 Electron 工程化工具主要有 electron-vue、Vue CLI Plugin Electron Builder、electron-vite。
接下來我們將分別介紹基于 Vue CLI Plugin Electron Builder 和 electron-vite 的開發環境搭建。
一、vue-cli-plugin-electron-builder
vue-cli-plugin-electron-builder 是一個基于 VueCli 的插件工具，它是一個 npm 包，能夠為 Vue CLI 創建的項目添加 Electron 構建的能力。
1.1 創建 VueCli 項目
創建一個基于 VueCli 的項目，需要先安裝VueCli工具，命令如下：
npm?install?-g?@vue/cli
#?OR
yarn?global?add?@vue/cli
安裝好 Cli工具后，我們就可以使用Cli工具創建一個 Vue 項目了，如下所示。
vue?create?electron-vue
此處，我們選擇 Vue 3 + babel + eslint 的模式。
圖片
創建完成之后，目錄結構如下所示。
圖片
1.2 安裝 vue-cli-plugin-electron-builder
vue-cli-plugin-electron-builder 是一個 VueCli 插件，可以使用下面的命令進行安裝。
vue?add?electron-builder
在安裝的時候，只提供了 Electron v11、v12、v13 這 3 個版本選擇，這里我們先選 v13。安裝完成之后，目錄結構如下所示。
圖片
對于Electron項目，我們需要重點關注以下幾個文件：
-
package.json：這個文件通過 main 字段定義了編譯后的主入口文件路徑，并且通過 script 字段定義了應用程序的啟動、編譯等腳本程序。
-
src/background.js：這個文件就是 Electron 的主進程的入口文件，它是應用程序的入口點，負責管理整個應用的生命周期、創建窗口、原生 API 調用等。
-
src/main.js 是渲染進程的入口文件，就是我們通常寫的 Vue 前端代碼的入口。
1.3 目錄結構優化
接下來，我們對主進程和渲染進程進行一些優化，目的是方面后期項目的擴展。我們新建了 main 和 renderer 目錄，并將之前的 src/background.js 遷移到了 main 目錄下，且重命名為 index.js。然后再把之前和 Vue 相關的渲染進程的文件以及文件夾全部遷移到了 renderer 目錄下。
同時，目錄調整后，我們需要重新修改一下 vue.config.js 的編譯配置：
//?vue.config.js
const?{?defineConfig?}?=?require('@vue/cli-service')
module.exports?=?defineConfig({transpileDependencies:?true,pages:?{index:?{entry:?'src/renderer/main.js',},},pluginOptions:?{electronBuilder:?{nodeIntegration:?true,mainProcessFile:?'src/main/index.js',mainProcessWatch:?['src/main'],},},
})
當然，記得修改 package.json 里面的 main 配置：
{..."main":?"index.js",...
}
1.4 安裝electron
然后，我們安裝最新的electron版本，命令如下：
yarn?add?electron@29.0.0?-D
版本情況：
如果安裝過程中，出現下面的網絡錯誤。
圖片
可以在項目中.npmrc 文件代理 Electron 的安裝源，指向 taobao，如下所示。
electron_mirror=https://npmmirror.com/mirrors/electron/
安裝完成后，我們運行一下啟動本地服務。
npm?run?electron:serve
如果沒有任何的錯誤，會看到下面的頁面。
圖片
二、electron-vite
electron-vite 是一個新型 Electron 開發構建工具，旨在為 Electron 提供更快、更精簡的開發體驗，它是基于 vite 構建 Electron 應用的。我們可以使用 @quick-start/electron 工具快速創建一個 electron-vite 的應用。
npm?create?@quick-start/electron
然后按照提示輸入對應的內容，下一步即可：
??Project?name:?…?<electron-app>
??Select?a?framework:???vue
??Add?TypeScript??…?No?/?Yes
??Add?Electron?updater?plugin??…?No?/?Yes
??Enable?Electron?download?mirror?proxy??…?No?/?YesScaffolding?project?in?./<electron-app>...
Done.
新建完成后，electron-vite 的項目結構如下所示。
可以看到，整體目錄結構還是比較規范和清晰的，我們幾乎不需要進行任何調整就可以直接使用了。在我們安裝好相關的依賴后，我們可以使用下面的命令運行項目。
npm?run?dev
最終的效果如下圖。
圖片
三、主進程啟動項目
不管是通過 vue-cli-plugin-electron-builder 創建還是通過 electron-vite 創建的項目，都需要通過唯一的主進程進行應用程序的啟動。主進程的第一步操作就是監聽 app ready 事件來創建窗口：
//?main/index.js
app.whenReady().then(()?=>?{createWindow()
})
接下來，我們需要通過 createWindow 函數構造一個簡單的窗口。
//?main/index.js
function?createWindow()?{const?mainWindow?=?new?BrowserWindow({width:?900,height:?670,show:?false,autoHideMenuBar:?true,webPreferences:?{preload:?join(__dirname,?'../preload/index.js'),sandbox:?false}})mainWindow.on('ready-to-show',?()?=>?{mainWindow.show()})if?(is.dev?&&?process.env['ELECTRON_RENDERER_URL'])?{mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])}?else?{mainWindow.loadFile(join(__dirname,?'../renderer/index.html'))}
}
需要注意的是，我們在窗口初始化時，指定了 show: false 的參數，意味著窗口創建完成后不會立即顯示。然后通過監聽 mainWindow.on('ready-to-show') 的事件觸發后再通過 mainWindow.show() 方法來顯示窗口。
這樣做是因為 Electron 中的 ready-to-show 事件表示窗口內容已經加載完成且應用程序準備好顯示給用戶。在等待 ready-to-show 事件觸發后再調用 window.show()，可以確保用戶看到的是完全加載并準備好的界面，避免了展示未完成的內容。
最后，通過監聽 app.on('window-all-close') 事件，來處理非 macOS 下的所有窗口關閉后的退出整個 electron 應用。
//?main/index.js
app.on('window-all-closed',?()?=>?{if?(process.platform?!==?'darwin')?{app.quit()}
})
這和 windows 平臺的操作習慣是一樣的，在windows平臺上，通常我們把應用的窗口都關了之后也就默認把這個應用給退出了。
參考：https://cn.electron-vite.org/
)
