Vue实战之外卖点餐小程序，收获满满！

前言

在近期学习Vue这个前端强大的框架时，在github上找到了一个很适合我这种前端新手小白写的小demo，业务不算很复杂，都是些难度适中的业务需求，特别适合拿来练练手，加强对Vue框架的使用和对一般业务需求的实现。

这个项目的项目名为：高仿饿了么点餐App，功能需求与饿了么大体差不多，但没有支付款的功能，只需要将前端的功能满足即可。github学习的源码链接：Vue.js高仿饿了么外卖App课程源码(想要学习的小伙伴可以点击此链接跳转)

实现效果

首页效果

头部商家信息

点击头部商家信息，显示商家细节信息页面（点击×按钮，则关闭该页面）

点击星星⭐，可以进行给商家评分

左侧菜品分类

点击左侧某个菜品分类，右侧菜单栏跳转到相应菜品类

右侧菜单栏

1.可通过手指滑动，上下移动屏幕查找需要的菜品 2.可以点击右侧➕加号，选中需要的菜品添加到购物车。

3.若不想要了，可点击减号取消。

下方购物车栏

1.当没有菜品被加入购物车时，购物车显示灰色，右侧显示起送价

2.当有菜品被加入购物车时，购物车显示蓝色，且右上角显示已选商品数量，当已选菜品未达起送费时右侧显示差多少元起送，当已达起送费时右侧显示付款且为绿色背景高亮。

功能实现

在此demo中，我没有实现点击付款后跳转的支付页面以及评论和商家模块。所以这个demo主要完成需求如下：①商家头部信息栏②头部商家信息细节页面③左侧菜品分类栏④右侧菜品选择栏⑤下方购物车

接下来剖析下各个业务实现的核心点

①商家头部信息栏 1.让背景去到更低的z轴层次--z-index=-1 2.背景虚化--filter:blur(1px);

②头部商家信息细节页面 1.让背景去到更高的z轴层次，将商家头部信息覆盖--z-index=100 2.打分组件(星星⭐)大体实现原理：使用五颗空心星星，和五颗实心星星，让五颗实心星星的位置与空心星星重合，通过点击事件获取此星星为第几个星星，从而设置实心星星总体的宽度，小于该宽度的星星则隐藏。

③左侧菜品分类栏 1.点击菜品类型，将该标签设置为高亮,跳转到该类型的菜品：将各个菜品所在位置(距页面顶部的距离)存入一个数组，再通过选中左侧的分类栏的下标，通过下标查找到数组的值，将右侧滚动到指定位置。--使用BetterScroll组件。

④右侧菜品选择栏 1.点击加号➕，出现减号➖以及所需菜品数量。-- v-show和绑定响应式变量

⑤下方购物车 1.当有商品加入购物车时，购物车图标样式改变。 --v-show 2.当购物车内的菜品总额达到最低配送费的值时，右侧显示付款。 -- 在商品的数据对象中添加一个属性值名为selectCount，用于存储已选商品的数量，通过该值进行计算。通过v-show达到值时添加style样式，且改变显示内容

这样我们的项目就大功告成啦！！

组件及视图结构

学习源码

在我的gitee仓库中，地址为： Showmaker/Showmaker_aigc/外卖小程序实现

结语

通过此次对外卖小程序App的实战，我们不仅完成了外卖点餐小程序的开发，并且能够更深刻地理解 Vue.js 的核心概念，如响应式数据绑定、组件化设计、路由管理等。这次项目不仅是一次技术上的挑战，更重要的是能够让我们的学习能够运用于实战，我们期待将这些经验应用于未来更多的项目中，继续学习！继续共同进步！！