多是 GitHub 上第一款 Vue 全家桶 + TypeScript 的完整項目

vue-ts-daily

基於Vue.js的2.5.13版本和TypeScript編寫的模仿原生應用的WebApp.

👉項目演示地址歡迎star✨

ps: 服務器不在內地,加載可能慢點...

建議直接添加到主屏幕(ios端體驗差一些).

前言

1.爲何作這個項目？

1. 學習vue全家桶，本人很長一段時間在用React。
2. 利用PWA技術來模仿原生應用,來探究PWA與原生的差別。
3. 做者聲稱2.5以後vue加強了對TS的支持，探究TS在vue中的支持狀況。
4. github上缺少Typescript編寫的vue項目，個別項目也不是完整的,這多是第一款。

2.那麼爲何模仿一款"習慣養成APP"而不是餓了麼、美團、頭條、xx音樂等著名APP？

1. 原生APP與WebApp最大的區別就是離線能力，咱們但願作一款以離線能力爲主的app，這種類型的app絕大多數都是工具類的，例如番茄鬧鐘、效率工具等等，諸如美團、頭條這種app離線場景價值有限（離線怎麼點餐看新聞啊？緩存裏的應該叫舊聞了）。
2. 其實最主要的一點是本人自制力差,仿餓了麼、xx音樂的項目太多了，怕遇到困難直接抄人家源碼，少了思考過程。

3.這個項目跟其餘Vue仿餓了麼和xx音樂的項目有何不一樣?

1. 咱們全程Typescript編寫,組件徹底Class化,ts是構建健壯應用的必備良藥,衆多團隊在ts化本身的項目了,而github上我找不到任何一個ts+vue的完整app,此項目能夠供你學習.

2. 咱們利用了pwa技術,pwa目前已經被ios支持(雖然支持得爛),因此,開花結果是早晚的事情,vue+pwa的項目也是十分有限,尤爲是在vue-cli 3.0以後就沒有相關的項目供參考了.

3. 還有一點,若是你要去帶個面試做品,能夠魔改本項目,相比餓了麼、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仍是以邏輯爲主，有兩個點比較難處理.

1. 邏輯耦合嚴重，例如一個習慣成功打卡或者取消打卡後，相關的連續天數、總天數、當前天數、習慣當前的ui、日曆ui、彈窗邏輯所有要響應.
2. 時間處理,習慣養成工具最主要的仍是要處理時間,例如日曆組件,當天以後的補籤是不能響應的,所以須要作一個時間上的判斷,而補籤以前的相關連續記錄要作改變,這個時候須要計算這個補籤是否改變了連續的記錄,其中又得涉及時間的處理,整個邏輯就是處理跟時間的關係.

平時用到Vue的機會有限,這是本人第一次用Vue寫項目,若有問題歡迎PR。