使用electron+vue開發一個跨平臺todolist（便籤）桌面應用

# 1

最近一直在使用electron開發桌面應用，對於一個web開發者來講，html+javascript+css的開發體驗讓我很是舒服。以前我一直簡單的覺得electron只是張網頁加個殼，和那些號稱跨平臺的運行在手機上的webapp是一個套路。直到我真的須要開發一個跨平臺桌面應用的時候，我又認真的嘗試了一下electron，我開始意識到：這纔是我理想中的跨平臺桌面應用開發的最終形態，它簡直太優秀了。

# 2

在使用electron期間，我順便寫了一個簡單的todolist（便籤）應用，用於學習和嘗試；項目地址：https://github.com/xiajingren/xhznl-todo-list 界面參考了小黃條便籤。它目前的功能還很是簡單，可是包含了不少我使用electron時遇到問題，這也是electron新手都極可能遇到的，也算是一個技術總結吧；好比：

• electron無邊框透明窗口/拖拽/置頂/閃爍問題

• electron軟件開機自啓動

• electron軟件單實例運行

• electron窗口的鼠標穿透/部分穿透

• electron軟件打包

• electron軟件自動更新（GitHub）

• electron中使用本地數據庫

• electron中數據導出爲excel文件

• 等等......

如下是項目README：

# 3

xhznl-todo-list

✨一個使用 electron + vue + electron-builder 開發的跨平臺 todo-list 桌面應用

相關技術

electron 9.x

vue 2.x

vue-cli-plugin-electron-builder

electron-builder

lowdb

exceljs

dayjs

Vue.Draggable

......

功能預覽

步驟

npm install
npm run electron:serve

npm run electron:build

下載 releases：https://github.com/xiajingren/xhznl-todo-list/releases

規劃

• [x] todo/done 基本功能
• [x] 本地數據庫存儲
• [x] 軟件自動更新
• [x] 數據導出爲 excel
• [x] 開機啓動
• [x] 鼠標穿透
• [ ] 窗口貼邊自動收起
• [ ] ......

# 4

在使用electron期間確實也遇到不少坑，其中大部分都是來自於electron編譯nodejs模塊。後續我可能整理一個關於electron的系列分享，介紹 xhznl-todo-list 的實現細節，歡迎關注。

GitHub：https://github.com/xiajingren/xhznl-todo-list