vue-ts-daily
基於Vue.js的2.5.13版本和TypeScript編寫的模仿原生應用的WebApp.
?專案演示地址歡迎star✨
ps: 伺服器不在內地,載入可能慢點...
建議直接新增到主螢幕(ios端體驗差一些).
前言
1.為什麼做這個專案？
- 學習vue全家桶，本人很長一段時間在用React。
- 利用PWA技術來模仿原生應用,來探究PWA與原生的差異。
- 作者聲稱2.5之後vue增強了對TS的支援，探究TS在vue中的支援情況。
- github上缺乏Typescript編寫的vue專案，個別專案也不是完整的,這可能是第一款。
2.那麼為什麼模仿一款"習慣養成APP"而不是餓了麼、美團、頭條、xx音樂等著名APP？
- 原生APP與WebApp最大的區別就是離線能力，我們希望做一款以離線能力為主的app，這種型別的app絕大多數都是工具類的，例如番茄鬧鐘、效率工具等等，諸如美團、頭條這種app離線場景價值有限（離線怎麼點餐看新聞啊？快取裡的應該叫舊聞了）。
- 其實最主要的一點是本人自制力差,仿餓了麼、xx音樂的專案太多了，怕遇到困難直接抄人家原始碼，少了思考過程。
3.這個專案跟其他Vue仿餓了麼和xx音樂的專案有何不同?
-
我們全程Typescript編寫,元件完全Class化,ts是構建健壯應用的必備良藥,眾多團隊在ts化自己的專案了,而github上我找不到任何一個ts+vue的完整app,此專案可以供你學習.
-
我們利用了pwa技術,pwa目前已經被ios支援(雖然支援得爛),所以,開花結果是遲早的事情,vue+pwa的專案也是十分有限,尤其是在vue-cli 3.0之後就沒有相關的專案供參考了.
-
還有一點,如果你要去帶個面試作品,可以魔改本專案,相比餓了麼、xx音樂更具差異化，聽人說現在一看到仿上面兩款的面試官都有點牴觸，因為千篇一律的仿這倆。。。貌似因為慕課網一個大神視訊的原因。。。
技術棧
vue2.5 + Typescript + vuex + vue-router
專案啟動
git clone https://github.com/xiaomuzhu/vue-ts-daily
npm i && npm run dev
複製程式碼開發環境
MacOS 10.12.6 node10.0.0
目標功能
- [x] 習慣新建 -- 完成
- [x] 習慣編輯 -- 完成
- [x] 習慣歸檔 -- 完成
- [x] 習慣刪除 -- 完成
- [x] 習慣啟用 -- 完成
- [x] vuex持久化 -- 完成
- [x] 當日習慣展示 -- 完成
- [x] 對之前習慣的補籤和取消 -- 完成
- [x] 預設習慣選擇列表 -- 完成
- [x] 習慣圖示與背景顏色的編輯 -- 完成
- [x] 習慣的重複日期、激勵語、重複時間段的編輯-- 完成
- [x] 獎勵卡領取 -- 完成
- [x] 不同時間段不同習慣的tab篩選 -- 完成
- [x] 習慣的總天數、當前連續天數、歷史最高紀錄等記錄邏輯 -- 完成
- [x] 登入 -- 完成
- [x] 反饋 -- 完成
- [x] 更新日誌 -- 完成
- [x] 遠端同步資訊 -- 完成
- [ ] 開啟https實現pwa
- [ ] 加入後臺推送功能
- [ ] 加入主題更換
- [ ] 豐富動畫效果
專案截圖
習慣記錄
新建習慣
編輯習慣
最後
本專案是還原了APP Store一個精選習慣管理app,叫"小日常"。
整體功能還原了90%以上，身為工具類的app還是以邏輯為主，有兩個點比較難處理.
- 邏輯耦合嚴重，例如一個習慣成功打卡或者取消打卡後，相關的連續天數、總天數、當前天數、習慣當前的ui、日曆ui、彈窗邏輯全部要響應.
- 時間處理,習慣養成工具最主要的還是要處理時間,例如日曆元件,當天之後的補籤是不能響應的,因此需要做一個時間上的判斷,而補籤之前的相關連續記錄要做改變,這個時候需要計算這個補籤是否改變了連續的記錄,其中又得涉及時間的處理,整個邏輯就是處理跟時間的關係.
平時用到Vue的機會有限,這是本人第一次用Vue寫專案,如有問題歡迎PR。