尚硅谷外卖项目笔记二

***无名小卒

已于 2022-06-26 17:20:47 修改

阅读量821

点赞数

文章标签： vue vue.js 前端框架

于 2022-05-04 13:46:56 首次发布

本文链接：https://blog.csdn.net/xiaojiango0/article/details/124568812

版权

本文详细记录了使用Vue.js开发外卖项目的实践过程，包括商家界面搭建、模拟数据接口、vue transition动画、better-scroll滚动实现、列表过滤显示等关键步骤，同时也探讨了项目优化和打包可视化的操作。

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

搭建整个商家的界面，拆分界面路由。路由包含一级路由（点餐、评价、商家）

商家页面的数据使用mock数据来模拟从后台获取的数据

2.1 安装

npm install mockjs

2.2 编写JSON数据

商家页面主要有点餐、评价、商家三个数据

在JSON文件中，存放这三个数据，编写数据的时候要注意数据的格式（对象还是数组）。

以key：value的形式放到JSON文件中

2.3 引入mock

创建一个js文件，在文件中引入Mock，编写每个数据对应的接口

在main.js 中引入上面的js文件

2.4 使用mock数据

在接口文件中添加三个ajax请求

其余的步骤就是在页面请求分发vuex的actions事件，actions提交ajax请求，请将获取的数据commit到mutation，mutation改变state中的数据。

给商家信息详情添加一个动画效果：点击的时候，渐渐的出现商家详情，点击取消，渐渐地消失

 <transition name="fade">
       <!--这里放需要做动画的内容-->
 </transition>

在style中设置动画的样式

设置离开的时候透明度为0，即完全看不到

&.fade-enter-active,&.fade-leave-active
     transition opacity .5s
&.fade-enter,&.fade-leave-to
     opacity 0

BetterScroll 是一款重点解决移动端（已

关注