一份針對于electron-vue項目整理的搭建、運行、打包過程的踩坑總結分享
首先為了保證安裝效率，采用cnpm或者yarn指令來安裝，前提是安裝了node環境
安裝全局yarn，最好設置淘寶鏡像
npm install -g yarn
安裝全局vue-cli
npm install vue-cli -g
安裝3.0+版本vue-cli（現在最新已經到4.5.6版本）
npm install @vue/cli -g
若想更新vue-cli到最新版，要先卸載當前版本
npm uninstall vue-cli -g
創建electron-vue項目（方法一）：
1、安裝2.0+版本vue-cli
npm install vue-cli -g
2、cmd打開F盤輸入指令
vue init simulatedgreg/electron-vue my_project_name
根據自己項目需要設置項目內容
1.png
安裝完成之后，項目導入編輯器，目錄結構如下
2.png
3、yarn安裝項目依賴
yarn install
時間長一點，耐心等待......
3.png
4、運行項目
npm run dev
看到可視窗口
4.png
5、項目打包
npm run build
下圖中需要下載這個文件包，但是下載過程很漫長
5.png
打開連接下載壓縮包
https://github.com/electron-userland/electron-builder-binaries/releases/tag/winCodeSign-2.4.0
6.png
之后壓縮在C盤目錄
C:\Users\Administrator\AppData\Local\electron-builder\Cache\winCodeSign
再次打包，如見下圖，則打包成功
7.png
打開項目build文件，就會看見 .exe安裝包
和普通安裝程序一樣雙擊打開安裝
8.png
創建electron-vue項目（方法二）：
1、升級vue-cli到3.0+版本，先卸載當前版本
npm uninstall vue-cli -g
npm install @vue/cli -g
2、同樣cmd指到D盤，安裝vue項目
vue create my_electron_vue
根據需要選擇項目配置
9.png
如見下圖，則安裝成功
10.png
3、安裝electron-builder
進入項目文件my_electron_vue，執行如下指令
vue add electron-builder
11.png
選擇最新9.0.0
12.png
安裝成功后，項目結構如下
main.js為vue主文件
background.js為electron的主進程文件
13.png
4、項目打包
npm run electron:build
打包成功
14.png
進入項目文件夾dist_electron中，electron_robot_client Setup 0.1.0.exe為項目安裝程序
15.png
總結：
第一種方法框架更新較慢，在打包問題上需要從git上下載額外工具，時間成本較高
第二種方法比第一種更前衛，實現的方法也比較簡單
推薦使用第二種方法
