Vue3.0+Vant3.0+Vue-Router4.0高仿微信记账本H5项目。.zip

共56个文件

js：16个

vue：15个

css：9个

版权申诉

153 浏览量 2023-10-21 23:27:12 上传评论收藏 617KB ZIP 举报

Vue3.0、Vant3.0 和 Vue-Router4.0 是当前前端开发领域中的热门技术栈，它们被广泛应用于构建高效、响应式的Web应用。在这个“Vue3.0+Vant3.0+Vue-Router4.0高仿微信记账本H5项目”中，开发者利用这些技术来实现一个类似微信的移动记账应用程序，让用户可以在手机网页上方便地管理个人财务。 **Vue3.0**： Vue3.0是Vue.js框架的最新版本，它带来了许多性能优化和功能改进。主要改进包括： 1. **Composition API**：提供了一种模块化的组织组件逻辑的方式，使得代码更易于理解和维护。 2. **Teleport**：允许将元素渲染到页面上的特定位置，如在<body>标签外部，用于处理全局脚本、弹窗等场景。 3. **Suspense**：用于处理异步组件加载，提供更好的用户体验。 4. **更好的类型支持**：与TypeScript深度集成，提高开发时的类型安全。 5. **优化性能**：通过优化编译器，减少了内存占用，提高了渲染速度。 **Vant3.0**： Vant是一个轻量级的移动端UI组件库，基于Vue.js，为开发者提供了丰富的UI组件。Vant3.0的更新包括： 1. **全面兼容Vue3**：充分利用Vue3的新特性，提供更好的开发体验。 2. **更快更轻**：进一步减小了体积，提升了组件的性能。 3. **新组件**：增加了更多适用于移动应用的组件，如日历、滑块等。 4. **主题定制**：提供了更灵活的主题定制工具，方便开发者自定义UI风格。 5. **API简化**：优化了组件API，使组件的使用更加简洁。 **Vue-Router4.0**： Vue-Router是Vue.js官方的路由管理器，对于单页应用（SPA）的导航控制至关重要。Vue-Router4.0的改进有： 1. **与Vue3兼容**：完全适配Vue3的新特性，如Composition API。 2. **懒加载优化**：路由懒加载功能更加完善，提升应用加载速度。 3. **更强大的守卫**：增强的路由守卫机制，支持更多的生命周期钩子，便于进行复杂的权限控制。 4. **简化的API**：部分API进行了调整，使得语法更简洁。 5. **更好的类型支持**：与TypeScript的集成更深入，提高开发时的类型提示和错误检查。在这个项目中，`daily-cost-main`可能是项目的主入口文件，它包含了整个应用的初始化设置，如Vue实例、Vue Router的配置以及Vant组件的引入。开发者可能使用Composition API来组织组件逻辑，Vue-Router4.0来管理不同的页面路由，而Vant3.0则用于构建用户界面，提供美观且易用的交互体验。这个项目展示了如何运用最新的Vue技术栈来构建一个高效、可维护的H5应用，对于学习和实践Vue3.0、Vant3.0和Vue-Router4.0的开发者来说，这是一个很好的参考实例。

资源推荐

资源详情

资源评论

收起资源包目录

Vue3.0+Vant3.0+Vue-Router4.0高仿微信记账本H5项目。.zip （56个子文件）

daily-cost-main

.browserslistrc 30B

yarn.lock 369KB

babel.config.js 255B

.gitattributes 85B

assets

daily-cost.png 292KB

src

App.vue 696B

assets

logo.png 7KB

css

myTheme.less 69B

main.js 1KB

utils

axios.js 834B

index.js 531B

components

NavBar.vue 1024B

CardItem.vue 2KB

Header.vue 765B

VueImageVerify.vue 4KB

PopType.vue 3KB

PopMonth.vue 1KB

PopAdd.vue 10KB

router

index.js 2KB

index.css 472B

views

User.vue 3KB

Data.vue 10KB

Account.vue 2KB

Detail.vue 4KB

Home.vue 5KB

About.vue 1KB

config

custom.less 277B

dist

user.ec8aaab8.js 3KB

chunk-vendors.d7d84eea.js 239KB

account.842f4e6e.js 3KB

detail.8be86180.js 4KB

app.25096434.js 24KB

about.8e03ead0.js 2KB

data.8b211504.js 5KB

css

data.3e7d3a4a.css 3KB

user.4d66ede1.css 806B

detail.c83b69a9.css 2KB

app.e3bd0232.css 7KB

about.ec805392.css 306B

account.6c545685.css 477B

chunk-vendors.fcf7f98d.css 170KB

favicon.ico 4KB

index.html 2KB

package.json 722B

ss.md 37B

public

favicon.ico 4KB

index.html 731B

package-lock.json 453KB

vue.config.js 608B

.gitignore 225B

daily-cost-server.js 97B

README.md 926B

postcss.config.js 245B

## 项目介绍本项目为高仿微信记账本 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 | ## 项目进度 - [x] 账单列表 - [x] 添加账单 - [x] 账单想去 - [x] 数据报表 - [x] 个人中心 - [ ] 消费类型管理 - [ ] 骨架屏 - [ ] 软件打分 ## 学习交流 ### QQ学习交流群：932227898 ![](https://s.yezgea02.com/1602639628898/qqroom.png) ## 友情链接 Vue 新蜂商城开源地址：https://github.com/newbee-ltd

评论收藏

内容反馈

版权申诉