1. 創(chuàng)建項目

vue create your-project-name

2. vue-cli添加electron-builder依賴

// 切換工作目錄 cd vue3-electron/ // 添加依賴 vue add electron-builder// !!! 請保證node版本>=14.0.0 否則會報錯

其官網(wǎng)地址：Vue CLI Plugin Electron Builder (nklayman.github.io)

3. 添加UI依賴

// 這里選擇使用的是bootstrap，你可以選擇別的UI框架yarn add bootstrap@next// 如果您沒有安裝yarn, 請先 npm install -g yarn

4. 運行服務

yarn electron:serve

啟動后長這樣：

可以看出我們啟動了一個標準的，基于vue構建的項目。

5. 依賴包補充

在electron中我們經(jīng)常要進行渲染進程和主進程消息通信，需要使用 @electron/remote模塊

yarn add @electron/remote

同時在background.js中添加以下兩行代碼。

6. 打包成exe安裝包

yarn electron:build

之后，你打開 dist_electron 目錄，就會發(fā)現(xiàn)里面有個.exe的安裝包

總結

以上是生活随笔為你收集整理的【2021年】通过vue-cli创建electron项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。