仿肯德基宅急送App-Vue实战

最新推荐文章于 2024-03-23 18:32:11 发布

Web全栈开发

最新推荐文章于 2024-03-23 18:32:11 发布

阅读量742

点赞数

分类专栏：前端前端工程师前端程序员

本文链接：https://blog.csdn.net/weixin_45556713/article/details/101024756

版权

本文介绍了使用Vue、webpack、vuex和axios开发的一个仿肯德基宅急送App项目。项目数据来自EasyMock，包含首页、商品页、外卖页等，技术栈包括vue组件封装、better-scroll、固定头部、侧边栏和弹出框的实现，以及Vuex状态管理。文章还分享了商品展示、购物车功能和操作按钮的实现细节，并指出项目存在的不足和未来改进计划。

摘要由CSDN通过智能技术生成

前言
Vue学习有一段时间了，就想着用Vue来写个项目练练手，弄了半个月，到今天为止也算勉强能看了。
由于不知道怎么拿手机App的接口，并且KFC电脑端官网真的…一言难尽，所以项目所有数据都是我截图然后写在EasyMock里的，有需要的同学可以自取

首页商品页外卖页

技术栈
vue + webpack + vuex + axios

文件目录
│ App.vue
│ main.js
│
├─assets
│ logo.png
│
├─components
│ │ cartcontrol.vue
│ │ code.vue
│ │ coupon.vue
│ │ mineHeader.vue
│ │ scroll.vue
│ │ shopHeader.vue
│ │ sidebar.vue
│ │ submitBar.vue
│ │ takeout.vue
│ │ wallet.vue
│ │
│ └─tabs
│ Other.vue
│ Outward.vue
│ Selfhelp.vue
│ Vgold.vue
│
├─pages
│ ├─home
│ │ home.vue
│ │
│ ├─mine
│ │ mine.vue
│ │
│ ├─order
│ │ order.vue
│ │
│ └─shop
│ shop.vue
│
├─router
│ index.js
│
└─vuex
│ store.js
│ types.js
│
└─m