Vue.js项目：外卖WebApp项目总结

最新推荐文章于 2024-05-14 08:32:58 发布
最新推荐文章于 2024-05-14 08:32:58 发布
阅读量722 收藏 4
点赞数 1
分类专栏： 开源项目 Vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haotian1997/article/details/115103710
版权

Vue-Elm-Shop

Welcome to Vue-Elm-Shop👋

🚀 如何运行

# 克隆
git clone https://github.com/yxiuzhu/elm-shop.git

# 打开项目目录
cd elm-shop

# 安装依赖
npm install

# 开启本地服务运行项目
npm run serve

项目演示

在这里插入图片描述

项目页面及功能

  • Header 公告详情页
  • Goods 商品列表
  • Foods 食物详情页
  • Ratings 评价详情页
  • Seller 店铺详情页

📓Header 公告详情页

  • support-ico 优惠图标组件抽样
  • Star 星星组件抽样
  • 背景图片高斯模糊
  • CSS Sticky footers 布局

🍚Goods商品列表

  • 引入第三方JS库better-scroll，处理移动列表滚动，实现商品左右列表联动
  • 自定义Vue.js过渡动画，实现小球飞出动画及贝塞尔曲线缓动函数应用

🍗Foods 食物详情页

  • Split 分隔组件抽样
  • RatingSelect 评论组件抽样
  • 时间格式化 引入第三方JS库Moment.js

📝Ratings 评价详情页

  • Vue.js 组件复用

  • 媒体查询适应小屏手机

📄Seller 店铺详情页

  • 基于localStorage的移动端数据存取方案

  • keep-alive实现组件缓存，体验优化

实用的组件

通用组件包括如下

  • Star 星星组件
  • Split 分隔组件
  • Loading 组件

还有一些是为本项目量身订做的组件，与上面的通用组件都在 src/components 目录下

CSS布局样式

  • 公共base.styl–媒体查询，解决移动端border-1px问题；结合BFC解决高度塌陷问题
  • 图标icon.styl-通过icomoon.io网站制作文字图标样式
  • 混入mixin.styl–移动端border-1px样式及背景图片大小适配

项目优化

webpack-chain 件优化打包后的项目体积

作者

👤 y_xiuzhu(杨秀竹)

项目github地址，期待你的星星🌟

项目课程

👤 ustbhuangyi(黄轶)

项目结构

common-文件夹存放的是通用的css和icon样式文件
componets-文件夹用来存放Vue组件
router-文件夹设置Vue Router
dist-webpack打包编译后的项目文件
Prod.server.js-利用express搭建node服务获取数据的代理接口文件
App.vue-根组件，设置子组件的引用与跳转
Main.js-创建Vue实例及插件的使用
README.md-项目简介

项目总结

移动端border-1px样式（0.5px和0.1px样式的实现方法）
在这里插入图片描述
在这里插入图片描述

BFC解决高度塌陷问题
在这里插入图片描述

CSS Sticky footers 布局

Sticky Footer是css的一种布局场景。页脚footer永远固定在页面的底部

应用背景：当页面内容不够长的时候，页脚块需要粘贴在视口底部；当页面内容足够长，页脚块会被内容向下移动

  • 实现：父级 position:fixed，内容设为padding-bottom:64px，页脚相对定位，margin-top:-64px，clear:both为了保证兼容性，父级要清除元素左右浮动

在这里插入图片描述

自适应布局

1、左侧宽度固定80px，右侧宽度自适应
在这里插入图片描述
2、媒体查询适应小屏手机
在这里插入图片描述

背景图片高斯模糊

1、backdrop-filter: blur(10px)适用于ios系统；
2、filter：blur(10px)会导致整个屏幕的元素模糊

注意，所有在内的子元素也会模糊，包括文字。所以采用定位布局，背景单独占用一个层，ios有一个设置backdrop-filter:blur(10px)，只会模糊背景,但不支持android

在这里插入图片描述

Vue.js过渡动画

使用 JavaScript 钩子函数实现小球飞出动画及贝塞尔曲线缓动函数应用

  • 涉及组件ShopCart.vue、Good.vue
  • Good组件捕获添加食物的add点击事件，调用子组件ShopCart的钩子函数实现小球飞出动画
  • 组件复用：通过父子组件之间的通信，实现子组件CartControl.vue的小球飞出动画
    在这里插入图片描述
    在这里插入图片描述

Star 星星组件

根据指定大小的图片size及评分生成星星评分组件
实现组件的抽样复用
在这里插入图片描述
在这里插入图片描述

