项目背景
近期利用 Vue 技术栈完成了一个仿肯德基宅急送 App 的实战练习。经过约半个月的开发与调试,目前已实现核心功能的闭环。
功能模块
包含首页展示、商品详情、外卖下单等主要页面。
技术选型
- 框架:Vue
- 构建工具:Webpack
- 状态管理:Vuex
- HTTP 请求: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
数据说明
鉴于移动端 App 接口获取受限,且部分官网数据难以直接调用,本项目采用 EasyMock 进行接口模拟。数据源基于截图整理,确保演示效果稳定,方便开发者本地调试与学习。

