# vue-ts-daily
基于Vue.js的2.5.13版本和TypeScript编写的模仿原生应用的WebApp.
[项目演示地址](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.为什么做这个项目?
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
- [ ] 加入后台推送功能
- [ ] 加入主题更换
- [ ] 丰富动画效果
## 预览
习惯管理、习惯首页、设置
![](http://omrbgpqyl.bkt.clouddn.com/18-5-17/32237664.jpg)
时间段编辑、补签记录
![](http://omrbgpqyl.bkt.clouddn.com/18-5-17/30859792.jpg)
习惯库、图标设置
![](http://omrbgpqyl.bkt.clouddn.com/18-5-17/92185459.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. 时间处理,习惯养成工具最主要的还是要处理时间,例如日历组件,当天之后的补签是不能响应的,因此需要做一个时间上的判断,而补签之前的相关连续记录要做改变,这个时候需要计算这个补签是否改变了连续的记录,其中又得涉及时间的处理,整个逻辑就是处理跟时间的关系.
没有合适的资源?快使用搜索试试~ 我知道了~
基于vue的习惯养成app
共100个文件
vue:31个
ts:20个
scss:18个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 21 浏览量
2022-03-06
21:31:16
上传
评论 1
收藏 312KB ZIP 举报
温馨提示
基于vue、Typescript、pwa的一款习惯养成app 还原了APP Store一个精选习惯管理app,叫"小日常"。 整体功能还原了90%以上,身为工具类的app还是以逻辑为主,有两个点比较难处理. 逻辑耦合严重,例如一个习惯成功打卡或者取消打卡后,相关的连续天数、总天数、当前天数、习惯当前的ui、日历ui、弹窗逻辑全部要响应. 时间处理,习惯养成工具最主要的还是要处理时间,例如日历组件,当天之后的补签是不能响应的,因此需要做一个时间上的判断,而补签之前的相关连续记录要做改变,这个时候需要计算这个补签是否改变了连续的记录,其中又得涉及时间的处理,整个逻辑就是处理跟时间的关系.
资源推荐
资源详情
资源评论
收起资源包目录
基于vue的习惯养成app (100个子文件)
.babelrc 148B
common.css 32B
index.html 878B
favicon.ico 1KB
404.jpg 54KB
iconfont.js 374KB
vue.config.js 2KB
sw.js 884B
sw.js 884B
elementCount.js 645B
test.js 403B
jest.config.js 311B
workbox-config.js 161B
.commitlintrc.js 102B
package.json 2KB
tsconfig.json 615B
manifest.json 584B
tslint.json 386B
README.md 4KB
android-chrome-512x512.png 21KB
android-chrome-192x192.png 8KB
logo.png 7KB
apple-touch-icon-180x180.png 6KB
apple-touch-icon.png 6KB
msapplication-icon-144x144.png 5KB
apple-touch-icon-152x152.png 5KB
apple-touch-icon-120x120.png 4KB
apple-touch-icon-76x76.png 2KB
apple-touch-icon-60x60.png 2KB
.postcssrc 45B
.prettierrc 848B
mixin.scss 1KB
style.scss 1KB
style.scss 1KB
style.scss 1KB
style.scss 882B
style.scss 820B
style.scss 635B
style.scss 581B
style.scss 579B
style.scss 531B
style.scss 323B
style.scss 284B
style.scss 283B
style.scss 274B
style.scss 178B
style.scss 78B
style.scss 31B
style.scss 0B
mutations.ts 8KB
utils.ts 6KB
state.ts 5KB
config.ts 5KB
router.ts 5KB
index.ts 1KB
main.ts 1015B
FooterIcon.ts 757B
actions.ts 721B
registerServiceWorker.ts 567B
user.ts 482B
index.ts 453B
HeaderIcon.ts 341B
getters.ts 321B
shims.d.ts 297B
ajax.d.ts 269B
Card.test.ts 226B
sync.ts 174B
feedback.ts 161B
types.ts 53B
Home.vue 6KB
Habit.vue 6KB
Calendar.vue 5KB
Library.vue 4KB
Setting.vue 3KB
Edit.vue 3KB
Habit.vue 3KB
IconSetting.vue 3KB
Card.vue 3KB
Login.vue 3KB
Header.vue 2KB
Times.vue 2KB
Feedback.vue 2KB
Remind.vue 2KB
Recycle.vue 2KB
List.vue 2KB
Manage.vue 2KB
Card.vue 1KB
ClockPopup.vue 1KB
UpdateLog.vue 1KB
App.vue 1KB
Popup.vue 1KB
Footer.vue 994B
New.vue 966B
SkeletonList.vue 955B
Circle.vue 934B
Card.vue 910B
Icon.vue 595B
DateBlock.vue 401B
error.vue 375B
SkeletonCircle.vue 339B
共 100 条
- 1
资源评论
自不量力的A同学
- 粉丝: 47
- 资源: 2711
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功