# 外卖项目

**Repository Path**: chen_bao_jun/take-out-items

## Basic Information

- **Project Name**: 外卖项目
- **Description**: 该项目使用vue-cli搭建一个vue项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-13
- **Last Updated**: 2020-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 外卖项目webapp

- 本项目使用vue-cli脚手架搭建一个vue外卖项目

- 使用的前端技术：vue、vue-cli、vue-router、vue-resource、stylus、better-scroll

- 项目亮点：
    1. 使用 better-scroll 实现菜单列表和食物列表同步滚动，点击菜单能够
    滚动到对应食物类型的位置
    2. 在移动端适配方面兼容 ipone5 及其他不同类型手机
    3. 项目具有多种动画效果，能够提升用户产品体验感；如：添加食物出现小球抛
    物线运动；不同页面切换有切换效果等

- 项目难点：
    1. 在添加商品时购物车的不能够实时更新；解决方案：使用 Vue.set 将新增的对象属性变为响应式 

- 项目优化：
    1. 使用keep-alive将多次使用的组件缓存下来，这样做的好处是路由切换时不用重新向后端发送请求，直接使用缓存中的数据
    2. 对路由切换到不同组件增加页面切换效果，提升用户体验感

- 项目截图

<img src="./example/1.png" width="300" style="display:inline-block; margin: 10px 20px; border: 1px solid rgba(7,17,27,0.1)"></img>
<img src="./example/2.png" width="300" style="display:inline-block; margin: 10px 20px; border: 1px solid rgba(7,17,27,0.1)"></img>
<img src="./example/3.png" width="300" style="display:inlin-block; margin: 10px 20px; border: 1px solid rgba(7,17,27,0.1)"></img>
<img src="./example/4.png" width="300" style="display:inline-block; margin: 10px 20px; border: 1px solid rgba(7,17,27,0.1)"></img>
<img src="./example/5.png" width="300" style="display:inline-block; margin: 10px 20px; border: 1px solid rgba(7,17,27,0.1)"></img>