vue2.0仿饿了么webapp

最新推荐文章于 2024-07-23 17:06:34 发布
最新推荐文章于 2024-07-23 17:06:34 发布
阅读量7.9k 收藏 5
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xqnode/article/details/61618994
版权

经过几天的学习，vue2.0仿饿了么app终于完成，老师使用的是vue1.0版本，我已经自己改成了vue2.0版本，之前也看到过别人发布过同样的博客，大家都是一起学习，一起进步。
地址：

https://github.com/RegToss/Vue-SPA

还请大家多多支持啊，方便的话动动您的小鼠标给个star，在此感谢各位了。
技术难点：

  • vue父子组件、兄弟组件通信和传输数据。
  • vue-router的使用。
  • vue获取url里的id作为唯一数据标识来读取数据(localstorage)。
  • 使用缓存：keep-alive。

vue2.0还有很多新的特性没有使用到，最近也在积极的看官网文档，有问题大家可以和我交流哦，我的邮箱：xiaqingweb@163.com

程序员青戈
关注
专栏目录
基于vue的仿饿了么webapp
喜欢前端的后端 MelodyJerry
01-06 1448
1、项目介绍 此项目为外卖App核心的商家模块的SPA SPA是为构建WebApp设计的路由控制和视图转换框架 包括商品、评论、商家介绍、购物车等多个子模块 使用 Vuejs全家桶 + ES6 + Webpack 等前端热门的技术 采用 模块化、组件化、工程化 的模式开发 模块与组件 模块 JS模块 具有特定功能的JS文件 组件 功能组件/模块 是实现界面某个局部功能的所有资源的集合(html/css/js/image等) 联系 一个组件中一般会使用到多
vue2.0+仿饿了么项目遇到的一些问题
weixin_45585103的博客
03-27 1032
vue2.0+仿饿了么项目遇到的一些问题 前言： 这是学习了黄轶老师的视频改的2.0版本。作为一个新手来说，中间遇到了很多的问题，多亏了网上也有遇到同样问题的小伙伴们的提问和解答，才能成功让我写完了这个项目。这里记录一些我遇到的一些问题，希望可以帮助到有同样困惑的小伙伴。其中还有一些问题是未解决的，希望得幸能让大神看到，提供您宝贵的建议，包括一些已解决问题可能说错的一些地方，也欢迎大家来指正。（可...
Vuejs高仿饿了么外卖App
08-12
Vue.js高仿饿了么外卖App
本地运行github上的vue2.0仿饿了么webapp项目
祈澈菇凉
09-05 1727
在vue刚刚开始流行的时候，大多数人学习大概都见到过这样的一个项目吧，可以作为学习此框架的一个模板了 图片.png github源码地址：https://github.com/RegToss/Vue-SPA 课程教程：http://coding.imooc.com/class/74.html 首先搭建好vue的运行环境 1：安装node 端...
【vue前端项目实战案例】之Vue仿饿了么App
最新发布
柯晓楠
07-23 1018
该项目是一款仿“饿了么”商家页面的外卖类App，主要有以下功能。首先需要安装Node.js 12以上的版本，因为Node.js中已经继承了NPM，所以无需在单独安装NPM。然后再安装Vue脚手架（Vue-CLI）以及创建项目。 项目的调试使用Google Chrome浏览器的控制台进行，在浏览器中按下F12键，然后单击“切换设备工具栏”，进入移动端的调试界面，可以选择相应的设备进行调试，效果如图1 所示。
vuejs滚动条_Vue.js仿饿了么滚动条|vue自定义模拟滚动条组件VScroll
weixin_36378232的博客
12-30 303
介绍vscroll一款基于vue2.x开发的PC桌面端自定义虚拟滚动条组件。支持是否原生滚动、滑出是否自动隐藏、滚动条大小、层级及颜色等功能。如上图：同时支持垂直/水平滚动条。通过非常简单的配置 即可快速生成一个虚拟美化滚动条。配置参数props: {// 是否显示原生滚动条native: Boolean,// 是否自动隐藏滚动条autohide: Boolean,// 滚动条尺寸size: {...
vue高仿饿了么APP（一）
allenmu1982的博客
11-17 203
在网上找了一个vue的视频教程---高仿饿了么，讲得不错，自己也跟着讲师做了一遍，现在来帮自己整理，总结一下，加深对vue的理解。 一，功能技术分析 1，利用vue-resource实现前后端数据交互。 2，使用vue-router做前端路由实现单页应用。 3，实现列表滚动，--第三方js库better-scroll 4，收藏商家功能，使用html5的localstorage ...
基于vue来开发一个仿饿了么的外卖商城（一）
apzlm9110的博客
12-11 993
一、准备工作 1.大前提：已安装好node、 npm、 vue、 vue-cli、stylus（此项目使用stylus来编译） 2.开发软件：Google Chrome（建议安装插件vue-devtools，方便调试），webstorm / sublime Text / VS Code （推荐使用webstorm，sublime 和 VS Code需要安装相应的插件） 3.项目结构...
Vue2.0仿饿了么webapp单页面应用详细步骤
08-27
Vue2.0仿饿了么WebApp单页面应用详细步骤 从技术角度来说，本篇文章充分展示了使用Vue2.0框架开发饿了么webapp单页面应用的详细步骤，从安装 Node.js 和 Git 到使用 Vue-Cli 工具安装依赖项，最后到发布代码的整个...
Vue20仿饿了么webapp单页应用
08-10
总的来说，这个Vue2.0仿饿了么Webapp项目展示了如何综合运用多种前端技术，构建一个功能丰富的单页面应用。它涵盖了前端开发的多个重要方面，如状态管理、网络请求、路由控制、页面滚动以及样式编写，对于学习和掌握...
vue2vuerouter2es6webpack高仿饿了么Webapp商家详情核心模块
08-10
这个文件名表明这是某个开发者（可能是名为“ljq”的人）创建的一个关于饿了么Web App的Vue项目副本，命名为“eleme”（饿了么的英文名），并且是master分支的代码，通常代表项目的主线或者稳定版本。在实际开发中，...
vue仿饿了吗源码
01-16
vue仿饿了吗源码，带UI设计图，webpack配置文件, 注释详细，下载下来就可以运行
vue-elm-seller:高仿饿了么商家店铺的单页面应用
05-30
vue-elm-seller 线上预览 安装依赖 npm install 开启一个具有热重载功能的开发服务器 npm run serve 构建项目 npm run build 主要功能 商品菜单联动导航展示 添加移除商品到购物车 购物车商品列表 清空购物车 确认支付提示 查看商品详情 商品评价 店铺综合评论 商家信息展示 商家收藏 商家详情弹窗 商品滚动列表菜单标题吸顶 添加商品到购物车时的动画效果 项目整体优化 技术栈 vue better-scroll lib-flexible axios express node javascript less css es6/7 webpack vue-cli 项目目录 ├── public │ ├── data // 服务端接口数据 │ │ ├── goods.json │ │ ├── ratings.json │
vue饿了么app
01-12
此项目大大小小共 45 个页面，涉及注册、登录、商品展示、购物车、下单等等，是一个完整的流程。一般公司即便是官网的单页面项目都没这么复杂，如果这个项目能驾驭的了，相信大部分公司的其他单页面应用也就不在话下，即便更复杂，也不会比这个高到哪里去。
vue2.0 项目实战 饿了么APP
11-17
vue2.0 项目实战 饿了么APP,特别适合毕业设计、实习项目、学习检验，价值1999元免费赠送
vue项目（高仿”饿了吗”外卖App）.docx
08-17
此项目为外卖App核心的商家模块的SPA，包括商品、评论、商家介绍、购物车等多个子模块，使用Vuejs全家桶+ES6+Webpack等前端最新最热的技术，采用模块化、组件化、工程化的模式开发； 显示/隐藏优惠和公告详情 <template> <div class="header"> <div class="content-wrapper"> <div class="avatar"> <img width="64" height="64"src="seller.avatar"> </div> <div class="content"> <div class="title"> <span class="brand"></span> <span class="name">{{seller.name}}</span> </div> <div class="description"> {{seller.description}}/{{seller.deliveryTime}}分钟到达 </div> <div class="support" v-if="seller.supports"> <span class="icon" :class="classMap[seller.supports[0].type]"></span> <span class="text">{{seller.supports[0].description}}</span> </div> </div> <div class="supports_count" v-if="seller.supports" @click="showDetail(true)"> <span class="count">{{seller.supports.length}}个</span> <span class="icon-keyboard_arrow_right"></span> </div> </div> <div class="bulletin-wrapper" @click="showDetail(true)"> <span class="bulletin-title"></span> <span class="bulletin-text">{{seller.bulletin}}</span> <i class="icon-keyboard_arrow_right"></i> </div> <div class="background"> <img width="100%" height="100%"src="seller.avatar"> </div> <div class="detail" v-show="detailShow"> <div class="detail-wrapper"> <div class="detail-main clearfix"> <div class="name">{{seller.name}}</div> <div class="star-wrapper">star组件内容</div> <div class="title"> <div class="line"></div> <div class="text">优惠信息</div> <div class="line"></div> </div> <ul class="supports" v-if="seller.supports"> <li class="support" v-for="item in seller.supports"> <span class="icon" :class="classMap[item.type]"></span> <span class="text">{{item.description}}</span> </li> </ul> <div class="title"> <div class="line"></div> <div class="text">商家公告</div> <div class="line"></div> </div> <div class="content"> <p>{{seller.bulletin}}</p> </div> </div> </div> <div class="detail-close" @click="showDetail(false)"> <span class="icon-close"></span> </div> </div> </div> </template> [removed] export default{ props: { seller: { type: Object } }, data () { return { detailShow: false } }, created () { this.classMap = ["decrease", "discount", "guarantee", "invoice", "special"] }, methods: { showDetail (isShow) { this.detailShow = isShow } } } [removed]
Vue仿饿了么app项目总结
weixin_45566319的博客
09-02 2055
前言 这是我的第一个基于Vue项目的作品，目的是把之前的前端知识累积加上目前流行的前端框架，以项目的形式展示出来。 大家在学习Vue的时候，可以将此项目作为学习Vue框架的一个模板 Vue仿饿了么app项目总结 效果图 这个最后做出来的效果图 Vue仿饿了么app项目总结 Vue仿饿了么app项目总结 Vue仿饿了么app项目总结 Vue仿饿了么app项目总结 Vue仿饿了么app项目总结 Vue...
vue结合饿了么_vue高仿饿了么APP（一）
weixin_39685697的博客
12-19 496
在网上找了一个vue的视频教程---高仿饿了么，讲得不错，自己也跟着讲师做了一遍，现在来帮自己整理，总结一下，加深对vue的理解。一，功能技术分析1，利用vue-resource实现前后端数据交互。2，使用vue-router做前端路由实现单页应用。3，实现列表滚动，--第三方js库better-scroll4，收藏商家功能，使用html5的localstorage5,图标字体的使用6，移动端1像...
Vue2.0 仿饿了么app问题解决
ljs_coding
07-23 340
Q1：shopcart中cartcontrol无法点击 错误提示：【Unexpected side effect of listshow...】 原视频是按照vue1.0来的，在computed属性中定义listshow时出现了以上错误提示，错误原因应该是在listshow方法中对fold进行了修改，而默认是只读的，所以按照加入set和get的方法修改后，不再出现错误，列表也能折叠。但是，ca...
Vue2.0高仿饿了么学习指南：异步数据处理与访问IP优化
本篇文档是一份关于使用Vue 2.0技术进行高仿饿了么项目的详细学习笔记。作者在学习过程中，针对基于Vue 1.0的视频教程所遇到的问题进行了整理，特别关注了在Vue 2.0环境下组件间的通信、props数据传递、v-for指令的...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员青戈

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值