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

xhznl發表於2020-11-20

# 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

......

功能預覽

todo list

done list

基本操作

資料匯出

滑鼠穿透

macOS

步驟

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

相關文章