vue仿外卖项目（使用vue-cli3脚手架）

1 整体介绍

1 项目源码与功能演示视频链接

源码地址：github

视频链接：b站(手机验证码是测试用的，用的自己手机号，隐私，视频演示中没有手机号登录部分)

vue外卖项目功能演示

2 项目是仿外卖的WepApp，类似于饿了么、美团外卖等app的部分页面与功能。该项目是一个前后端分离的项目，后端是通过node.js开发，前端是使用vue进行开发。我主要进行的是前端页面的设计与开发。

注意：本项目只进行前端的开发，部分数据从后端获取，部分数据使用的是mock数据。（如果需要后端代码，可以私聊，邮箱：1194474469@qq.com）

2 主要页面

包含了登录页面、首页、搜索页面、订单、个人中心、商铺、食品详情页等。

4 主要技术

1）采用了使用 Vue 全家桶+ES6+Webpack 等前端最新最热的技术

2）使用vue-cli3构建整个项目，使用stylus进行css代码的预编译

3）采用了模块化、组件化进行整体的开发

4）使用了ajax（框架axios）进行页面的某些请求

2 从这往后开始进行具体页面的介绍

1 启动项目命令

npm run serve

3 整体路由的切换

1 效果

见b站视频链接

2 位置（选中文件夹）

3 功能与技术描述

1）通过编程式导航实现路由的切换显示($router)

2）通过动态 class 和$route.path 来实现 tab 样式切换

4 首页

2 位置（选中文件夹）

3 功能与技术描述

1）使用swiper插件实现商家分类轮播

2）搭建商家列表

3）实现商家分类与商家列表部分的滑动

5 登录页面

1 效果（隐私关系，不放出手机号登陆部分）

见github中功能演示视频

2 位置（选中文件夹）

3 功能与技术描述

1）前端页面：

a切换登陆方式

b. 手机号合法检查

c. 倒计时效果

d. 切换显示或隐藏密码

e. 前台验证提示：验证登录过程中数据是否符合，前台仅验证输入的格式

2）与后台进行交互

动态一次性图形验证码

动态一次性短信验证码（容联云短信，后端支持）

短信登录

密码登录

获取用户信息，实现自动登录

退出登录

6 商家店铺

1 效果（隐私关系，不放出手机号登陆部分）

见github中功能演示视频

2 位置（选中文件夹）

3 功能与技术描述

1）头部

显示商家的部分信息，左下角的图标显示商家详细的信息；

点击路由“点菜”、“评价”、“商家”实现子路由切换

2）“点菜”子路由

主要分为左右两边，左边是食品的分类（菜单），右边是食品；

左右两边都在规定的区域进行滑动；

右边滑动，左边到某一分类中

左边点击，右边到具体的位置

3）“评价”路由

可以在一个区域里面进行滑动；

点击“最新”、“好评”、“差评”实现评价刷选；

4）“商家子路由”

5）购物车

将每一个食品后面的购买（包括减号、加号以及数量抽成该组件）；

购物车数据持久化以及数据（换句话说，当从商家页面跳转到食品详情页时，强制刷新食品详情页面，数据仍然存在；在食品详情页面进行食物添加，会反馈到商家页面中）；

实现显示购物车列表滑动

购物车列表显示与隐藏

7 搜索页面

1 效果

视频之7 搜索实现

2 位置（选中文件夹）

3 功能与技术描述

输入关键词进行搜索，并将反馈回来的数据进行渲染，点击渲染的列表，能跳转到商家页面。

8 食品详情页面

1 效果

视频之路由切换

2 位置（选中文件夹）

3 功能与技术描

1）从商家页面跳转过来，将具体食品进行渲染；

2）强制刷新页面，数据没有丢失

3）食品详情页面中购物车数据与商家页面中数据联动（当一个改变，另外一个改变，主要难点在于在该页面中强制刷新之后，数据还能联动）

结尾:

百里于2021年3月5号，

如若侵权，请联系我删除！如若有错误，请指出。