vue-ts-daily

WebApp based on version 2.5.13 of vue.js and TypeScript that mimics native applications.

👉 Project demo address welcome to Star ✨

Ps: Server is not in mainland, loading may be slow…

You are advised to directly add it to the home screen (the experience on ios is a little worse).

preface

1. Why did you do this project?

  1. Learn vue family bucket, I have been using React for a long time.
  2. Use PWA technology to simulate native applications to explore the difference between PWA and native.
  3. The authors claim that vUE has enhanced TS support since 2.5, and explore the support of TS in VUE.
  4. Github lacks vue projects written in Typescript, and individual projects are not complete. This may be the first.

2. Then why imitate a “habit forming APP” instead of ele. me, Meituan, Toutiao, XX Music and other famous apps?

  1. The biggest difference between native APP and WebApp is the offline ability. We hope to make an APP with offline ability. Most of these apps are tools, such as tomato alarm clock, efficiency tools and so on. The cache should be called old news).
  2. In fact, the most important point is that I poor self-control, imitation hungry, XX music project too much, afraid of encountering difficulties directly copy the source code, less thinking process.

3. What is the difference between this project and other projects of Vue Imele Me and XX Music?

  1. We are fully Typescript written, components are fully classed, TS is essential for building robust applications, many teams are using TS for their projects, and I can’t find a complete TS + Vue app on Github. This project is for you to learn.

  2. We use THE PWA technology, which is currently supported by ios (albeit poorly), so it’s only a matter of time before it comes to fruition. The projects for VUE + PWA are quite limited, especially since there are no projects for reference after VUe-CLI 3.0.

  3. There is also a point, if you want to take an interview works, you can change the project, compared to Elme, XX music is more differentiated, listen to people say that now a copy of the above two interviewers are a little resistant, because the same copy of these two… It seems that because of a great moOCs video…

Technology stack

Vue2.5 + Typescript + vuex + Vue-router

Project start

git clone https://github.com/xiaomuzhu/vue-ts-daily
npm i && npm run dev

Copy the code

The development environment

MacOS 10.12.6 node10.0.0

The target function

  • [x] Custom new — done
  • [x] Custom editing — done
  • [x] Habit filing — done
  • [x] Habit delete — done
  • [x] Habit activation — complete
  • [x] VUex persistence — done
  • [X] Daily routine display — complete
  • [x] The previous custom of signing up and canceling — done
  • [x] Default custom selection list — done
  • [x] Custom icon and background color editing — done
  • [x] Custom editing of repeated dates, motivational phrases, and repeated time periods — done
  • [x] Reward card collection — done
  • [x] TAB filtering with different habits for different time periods — done
  • [x] The total number of days used, the current number of consecutive days, and the record of the highest number of days in the past are recorded
  • [x] Login — Done
  • [x] Feedback — complete
  • [x] Update log — Done
  • [x] Remote synchronization information — complete
  • [] Enable HTTPS to implement PWA
  • [] Added the background push function
  • [] Add theme change
  • [] Enrich animation effects

Project screenshots

Used to record

A new habit

Edit habits

The last

This project is to restore a selected habit management APP in APP Store, called “Little Daily”.

The overall function has been restored by more than 90%. As a tool, app is still mainly based on logic, but there are two difficult points to deal with.

  1. Logical coupling is serious. For example, after a habit has successfully clocked or cancelled, the related consecutive days, total days, current days, custom current UI, calendar UI, popover logic all have to respond.
  2. Time processing, the main or habits tools to deal with time, such as calendar component, the day after the retroactive can’t response, so you need to make a judgment on time, and before the retroactive related continuous recording to do change, this time need to calculate whether the retroactive changes the continuous record, which involves the time of processing, the whole logic is to deal with Between.

I usually have limited opportunities to use Vue, this is my first time to use Vue to write a project, if you have any questions, welcome to PR.