Vue.js高仿饿了么外卖APP（二）具体样式遇到的问题

最新推荐文章于 2025-06-06 16:15:13 发布
最新推荐文章于 2025-06-06 16:15:13 发布
阅读量1.3k 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/joseydon/article/details/78168787
本文介绍了一些CSS技巧，包括如何使溢出的文字显示为省略号、去除相邻元素间的空白、设置背景图片的模糊效果，以及使用flex布局进行粘性页脚的设计。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  • 实现多余文字数据变成…效果（有高度的前提）

  • white-space:nowrap
    overflow:hidden
    text-overflow:ellipsis

  • 两个span挨着会有空白间隙，方法是给它们的父元素设置font-size为0（这样会使上述的…消失），这个时候使得两个span没有间隙就可以了。

  • 设置背景图片
    这里写图片描述
    这里写图片描述
  • 模糊效果filter:blur(10px)背景图片用rgba。
  • css sticky footers布局
    这里写图片描述

这里写图片描述

这里写图片描述

毛球Josey
关注
基于react+redux仿饿了么
Quiet-Night的博客
10-12 3990
基于react+redux仿饿了么
Vuejs高仿饿了么外卖App
08-12
Vue.js高仿饿了么外卖App
Vue.js高仿饿了么外卖APP（三）具体样式遇到的问题2
毛球Josey
10-14 791
goods部分调试时，favicon.ico资源加载失败问题 http://blog.csdn.net/xiejunna/article/details/73200605Failed to resolve directive: el vue2报错 http://blog.csdn.net/yp090416/article/details/74087255"better-scroll":"^0.1
简易Vue2点餐应用的代码（使用vscode完成）
最新发布
hnlucky的博客
06-06 311
摘要：本项目基于Vue2框架开发了一个简易点餐应用，包含菜单展示、购物车管理和结算功能。核心组件包括Menu.vue（展示菜品信息）和Cart.vue（管理购物车商品），通过事件机制实现组件间通信。系统支持菜品浏览、添加/移除商品、数量统计和总价计算，采用响应式设计适配不同设备。技术栈包含Vue2核心框架，项目通过VueCLI搭建，运行需安装Node.js环境。该应用实现了完整的点餐流程，包括商品展示（6种预设菜品）、购物车操作和模拟结算功能。
vue入门实战教程 - 用vue高仿饿了吗APP
热门推荐
大灰狼的小绵羊哥哥的博客
12-23 3万+
滴滴出行的一位哥们录制的视频，收费的，价格198元，我这里不是打广告，我不认识他。不过对于vue的入门还是不错的，使用的是vue1.0框架，虽然现在已经是vue2.0, 不过2.0基本上只是多了virtual-DOM，Templates || JSX || Hyperscript，流式服务端渲染及一些性能优化，并且管方也有详细的1.0到2.0的迁移教程，懂1.0了，2.0也不用怎么去学习了。
Vue.js 高仿饿了么外卖APP 1.0到2.0版本完美升级
03-09
vue.js高仿饿了么WebApp 1.0到2.0版本完美升级 介绍 学习Vue.js也有一阵子了，为了加深对Vue的理解及运用，做了一个小项目。这是一个高仿饿了么外卖WebApp，现已完成商品预览、商品详情、商家预览、添加购物、查看评论等功能。 部分截图 路由展示 商品分类及添加购物 商品详情及购物车 项目预览 源码地址 点击预览（请尽量使用手机预览） 移动端也可扫描以下二维码预览 扫一扫查看 技术栈 虽然项目较小，但常用的技术工具均有使用，本项目对于vue初学者来说，难度适宜，可以从中学到各种工具的运用，若能独立完成此项目，对自动化构建vue项目将有很大帮助。正在学习Vue的同学，不妨亲手试试吧。本项目使用到的技术栈有： MVVM框架：Vue.js(2.x) 状态管理：Vuex 前端路由：Vue-router 服务端通讯：axios 滚动插件：iscroll 构建工具：webpack css预处理：stylus
vue 高仿饿了么源码
04-05
挺不错的一个例子 对我学习vue帮助很大 。
vue-sell：Vue.js高仿饿了么外卖App课程原始码http：//coding.imooc.comclass74.html
02-28
Vue.js高仿饿了么外卖App课程原型，课程地址： ://coding.imooc.com/class/74.html 本原始代码基于GPL协议，仅用于Vue实战项目的学习，不可作为商业用途。 你可以学到什么 我们可以通过一张图来认识一下本课程的知识...
Vue.js 高仿饿了么外卖项目源码
10-17
本项目做的是：高仿上线外卖APP商家模块 开发过程：需求分析-脚手架工具-数据mock-架构设计-代码编写-自测-编译打包 以线上生产环境来开发：代码开发及测试环节：UI标注完美还原设计图、以真实外卖APP数据做演示，以...
Vue.js高仿饿了么外卖App.txt
04-10
第3章 Vue-cli开启Vuejs项目 第4章 项目实战-准备工作 第5章 项目实战-页面骨架开发 ... 共 12章 项目技术架构 vue-cli（脚手架工具） vue vue-resource vue-router（路由） vue-infinite-scorll ...
基于Vue.js高仿实现饿了么外卖App.zip
08-21
基于Vue.js高仿实现饿了么外卖App
react-饿了么外卖React版本
08-15
饿了么外卖 React版本
react-native-elm:仿饿了么项目，react-navigation，mobx，redux
05-11
react-native-elm 项目服务器参考地址为 完成功能： 1、商品列表 2、定位 3、分类展示 4、店铺展示 5、评论 5、搜索商品 6、历史订单 7、登录 8、修改用户名 9、修改密码 10、收货地址 11、余额查询 12、优惠券查询 13、积分查询 14、会员相关 项目运行 git clone cd react-native-elm npm install Run react-native run-android 1、cd ios && pod install && cd .. 2、react-native run-ios License The MIT License. 如果对您有帮助，您可以点右上角 "Star" 支持一下 谢谢！ ^_^
基于vue开发的外卖点餐app前端源码
12-28
基于vue开发的外卖点餐app前端源码 项目描述 给想用vue做前端的小伙伴提供前端源码，这是之前刚vue的时候，呕心吐血的，会vue的就把依赖导入, npm install npm run dev 运行环境 cmd,nodejs,浏览器 项目技术(必填) vue+js 是否原创(转载必填原文地址) 原创 运行视频 链接: https://pan.baidu.com/s/1mOIPWX62KMB1U3evf92whQ 提取码: c13r
基于Vue的点餐外卖应用设计源码
04-18
本项目是基于Vue的点餐外卖应用设计源码，包含45个文件，其中主要包含22个vue前端文件，12个js脚本文件，2个jpg图片文件等。系统采用了Vue框架和JavaScript编程语言，实现了外卖点餐的功能，包括菜品浏览、订单提交、支付等流程。项目结构清晰，代码可读性强，易于理解和维护。
外卖扫码点餐独立全开源小程序源码uniAPP+VUE前端
05-18
外卖扫码点餐独立全开源小程序源码uniAPP+VUE前端 uniapp前端 Vue后台管理 vue-cli-service laravel+mysql5.7 全开源 100%开源 稳定运营 值得入手的好源码
react版高仿饿了么webapp
weixin_34375054的博客
05-18 427
前言 一个月前滴滴外卖进军无锡，打起来外卖大战
全新Vue.js2.5+cube-ui重构饿了么App（经典再升级）
m0_59287406的博客
04-13 194
可以是你正在学习的东西，也可以是你认为很酷的东西，更可以是你正在工作的东西，皆可。可以是你正在学习的东西，也可以是你认为很酷的东西，更可以是你正在工作的东西，皆可。但是，最重要的是，你将了解到其他人是如何看待编程的。还有你遇到的那些小问题，已经有无数前辈也曾遇到过，他们总结了并分享在互联网上了，前人的经验是你的宝贵资源，要善于利用谷歌等软件。还有你遇到的那些小问题，已经有无数前辈也曾遇到过，他们总结了并分享在互联网上了，前人的经验是你的宝贵资源，要善于利用谷歌等软件。你需要挑战自我，并超越熟悉的领域。
Vue.js 2.5 + cube-ui 重构饿了么 App（知识总结--完善中）
weixin_44205155的博客
02-19 808
mixin 的用法 作用： 混合机制–mixins，用来更高效的实现组件内容的复用 mixin与组件引用的区别 单纯组件 引用：组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。 模式：父组件 + 子组件 >>> 父组件 + 子组件 mixin 引用： 在引入组件之后，则是将组件内部的内容如dat...
Vue.js仿饿了么外卖App开发实践
资源摘要信息: "基于Vue.js高仿实现饿了么外卖App.zip" 知识点： 1. Vue.js框架: Vue.js是一个轻量级的前端JavaScript框架，它采用了MVVM的模式，将视图层与数据层分离，实现了数据的双向绑定。Vue.js通过简洁的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值