1. 創(chuàng)建項(xiàng)目

vue create your-project-name

2. vue-cli添加electron-builder依賴(lài)

// 切換工作目錄 cd vue3-electron/ // 添加依賴(lài) vue add electron-builder// !!! 請(qǐng)保證node版本>=14.0.0 否則會(huì)報(bào)錯(cuò)

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

3. 添加UI依賴(lài)

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

4. 運(yùn)行服務(wù)

yarn electron:serve

啟動(dòng)后長(zhǎng)這樣：

可以看出我們啟動(dòng)了一個(gè)標(biāo)準(zhǔn)的，基于vue構(gòu)建的項(xiàng)目。

5. 依賴(lài)包補(bǔ)充

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

yarn add @electron/remote

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

6. 打包成exe安裝包

yarn electron:build

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

總結(jié)

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

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