Electron+Vue3+Element-plus

  • 安裝NVM

  1. 下載NVM的Windows安裝程序。NVM的GitHub倉(cāng)庫(kù)中提供了Windows安裝程序,可以在這里下載:https://github.com/coreybutler/nvm-windows/releases

  2. 運(yùn)行安裝程序,按照提示完成安裝。安裝過(guò)程中可以選擇安裝目錄,默認(rèn)是C:\Users\用戶名\AppData\Roaming\nvm

  3. 安裝完成后,重新打開(kāi)命令提示符窗口以獲取nvm和npm的路徑。

  4. 使用nvm命令來(lái)安裝需要的Node.js版本。
    nvm install 16 lts

安裝

# 安裝 Vue Cli
npm install -g @vue/cli 

# 全局安裝 Electron
cnpm install electron -g 

# 搭建 vue 環(huán)境
vue create .

# 添加Element-plus
vue add element-plus

# vue項(xiàng)目中添加 electron 模塊
vue add electron-builder

# 運(yùn)行
npm run electron:serve

# 打包 electron 應(yīng)用
npm run electron:build

windows 解決方案

打包 windows 應(yīng)用時(shí)我們需要將整個(gè)項(xiàng)目的源碼上傳到 windows 電腦上
上傳到 windows 電腦上后同樣需要安裝 cnpm 不然 electron 是安裝不上的
打開(kāi)項(xiàng)目目錄刪除掉 node_modules 重新 cnpm install
如果還是無(wú)法打包刪除掉 node_modules/electron 目錄重新 cnpm install
然后運(yùn)行 npm run electron:build 進(jìn)行打包

  • 通用窗口控制代碼

  1. 無(wú)邊框窗口
mainWindow = new BrowserWindow({
  frame: false,
   ...
})
  1. 隱藏工具欄
    mainWindow.removeMenu()
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容