【源码】基于vue框架的外卖订餐管理系统

项目简介

本项目运用vue2全家桶（包含vue-router、vuex），对饿了么外卖订餐移动端H5站进行仿写。以webpack作为打包工具，采用ES6语法和less作为样式预处理器开展开发工作。

项目的主要特性和功能

1. 数据交互：借助axios实现前后端数据交互，可模拟接口获取数据。
2. 轮播图：利用vue-swipe插件实现轮播图效果。
3. 弹出层布局：商家页运用CSS Sticky footer布局，呈现商家优惠信息的弹出层。
4. 滚动联动：使用better-scroll插件达成左侧菜单与右侧食品列表的滚动联动。
5. 购物车功能：购物车组件可添加商品、显示数量，具备增减商品数量的功能。
6. 动画效果：拥有小球飞入的动画，模拟购物车添加商品的动态效果。

安装使用步骤

安装依赖

运行 npm init 初始化项目，接着执行 npm install 安装依赖。若需使用vue-cli，可全局安装vue-cli并初始化项目。 bash npm install -g vue-cli vue init webpack vue2-elm-h5

运行项目

使用 npm run dev 启动本地服务器，默认在localhost:8080运行。

接口数据

因项目采用模拟数据，需用node搭建简单服务器模拟接口数据，可参考项目中的dev-server.js文件进行搭建。

使用注意事项

• 使用better-scroll插件时，要在dom渲染完成后（this.$nextTick）初始化better-scroll，以保证滚动效果生效。
• 添加购物车商品数量时，使用Vue.set方法动态添加属性。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】