electron + vue 快速實h5開發桌面軟件 及打包exe

一.安裝vue

　　先搭建vue的開發環境，node，npm或者yarn，最新版vue，不會找度娘

二.建立一個vue項目

vue create  myelectronapp

　　有特殊配置就本身配置，沒有就一路回車，就不具體講了。可能有點慢，不要急。

 

 

 依次運行最後兩個能夠查看默認項目

三.安裝election包

　　vue腳手架3.0的插件vue-cli-plugin-electron-builder 幫助vue腳手架直接引入Electron的依賴,並生成相關文件和配置

　　1，安裝 electron-builder

vue add electron-builder

　　2，選擇最新版本

 

注意特殊狀況它來啦

 

 

 　　若是你卡在了我標紅的位置，恭喜你解鎖了特殊配方，不要慌，我也卡住過，好像是它下載的那個地址是錯誤的，具體我也不知道。若是沒有報錯直接完成就能夠跳過下面這段，

　　解決方法：

　　1，設置npm爲華爲雲鏡像

npm config set registry https://mirrors.huaweicloud.com/repository/npm/
npm cache clean -f

　　2，設置瀏覽器引擎驅動鏡像地址

npm config set chromedriver_cdnurl https://mirrors.huaweicloud.com/chromedriver

　　3，設置Electron鏡像地址

npm config set electron_mirror https://mirrors.huaweicloud.com/electron/

　4，設置electron_builder_binaries鏡像地址

npm config set electron_builder_binaries_mirror https://mirrors.huaweicloud.com/electron-builder-binaries/

　　5，安裝electron

npm install --save-dev electron

　　6，安裝yarn （沒安的話）

npm install -g yarn

　　7，設置yarn鏡像

yarn config set registry https://mirrors.huaweicloud.com/repository/npm/

　　8，下載electron-builder

yarn add electron-builder --dev

　　

 

　　　安裝成功！！！！   （之後其餘地方安裝就不用上面的配置了，直接 vue add electron-builder 便可）

四.啓動election項目

yarn electron:serve
或者
npm run electron:serve

　　啓動成功到彈出軟件框有點慢，不急喝杯茶再來

 

　　等倒計時，

 

 

　　ok，和瀏覽器開發差很少，熟悉的節目，熟悉的老婆

五.打包election項目

yarn electron:build
或者
npm run yarn electron:build

　　

 

打包成功

 

　　雙擊便可打開。有沒有發現個人代碼截圖後面有什麼東西，沒錯那是我第二個老婆，至於不知道怎麼弄個老婆的，等我下章告訴大家。歐克！告辭。

　　老婆配置 ：https://www.cnblogs.com/fanjlqinl/p/14638057.html  年輕人注意身體！