/daily-cost

Vue 3.0 + Vant 3.0 + Vue-Router 4.0 高仿微信记账本 H5 项目。

Primary LanguageVue

项目介绍

本项目为高仿微信记账本 H5 项目(微信记账本是小程序),项目页面不多,但是涵盖了很多数据操作知识。

预览

在线预览

技术栈

相关库名称 在线地址 🔗
Vue 3.x https://vue3js.cn/docs/zh
Vue-Router 4.x https://next.router.vuejs.org
Vant 3.x https://vant-contrib.gitee.io/vant/next
Echart 5.x https://echarts.apache.org/zh/index.html
dayjs https://dayjs.fenxianglu.cn
axios http://www.axios-js.com
lib-flexible https://github.com/amfe/lib-flexible

项目进度

  • 账单列表
  • 添加账单
  • 账单想去
  • 数据报表
  • 个人中心
  • 消费类型管理
  • 骨架屏
  • 软件打分

项目文字教程

课程代码我就放在这里,完全开源,大家可以自行学习,我会一直维护这个项目。

如果有需要购买该教程的同学,可以使用我的教师邀请码:Kym2hXFN(打九折),可以自行斟酌购买。这是本人用工作之余时间做的一点小知识付费,购买后的同学,可以加我微信:cxy5757,我可以为你答疑解惑。

基础部分:Vue 3.x 基础知识

Vue 3.x 简介及开发环境搭建

Vue 3.x 新特性之 setup

Vue 3.x 之响应式系统 API

Vue 3.x 之生命周期钩子函数、提供注入

Vue 3.x 性能提升

Vue 3.x 在业务逻辑层面的提升

路由管理插件 Vue-Router4.x API

状态管理插件 Vuex4.x API

实战部分:高仿微信记账本实战

Vue3.x + Vant3.x 搭建开发环境

记账本实战之导航栏

记账本实战之登录注册页面

记账本实战之首页

记账本实战之添加账单弹窗

记账本实战之账单详情

记账本实战之数据统计

记账本实战之我的页面

学习交流

QQ学习交流群:932227898

友情链接

Vue 新蜂商城开源地址:https://github.com/newbee-ltd