[在線+源碼]vue全家桶+Typescript開發一款習慣養成APP

fantix 發布于2019-08-22 17:17 / 715人閱讀

摘要：基于的版本和編寫的模仿原生應用的源碼地址歡迎項目演示地址建議直接添加到主屏幕端體驗差一些前言為什么做這個項目學習全家桶，很長一段時間在用。作者聲稱之后增強了對的支持，探究在中的支持情況。

vue-ts-daily

基于Vue.js的2.5.13版本和TypeScript編寫的模仿原生應用的WebApp.
源碼地址歡迎star

項目演示地址

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

前言

為什么做這個項目？

學習vue全家桶，很長一段時間在用React。

利用PWA技術來模仿原生應用,來探究PWA與原生的差異。

作者聲稱2.5之后vue增強了對TS的支持，探究TS在vue中的支持情況。

那么為什么模仿一款"習慣養成APP"而不是餓了么、美團、頭條等著名APP？

原生APP與WebApp最大的區別就是離線能力，我們希望做一款以離線能力為主的app，這種類型的app絕大多數都是工具類的，例如番茄鬧鐘、效率工具等等，諸如美團、頭條這種app離線場景價值有限（離線怎么點餐看新聞啊？緩存里的應該叫舊聞了）。

這個項目跟其他Vue仿餓了么和qq音樂的項目有何不同?

我們全程Typescript編寫,組件完全Class化,寫法更貼近Angular,ts是構建健壯應用的必備良藥,眾多團隊在ts化自己的項目了,而github上我找不到任何一個ts+vue的完整app,此項目可以供你學習.

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

技術棧

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、彈窗邏輯全部要響應.

時間處理,習慣養成工具最主要的還是要處理時間,例如日歷組件,當天之后的補簽是不能響應的,因此需要做一個時間上的判斷,而補簽之前的相關連續記錄要做改變,這個時候需要計算這個補簽是否改變了連續的記錄,其中又得涉及時間的處理,整個邏輯就是處理跟時間的關系.

GPU云服務器云服務器區塊鏈養成游戲開發開發一款小程序在線app開發工具 vue源碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95030.html

Vue 實現網易云音樂 WebApp

摘要：基于等開發一款移動端音樂，界面參考了安卓版的網易云音樂布局適配常見移動端。圖標使用阿里巴巴圖標庫，中間的唱片旋轉動畫使用了實現。搜索功能實現功能搜索歌手歌單歌曲熱門搜索數據節流上拉刷新保存搜索記錄。基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等開發一款移動端音樂 WebApp，UI ...

Karuru 2019-08-22 17:16 評論0 收藏0
Vue2 全家桶仿微信App 項目，支持多人在線聊天和機器人聊天

摘要：前言這個項目是利用工作之余寫的一個模仿微信的單頁面應用，整個項目包含個頁面，涉及實時群聊，機器人聊天，同學錄，朋友圈等等，后續頁面還是開發中。前言這個項目是利用工作之余寫的一個模仿微信app的單頁面應用，整個項目包含27個頁面，涉及實時群聊，機器人聊天，同學錄，朋友圈等等，后續頁面還是開發中。寫這個項目主要目的是練習和熟悉vue和vuex的配合使用，利用socket.io實現實時聊...

iliyaku 2019-08-20 17:21 評論0 收藏0
vue全家桶制作一個精致的美團項目

摘要：的組件化功能可謂是它的一大亮點，通過將頁面上某一組件的代碼放入一個的文件中進行管理可以大大提高代碼的維護性。項目中未做移動端適配，在不同屏幕手機上打開，可能用戶體驗會差些一、項目展示： showImg(https://user-gold-cdn.xitu.io/2018/5/18/1637183ad14a696a?w=372&h=791&f=gif&s=2408442); 注意：如果...

NeverSayNever 2019-08-23 14:00 評論0 收藏0