时间戳的转换

时间戳的转换

  • 1、利用过滤器
  • 2、利用Moment.js开源库实现时间戳的转换
    在这里插入图片描述

Seller 店铺详情页

商家实景图片的横向滚动

  • 解决方案：
  • 每个 li 要 display：inline-block，因为width不会自动撑开父级ul，所以需要将计算后的宽度赋值给ul的width，（每一张图片的width+margin）*图片数量-一个margin，因为最后一张图片没有margin；外层图片不换行white-space: nowrap
  • 同时new BScroll里面要设置scrollX: true,eventPassthrough: ‘vertical’, // 滚动方向横向，竖向不能滚动

在这里插入图片描述

基于localStorage的移动端数据存取方案

  • 使用query-string第三方库对query进行解析，获取查询地址，将对不同id的数据进行缓存
  • 使用good-storage的第三方库进行localStorage的存取操作
    在这里插入图片描述

项目优化

  • 使用webpack-bundle-analyzer分析工具，npm run report 生成可视化的分析报告，
  • 通过减小第三方库中不需要的功能，将打包后的项目体积减少28%

在这里插入图片描述

yxiuzhu
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue.js开发外卖App项目的内容总结(四)
初漾的博客
10-08 2778
需求分析1.从页面来分，分为头部和内容区。其中头部包括展示的那部分和一个浮层。内容区包括评价页，商品页和商家详情页。 2.项目所做的是SPA单页面应用，所以切换子页面时，不会去刷新整个页面。 3.对于头部，当我们点击公告和上面的数字时，需要展示黑色浮层(最后一张图片)，浮层上有关闭按钮，点击按钮，浮层关闭。4.对于内容区，最复杂的是商品页，商品页拆分为左右两栏，左侧是商品的分类，右侧是商品的实际
Vue---外卖APP实战
小李科技
06-01 1314
Vue-----移动端APP实战
苍穹外卖项目简单总结
zcf123456_的博客
05-14 774
JWT及JSON Web Token,是一种在两方之间以紧凑、可验证的形式传输信息的方式，简单来说就是验证用户信息，本项目就是用来验证用户登录信息。
SpringBoot+Vue校园外卖配送系统
分享技术热点，看天下大事
07-06 789
随着社会的发展，社会的方方面面都在利用信息化时代的优势。互联网的优势和普及使各种系统的开发成为时代节奏的步伐。本文以实际运用为开发背景，运用软件工程原理和开发方法，它主要是采用java语言技术和mysql数据库来完成对系统的设计。整个开发过程首先对校园外卖配送系统进行需求分析，得出校园外卖配送系统主要功能。接着对校园外卖配送系统进行总体设计和详细设计。总体设计主要包括首页、系统用户（管理员、配送员）、模块管理（配送订单、配送接单、取消配送、送达信息、收入提现、通知公告）等；
Vue移动端项目---尚硅谷外卖
qq_42765662的博客
07-23 3115
使用Vue实现移动端外卖app
基于SpringBoot+Vue的外卖点餐管理系统
Yaml4的博客
01-03 1001
随着科学技术的飞速发展，各行各业都在努力与现代先进技术接轨，通过科技手段提高自身的优势社会的发展和科学技术的进步，互联网技术越来越受欢迎。网络计算机的生活方式逐渐受到广大人民群众的喜爱，也逐渐进入了每个用户的使用。互联网具有便利性，速度快，效率高，成本低等优点。因此，构建符合自己要求的操作系统是非常有意义的。民以食为天，外卖点餐系统餐饮业一直是与人们日常生活息息相关的产业。传统的电话外卖点餐或者到店消费已经不能适应市场发展的需求。
vue.js毕业设计，基于vue.js前后端分离外卖点餐系统（H5移动项目） 开题报告
杭州.黄老师
11-24 2016
vue.js毕业设计，基于vue.js前后端分离外卖点餐系统（H5移动项目） 开题报告
基于vue-cli4构建的web app
2401_84411323的博客
05-02 709
前端字节跳动真题解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】字节跳动真题解析**开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】[外链图片转存中…(img-S6NxYKvh-1714643453285)]
创建您的第一个Vue.js项目：从零到部署的完整指南
最新发布
05-29
创建您的第一个Vue.js项目：从零到部署的完整指南 Vue.js 是一个流行的前端框架，以其简单易学、灵活和高效的特点而受到开发者的喜爱。本教程将带您从零开始创建一个 Vue.js 项目，并逐步讲解每个步骤，确保您能够...
vue.js项目实战,vue.js项目实战pdf下载,JavaScript
09-10
vue实战开发.快速上手.好不容易找到电子版.非PDF版
Vue.js 高仿饿了么外卖项目源码
10-17
使用vue.js vue是当前最火的MVVM框架，（优点：轻量、简洁、高效、数据驱动、组件化） 本项目做的是：高仿上线外卖APP商家模块 开发过程：需求分析-脚手架工具-数据mock-架构设计-代码编写-自测-编译打包 以线上生产...
vue-sell：Vue.js高仿饿了么外卖App课程原始码http：//coding.imooc.comclass74.html
02-28
适合有一定Vue.js和初级基础知识并且想深入学习Vue.js并使用在实战项目的同学。 去做 由于本课程录制时间较早，编写代码的时候Vue.js 2.0尚未正式发布，所以源码采用1.0编写，后续会更新到2.0版本。 master代码已经...
基于Vue.js微商城项目
08-18
项目采用Vue框架搭建的微商城项目，实现了登录、商品列表的展现、商品详情、商品购买的功能。
vue.js开发外卖App项目总结(一)
初漾的博客
08-08 8224
1.IE8以下不支持ES5的特性，IE9+，firefoxs,chrome,safari,opera均支持ES5特性 2.MV*包括MVC、MVP、MVVM框架 应用场景： 针对具有复杂交互逻辑的前端应用 提供基础的架构抽象 通过Ajax数据持久化，保证前端用户的体验其中vue,angular,react都是MVVM框架 什么是vue.js?vue于2014年初开源，vue-route
如何利用node.js进行webapp的开发
09-27 3000
安装nodejs，进入官网：https://nodejs.org/en/，点击下载软件，如图所示： 安装cnpm 国内npm镜像库，淘宝的cnpm，可以有效的提高下载nodejs包的速度。 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装express cnpm install expr...
Vue外卖项目笔记（一）
youhebuke225的博客
06-17 1023
1 环境搭建 1.1 搭建前台项目 使用Vue/cli4创建项目 详情点击，我们会使用到vue-router/vuex ,不适用UI库 进行适配 详情点击 运行项目npm run serve 1.2 搭建后台项目 详情点击 1.3 搭建项目整体架构 新建路由文件 根据项目效果图在views一下四个文件 Msite.vue Order.vue Profile.vue Search.vue 注册路径 在routes/index.js引入路由文件，并为其注册路径 import Msite
webapp项目前端总结
weixin_33946020的博客
05-04 320
提纲 整体把握，从设计稿入手——技术选型 并行开发，从实现静态页面开始 前端自动化 前端js逻辑 前后端集成 小问题集合 总结 1.整体把握，从设计稿入手 —— 技术选型 新项目到手，算是运气好，设计稿都已经全部完成了，40多个页面。不用担心边做边改的情况。能够提前确定重用性和一些规范。 项目主要要求： 1. 兼容PC、微信、移动端，兼容现代浏览器，IE9+等 1. 嵌入...
基于nodejs+vue美食外卖推荐网站系统源码
QQ58850198的博客
07-28 863
随着社会的发展，人们生活水平的提高，对于美食人们也是不停的追求，但由于生活节奏的变快以及为了得到很好的便利，互联网技术的发展也给人们的生活带来了各种便利。与传统外卖系统不同的是，本系统对南京全域所有注册线上的商家进行了各方面的分析并进行可视化展示在页面，方便用户进行商家对比，根据自身情况选择商家与美食。管理员使用本系统涉到的功能主要有首页，个人中心，用户管理，商家管理，菜系分类管理，城市管理，系统管理，订单管理等功能。用户使用本系统涉到的功能主要有首页，个人中心，我的收藏管理，订单管理等功能。...
Vue仿饿了么app项目总结
weixin_34198797的博客
02-23 623
前言 这是我第一个基于 Vue 的项目作品，目的很简单，学以致用，将之前的前端知识积累加上目前流行的前端框架，以项目的形式展现出来。 源代码：https://github.com/nanyang24/...演示地址：https://ele.n-y.io/ 构建 Vue有自己的脚手架构建工具vue-cli,使用起来非常方便，使用webpac...
Error loading vue.config.js:
02-28
"Error loading vue.config.js" 是指在加载 Vue 项目的配置 vue.config.js 时出现了错误。这个配置文件用于对 Vue 项目进行自定义配置，例如设置代理、配置打包路径等。 出现这个错误可能有以下几个原因： 1. 文件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值