初探vue electron
用vue來寫個桌面excel轉換器
身為一個科科人，看到篩檢流程塞車造成的校正回歸現象引發社會的激烈揶揄是很不願看到的，也好奇著自己是否能盡一份心力，只好六日沒事戳戳在醫院上班的女友有什麼是可以支援的(?
然後需求就來了：
我們醫院系統輸出的excel格式和上傳CDC的excel格式不太一樣，這段都要靠人力去硬幹，超級花時間的啊，有沒有辦法生個轉換器啊？
稍微討論一下，列出幾個需求：
- 部分欄位原始資料並沒有，需要靠邏輯去產生
- 不需設定，餵一個檔案進去，直接噴一個檔案出來的懶人轉換
- 因為資料不能外流，需要桌面程式做線下轉換(win7、win10、mac)
因為1. ，單純的欄位搬移無法滿足，需要有程式來產生其他欄位資料
因為2. ，在excel寫入巨集的做法不是最佳解
因為3.，不能用線上服務來解，線下環境需要支援多平台
綜合上述情況，決定試看看用Electron來實做桌面程式啦！
本篇順手紀錄一下開發的流程與打包的一些小坑，希望往後要再次開發Electron時能有所幫助XD
本次的專案在這裏，也歡迎各路大大指點鞭策
建立專案
先啟個專案，把上述組合引入
// Vue CLI創建專案
vue create excel-to-cdc
cd excel-to-cdc// 安裝Vue CLI Plugin Electron Builder
vue add electron-builder
在package.json中可以看到多了幾個script
速速的在terminal中輸入：
yarn vue-cli-service electron:serve
就會出現熟悉的畫面&devtool了！
開發
/src/background.jsbackground.js是Electron的進入點，啟動時相關的hook都在其中，例如這段就是app啟動時，在開發模式下幫我們載入vue devtool：
而視窗的基本設定也是在這裏寫入：
其實我也只有改過啟動時的視窗長寬(欸
在這裏我還想引入Element ui來快速堆出操作介面：
// 安裝Element ui
yarn add element-ui// 安裝個別載入Element ui需要的babel-plugin-component
yarn add babel-plugin-component -D
接著就按照官方文件來改寫babel.config.js和main.js：
/babel.config.js
/main.js
剩下的就是在熟悉的App.vue中進行畫面與邏輯的開發了，就不多贅述囉
最後完成品大概是這樣
murmur: 字串比對應該寫成正規表達式的…原諒我真的還沒學通(艸)
打包
從package.json中可以知道
yarn electron:build這指令是用來打包、輸出成桌面程式的，打包完的程式預設會放在:
dist_electron/excel-to-cdc-0.1.0.dmg從副檔名就可以知道，這只是給mac安裝用的…
要build windows的程式需要另外設定，我們可以回到package.json新增一段指令：
"build:win": "vue-cli-service electron:build --windows"
接著就可以在終端機中快樂的編譯出windows用程式了：
yarn build:win打包完後就可以看到產生了windows的exe安裝檔了！
dist_electron/excel-to-cdc Setup 0.1.0.exe另外還有不少人喜歡的免安裝版：
dist_electron/win-unpacked就可以開心的交差啦！
測試後驚覺這windows程式只支援x64，win7如果灌的是x86會出現不相容無法安裝…
所以我們需要在vue.config.js中新增electronBuilder的設定：
再次執行
yarn build:win編譯出的安裝檔就支援x86囉！
而免安裝檔則是存放在另一個路徑：
dist_electron/win-ia32-unpacked就真的能開心交差啦！
初次嘗試Electron挺有趣的，一個下午就能夠將原有的技能樹往外擴充到桌面上發揮是個很棒的體驗，往後有機會再來繼續研究看看更細部的相關設定，例如icon的替換、編譯路徑的置換、與外界事件的傳遞等…看來還很有得摸呢XD
