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

fantix 发布于2019-08-22 17:17 / 695人阅读

摘要：基于的版本和编写的模仿原生应用的源码地址欢迎项目演示地址建议直接添加到主屏幕端体验差一些前言为什么做这个项目学习全家桶，很长一段时间在用。作者声称之后增强了对的支持，探究在中的支持情况。

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源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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