1. 程式人生 > 其它 >2022-04-14 建立一個桌面應用(electron-vue)

2022-04-14 建立一個桌面應用(electron-vue)

前言:關於如何使用electron-vue框架去搭建一個桌面應用,網路上已經有很多教程說明。
我在這裡記錄一下操作流程,具體程式碼來至electron-vue官網。

# 安裝 vue-cli 和 腳手架樣板程式碼
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

# 安裝依賴並執行你的程式
cd my-project
yarn # 或者 npm install
yarn run dev # 或者 npm run dev

執行上面這行程式碼,開始跑專案,我遇到了一個坑:
就是它會報這樣的錯誤:xxx檔案不存在。
我緊接著就用cnpm i裝了一遍依賴,裝完後我就直接執行【yarn run dev】來跑專案,結果這時候它又告訴我【Error: Electron failed to install correctly, please delete node_odules\_emodules/electron and try installing again】
翻譯過來是:【錯誤:Electron未能正確安裝,請刪除節點_odules\ _emodules/Electron,然後重試安裝】
原因是:找不到electron檔案這個檔案,咋一看,我的依賴裡不整整齊齊地躺著一個electron嗎。
這時候我按照報錯提示,把依賴刪了,然後cnpm i,再跑起來。
結果還是不行,我就只能救助網友了。
我找到了一篇文章,根據裡面的提示解決了這個問題,具體就是:
先把依賴刪了,然後給electron配置個環境變數

(是系統變數,變數名【ELECTRON_MIRROR】,變數值【http://npm.taobao.org/mirrors/electron/】),接著就更新依賴,再跑起來,就能打開了。
文章地址:https://blog.csdn.net/XLL20001022/article/details/122777710
說下具體原因:
緩引該文博主的話:
【由於 electron 在 install 之後,是會執行 node install.js 去下載一個平臺、版本對應的包,失敗的原因就下載這個包,報錯了,然後 npm 或者 yarn 在 install 的時候沒有任何報錯,執行的時候就告訴你上面的錯誤資訊,安裝失敗了,刪了再來永遠是不會成功的。】
就是說electron用npm安裝的路徑和cnpm的不同,前者比後者多了一個v。嗯,,,對!沒錯就是這樣。
注:electron-vue搭建程式碼具體直接去electron-vue官網看就完事兒了。
electron-vue官網:https://simulatedgreg.gitbooks.io/electron-vue/content/cn/
結語:以前單純用electron搭建專案來玩,開發進度較慢,如果有一套寫好的框架去供我呼叫api那麼開發速度自然而言提升很快。