Awesome Open Source
Awesome Open Source

vue-ts-daily

基于Vue.js的2.5.13版本和TypeScript编写的模仿原生应用的WebApp.

项目演示地址

扫描二维码

建议直接添加到主屏幕(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之后就没有相关的项目供参考了.

技术栈

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. 时间处理,习惯养成工具最主要的还是要处理时间,例如日历组件,当天之后的补签是不能响应的,因此需要做一个时间上的判断,而补签之前的相关连续记录要做改变,这个时候需要计算这个补签是否改变了连续的记录,其中又得涉及时间的处理,整个逻辑就是处理跟时间的关系.

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (263,054
Vue (83,018
Pwa (3,339
Vuex (3,163
Vuejs2 (2,601
Vue Router (2,195
Vue Cli (1,157
Related Projects