• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

[在线+源码]vue全家桶+Typescript开发一款习惯养成APP

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

# vue-ts-daily

基于Vue.js的2.5.13版本和TypeScript编写的模仿原生应用的WebApp.
[源码地址](https://github.com/xiaomuzhu/vue-ts-daily) 欢迎star

[项目演示地址](http://day.xiaomuzhu.top/)

![扫描二维码](http://omrbgpqyl.bkt.clouddn.com/18-5-15/73469590.jpg)

建议直接添加到主屏幕(ios端体验差一些).

![](http://omrbgpqyl.bkt.clouddn.com/18-5-16/49737422.jpg)

## 前言

为什么做这个项目?

1. 学习vue全家桶,很长一段时间在用React。
2. 利用PWA技术来模仿原生应用,来探究PWA与原生的差异。
3. 作者声称2.5之后vue增强了对TS的支持,探究TS在vue中的支持情况。

那么为什么模仿一款"习惯养成APP"而不是饿了么、美团、头条等著名APP?

原生APP与WebApp最大的区别就是离线能力,我们希望做一款以离线能力为主的app,这种类型的app绝大多数都是工具类的,例如番茄闹钟、效率工具等等,诸如美团、头条这种app离线场景价值有限(离线怎么点餐看新闻啊?缓存里的应该叫旧闻了)。

这个项目跟其他Vue仿饿了么和qq音乐的项目有何不同?

1. 我们全程Typescript编写,组件完全Class化,写法更贴近Angular,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
- [ ] 加入后台推送功能
- [ ] 加入主题更换
- [ ] 丰富动画效果

## 项目截图
首页

![](http://omrbgpqyl.bkt.clouddn.com/18-5-15/98606536.jpg)

习惯管理

![](http://omrbgpqyl.bkt.clouddn.com/18-5-15/60061652.jpg)

习惯记录

![](http://omrbgpqyl.bkt.clouddn.com/18-5-16/88199965.jpg)

新建习惯

![](http://omrbgpqyl.bkt.clouddn.com/18-5-16/36512417.jpg)

编辑习惯

![](http://omrbgpqyl.bkt.clouddn.com/18-5-16/55413901.jpg)


## 最后

本项目是还原了APP Store一个精选习惯管理app,叫"小日常"。

整体功能还原了90%以上,身为工具类的app还是以逻辑为主,有两个点比较难处理.
1. 逻辑耦合严重,例如一个习惯成功打卡或者取消打卡后,相关的连续天数、总天数、当前天数、习惯当前的ui、日历ui、弹窗逻辑全部要响应.
2. 时间处理,习惯养成工具最主要的还是要处理时间,例如日历组件,当天之后的补签是不能响应的,因此需要做一个时间上的判断,而补签之前的相关连续记录要做改变,这个时候需要计算这个补签是否改变了连续的记录,其中又得涉及时间的处理,整个逻辑就是处理跟时间的关系.


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript安装,使用,简介--1发布时间:2022-07-18
下一篇:
webstorm设置typescript自动编译发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap