在线咨询办理VIP会员
查看: 16879|回复: 147
Vue.js高仿饿了么外卖App 2016最火前端框架（完整版本包含源代码）
TA的每日心情开心昨天&00:00签到天数: 340 天连续签到: 66 天[LV.8]以坛为家I主题帖子积分
2012年到2017年，感谢各位会员朋友的支持！
接到版权投诉，已删除下载地址！
注明:三六五是一个资源收集整理平台，所有资料均来自互联网收集整理，不对版权承担任何责任，如本站内容侵犯了你的权益请来信告知，我站将第一时间处理。
(44.7 KB, 下载次数: 10)
21:41 上传
(118.38 KB, 下载次数: 29)
04:20 上传
三六五网络学院 - 论坛版权1、本主题所有言论和图片纯属会员个人意见，与本论坛立场无关
2、本站所有主题由该帖子作者发表，该帖子作者与享有帖子相关版权
3、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者和的同意
4、本帖部分内容转载自其它网站，但并不代表本站赞同其观点和对其真实性负责
5、如本帖侵犯到任何版权问题，请立即告知本站，本站将及时予与删除并致以最深的歉意
6、管理员和版主有权不事先通知发贴者而删除本文
帖子永久地址：&<button type="submit" class="pn" onclick="setCopy('Vue.js高仿饿了么外卖App 2016最火前端框架（完整版本包含源代码）\n/thread-.html', '帖子地址已经复制到剪贴板您可以用快捷键 Ctrl + V 粘贴到 QQ、MSN 里。')">推荐给好友
TA的每日心情开心 18:08签到天数: 3 天连续签到: 1 天[LV.2]偶尔看看I主题帖子积分
太棒了太棒了太棒了
TA的每日心情怒昨天&17:58签到天数: 199 天连续签到: 6 天[LV.7]常住居民III主题帖子积分
Vue.js高仿饿了么外卖App 2016最火前端框架
TA的每日心情开心5&天前签到天数: 47 天连续签到: 1 天[LV.5]常住居民I主题帖子积分
谢谢分享！非常不错的教程！
TA的每日心情衰 16:20签到天数: 49 天连续签到: 1 天[LV.5]常住居民I主题帖子积分
看看 这个是什么呢
TA的每日心情怒 12:23签到天数: 129 天连续签到: 17 天[LV.7]常住居民III主题帖子积分
学技术 找教程 就上
花最少的钱，学最多的技术！
TA的每日心情开心 00:10签到天数: 280 天连续签到: 19 天[LV.8]以坛为家I主题帖子积分
谢谢分享！非常不错的教程！
TA的每日心情开心 10:54签到天数: 90 天连续签到: 2 天[LV.6]常住居民II主题帖子积分
不管需不需要，回帖是一种美德!
TA的每日心情怒 00:01签到天数: 150 天连续签到: 2 天[LV.7]常住居民III主题帖子积分
厉害了，感谢分享
TA的每日心情开心 18:34签到天数: 172 天连续签到: 1 天[LV.7]常住居民III主题帖子积分
TA的每日心情奋斗前天&13:58签到天数: 121 天连续签到: 2 天[LV.7]常住居民III主题帖子积分
积极宣传本站，为本站带来更多注册会员
积极宣传本站，为本站带来更多的用户访问量
长期对论坛的繁荣而不断努力，或多次提出建设性意见
活跃且尽责职守的版主
曾经为论坛做出突出贡献目前已离职的版主
为论坛做出突出贡献的会员
本站VIP会员
关注微信公众号项目vue2.0仿外卖APP（六）
goods 商品列表页开发
除了商品之外还有购物车，还有个详情页，挺复杂的。
两栏布局：左侧固定宽度，右侧自适应，还是用flex。
因为内容可能会超过手机高度，超过就隐藏。左右两侧的内容是可以上下滚动。
good.vue：
为了兼容性问题呢，设置flex之后还设置了宽度，使得在不兼容flex的浏览器也能有80px的宽：
外壳就是这样了：
开始填内容了
同样的，我们还是利用vue-resource这个技术去拿到数据，获取goods数据：
goods需要用data去绑定，因为后面需要用到goods的数据在DOM上，需要添加getter，setter
也就是一开始这个goods为空，然后通过vue-resource获取。
左侧menu布局
还有个type字段，跟上一节的support是相似的。
接着写样式：
我们看到：
这里有一个需求，它需要垂直居中，那多行的怎么办呢？用table，table是垂直居中最好的布局。
右侧食品列表布局
食品列表是跟分类是有对应关系的，每一个分类有对应的标题，还有分类下所有的商品，这个商品有可能是数组。
关于右侧列表食品的标题样式
食品样式，因为图片右边的文字介绍的宽度是自适应的，所以还是会用到flex布局。
在每一个内容里面都有1像素，但是最后的元素是没有1像素的，所以应该去掉
在mixin.styl里：去掉1像素
在goods.vue
因为上下两个item中体格的向下margin跟另一个向上margin会重合，所以这里还要设置padding：
但是在最后一个的话它就会有显示了，所以要置为0：
接下来就来让这两块滚动
better-scroll运用
inspired by iscroll, and it has a better scroll perfermance
作者为什么重写呢？因为iscroll已经很久没人维护了，bug也没人修复。
同样在package.json引入
因为这个库需要获取DOM，所以用vue2.0中的ref属性。
这里ref属性用的是等于号。
测试一下：
定义_ini()这样一个方法并且打印出来，执行就成功了。
这时可以查看元素：
已经添加一些样式了，但是还不能滚动，为什么呢？因为它在计算高度的时候，当我们去初始化这个BScroll的时候，它的DOM在vue更改数据的时候会跟着做映射，但实际上vue在更新这个DOM的时候是一个异步的，在回调里面更新，所以这里虽然改变了数据，但是DOM仍然没有变化，这是去初始化它的时候对它高度的计算就会有问题，所以这里需要用vue一个接口：
这样就可以滚动了。原理就是获得高度数据之后跟wrapper的高度作比较，大于就可以滚动。
接下来就是右边滚动时左边有高亮。
我们依赖的就是右边滚动的时候实时变化的Y值，也就是纵坐标。Y轴落到哪个区间左边就对应哪个区间。
要知道Y值落在哪个区间，就要知道每个区间的高度。
首先先计算整体区间的高度：用数组记录各个区间的高度，记录之后在监听这个滚动的时候能实时拿到这个Y坐标，然后去对比这个坐标落到那个区间，然后就可以得到当前左侧高亮的索引值是多少，然后在利用vue的class绑定把这个高亮的效果给写出来。
计算右侧索引的高度：
就在拿到数据后边去计算：
定义一个方法，这个方法用一个变量去存它，它是一个数组，是Y轴累加的过程
可以添加一个class：food-list-hook，用来被JS选择。
let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
第一个先存height=0，然后在累加每个区间
然后再实时拿到当前右侧的Y值，跟左侧索引做一个映射
定义一个变量：scrollY，并且跟踪它：
scrollY的变化就很简单。利用better-scroll的一个事件接口。
滚动的时候实时拿到这个scrollY：
接下来就要跟左侧做映射：
就要用到vue的计算属性
获取当前索引
设置样式，当currentIndex等于index是就设置样式，class=current：
接下来再实现左侧的点击功能
需要加一个click属性。
为了让移动端和PC端点击一样（PC端会触发两次）
这样就满足了：因为那个event的属性在PC端是没有的，这样就不用执行两次了。
当我们在写vue的开发应用的时候，遇到了某些好原生的库做交互的时候要注意几个点：
1、通过定义ref这个属性去访问到DOM，就可以拿到它了
2、this.$nextTick()这个借口：当我们想要去计算跟一些DOM相关的东西的时候，我们一定要把这个DOM渲染在里面，因为在VUE里面，虽然说DOM是数据的自然映射（改变数据就改变DOM），但是DOM真正发生变化其实是在nextTick这个回调函数后。所以在操作原生DOM的时候一定要调用这个借口。
这个会有多种状态。比如购买的话购物车的图标会亮，超过20元的话20元起送的区块会亮。
接下来我们就来创建一个购物车组件shopcart.vue ：
然后在引入到good.vue组件，并在component注册
这样就可以写入了&shopcart&&/shopcart&
可以在查看元素看到shopcart这个组件：
接下来就来开发它的布局
可以看到，购物车右边content-right的宽度是固定的，左边content-left的宽度是自适应的。所以还是用flex布局。
因为购物车会一直在底部，所以要fixed定位，shopcart还要设置z-index，因为会有多层。
购物车图标Logo-wrapper这个区块会超出，所以需要设置宽高和定位，而且这里的box-sizing: border-box，还要设置个background: #141d27才看得到。
这里有个细节：就是class=&price&这个元素居中使用的是：
margin-top: 12px
line-height: 24px
为什么不直接用line-height呢？因为这个price后面还有一个间隔线，需要用margin。
class=desc元素中的配送费是从父组件传过来的，所以在good.vue初始化shopcart组件时可以传入一些参数。传个配送费和起送费
这样就可以在shopcart.vue用了
但是还是报错了：
是因为我们要在外层的app.vue中传入seller数据，这样我们才可以在goods.vue组件获得这个seller
这样问题就解决了。
但是呢，这里的数据没有显示：
这是因为我们还要在shopcart.vue接受这个seller，否则是没有用的
这样数据就是通过一层层地传递，通过router-view把seller传到goods.vue组件，再由good.vue再把seller穿戴shopcart.vue组件，shopcart.vue拿到这个变量就可以用了。
还有个&起送价&的区块
这样基础样式就搞定了：
接下来就要给购物车添加状态，这些状态是对选择商品有一个映射。这里选择多少商品也是通过props去获取父组件的数据，毕竟你是在父组件选择商品的而不是在购物车选择商品的
这里的default就是个函数了。因为在vue.js里面，如果props是一个Array或者Object，default就需要是一个函数。
计算总价：
这样就可以了。
再给它写入一些数据测试一下：
接下来还有为购物车的状态添加一些样式
所有这些状态变化都是与selectFoods的数据相关的，比如：
再添加一些值，购物车就会变化：
这里照样还是要计算，先计算一个totalCount，表示所有商品的总和。就是对selectFoods里面拿到的count做累加。
这时候需要在模板里面再写一个div来显示这个totalCount：
接着：购物车的totalCount大于0时就会高亮：
还有price也要加高亮，跟上面相似。
这里还有一个细节：购物车清空的话，上面的小红标也要去掉，这里需要加v-show：
还有右边的content-right
它有三种状态，当没有商品的时候，它是初始状态；接着选了商品之后是显示还差多少元起送；最后达到起送价是显示高亮&去计算&。
这里依然用计算属性去描述它
补充：ES6对字符串的拼接有个扩展，就是用&&` &，引号反过来写。
接下来就是样式了
还需要绑定class，因为这里有两个状态，所以这里可以绑定一个变量。一个是起送价还没到的原始状态，另一个是商品价格超过起送价的高亮状态：
并且计算属性：
这样就完成了&，这个过程都在围绕父组件传过来的selectFoods进行状态变化，这里vue数据驱动确实带来很多方便。
接下来就要添加按钮了，因为项目中多次用到，所以也要抽象成一个组件cartcontrol.vue
这个按钮是和商品有关联的，也有个数。所以这个cartconcontrol组件要接受一个数据。也就是说，我们调用这个购买组件的时候，要传入关联的food，因为我们去给它增加和删除都是关联它的个数food.count.
在good.vue引入组件。
有的按钮有时是不会显示的，比如food.count为0的时候，减号按钮和数值不会显示：
在goods.vu e组件中，我们还要给它包装一层div，因为还得设置样式呢。而且还要把food对象传入
可以在查看元素里面看到很多对象。
接下来添加样式：
有个技巧性东西，就是因为按钮很小，所以我们来增加padding，让它的点击区域变大，增加用户体验。
在goods.vue组件添加样式
接下来写逻辑：点击加好food.count会加1，并且减号和数字显示
但是这样点击会没有响应，因为我们这个addCart是在food-wrapper面板里面，那这个面板是使用better-scroll插件，这个在移动端点击的话需要给他在初始化better-scroll的时候传一个参数。这就需要在goods.vue组件添加click：true
同样的，这样点击的话在PC端也会点击一次又两次响应。
所以还是老办法，通过event去判断
这样就只有一次了。
但是页面上的减号却没有出来。这其实是vue.js的一个特性，也就是说当我们去给一个观测对象添加一个它不存在的字段的时候(比如food.count)，我们这样直接赋值是不可以的，它是检测不到增和减的变化的。所以在新增和删除某个字段的时候，我们想要它观察到这个变化，我们就需要用一个接口，先cartcontrol.vue引入全局的vue。
然后就用vue.set这个接口，这样就能被观测到
数字的样式：
接下来实现减的逻辑
这样就搞定了
现在把按钮和购物者关联起来
当我们使用cart按钮时，修改的是food.count属性，这里的food是父组件传过来的对象
当我们更这个对象增加属性（count），也就修改对象本身，它就会影响父组件good.vue。在调cart的时候需要传selectFood
就是去遍历，然后获得foods，这个foods是什么呢？
然后点击加号，就会有
就是先把foods清空，然后在遍历全部商品，再将得到的商品分组继续遍历，将有选择的加入到foods数组，这样再把foods数据传给shopcart.vue
这里的foods数组中的每一项都是一个完整地food对象，所以不仅仅包括price和count。
总之，这个过程就是将shopcart组件和cartcontrol组件的数据结合起来。 计算属性selectFoods观测goods对象，一旦goods对象发生变化（因为我们在之前用到foods.count，有变化就说明goods变化），就会被重新计算，把逻辑重新执行一遍，并且遍历每一个单个的food，有count的话就说明这个food被我们选择了，这时就加入数组。
流程大概就是这样：在cartcontrol.vue中，我们会通过点击按钮去改变food.count --& goods.vue监听到可也会改变相应的数据,也就是选择的数据 --& selectFoods会遍历所有food对象并把有变化的数据对象加入到数组中 --& shopcart.vue检测到这些数据的变化就会获取并呈现在购物车。
最近用vue.js做一个仿饿了么外卖APP的项目,现在也把流程啊什么的暂时先整理一下在这个博客上面. 当然,这个过程会有点长,不过确实能学到很多东西. 话不多说,马上开始吧. 1.项目介绍 选用当前最 ...
header组件 vue-resourse应用 /pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHtt ...
组件拆分 先把项目搭建时生成的代码给清了吧 现在static目录下引入reset.css 接着在index.html引入,并且设置&meta& 有时候呢,为了让代码符合我们平时的编码习惯, ...
vue-cli开启vue.js项目 github地址:/vuejs/vue-cli Vue.js开发利器vue-cli,是vue的脚手架工具. 在工地上,脚手架是工 ...
项目的结构如下:
项目资源准备 准备项目的各种图片资源等等 注意:在webpack可以不用css sprite,直接用单张图片,因为它会帮忙打包. 还有SVG图片, ...
ratings评价列表页实现 在ratings.vue组件里开发 首先先引入seller数据: 书写模板结构: 由于评价页又有之前写过的star.vue组件,所以又要在ratings.vue组件引入: ...
之前的博文&Android中使用ExpandableListView实现好友分组&我简单介绍了使用ExpandableListView实现简单的好友分组功能,今天我们针对之前的所做的仿微信 ...
项目描述 之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + ...
最近用vue2.0做了个活动.做完了回头发现,好像并没有太多的技术难点,而自己好像又做了比较久...只能说效率有待提升啊...简单总结了一些比较细节的点. 1.对于一些已知肯定会有数据的模块,先用一个 ...
.环境配置 2)
.提取页面 2).动态生成菜单(无限级别树) 2.系统环境配置 项目需要程序数据支撑,这里选择MVC5.0+EF6.0[SQLSERVER](不对MVC架构和SQ ...
清晰呈现 启动和停止 布局 导航 层级式 扁平式 内容/体验主导式 总结 动画 注意点 品牌化 当你需要在 app 中提醒用户品牌的存在时,请遵循以下准则: 以优雅谦逊的方式整合品牌资产.人们使用你的 ...
困难的串 题意: 如果一个字符串包含两个相邻的重复子串,则称它是“容易的串”,其他串称为“困难的串”.例如,
BB.ABCDABCD都是容易的串,而D.DC.ABDAD ...
ssh连接linux服务器只显示-bash-4.1#不显示路径时,我们只需要修改
~/.bash_profile文件,如果不存在这个文件,那么新建一个,增加内容
export PS1='[\u@\ ...
object: Scala中没有静态修饰符,static,在object下的成员全部都是静态的,如果在类中声明了与该类相同的名字的object则该object是该类的&半生对象&, ...
rdesktop-1.7.0.tar.gz [root@localhost fcitx]# tar rdesktop-1.7.0.tar.gz [root@localhost fcitx]#cd rd ...
我们经常在工作中用到对List,Dictionary对象的Foreach遍历,取出每一项. 其实这个接口很简单,只有一个属性2个方法. [ComVisible(true), Guid(&49 ...
远程消息推送处理场景有三种:分别是app还没有运行.app在前台运行以及app在后台运行,下面介绍相关流程及三种场景下处理步骤 1.流程 (1)注册通知 首先是在注册远程消息推送,需要注意的是iOS8 ...
shell编程很强大! 网站访问量大的时候mysql的压力就比较大,当mysql的CPU利用率超过300%的时候就不能提供服务了,近乎卡死状态,这时候最好的方法就是重启mysql服务.由于这种事具有不 ...
--拆分的方法有很多,临时表.SUBSTRING ...但都不如XML来得清凉爽快 ) set @tempstr='54,57,55,56,59' declare @Xmlstr xml set @X ...老师讲得很好，通俗易懂，一听就懂，视频我看到79%就接到一单2w的单了，项目用到vue组件化开发方式，让我开发效率大大提高，我也深深体会了数据驱动的厉害之处；利用晚上时间，一个月就完成任务了。必须5※好评啊！感谢老师，感谢慕课网，200 换2w
享悦moonlight
这课程是带领屌丝逆袭的好课程，比其他网站的实战课程好太多了， 反正跟着做下来感觉到的是在舒服的环境下完成艰难的学习，必须点赞
北京科技大学毕业，计算机专业硕士。曾任职百度，现就职滴滴，前端技术专家，擅长前端自动化、工程化，前端架构方向。业余时间喜欢写点h5小游戏，偶尔造造轮子喜欢关注业界一些新技术，乐于分享，开源对代码有洁癖，追求高质量的代码。
Copyright (C)
All Rights Reserved | 京ICP备 号-2Vue.js高仿饿了么外卖App之嵌套路由 - 简书
Vue.js高仿饿了么外卖App之嵌套路由
Vue.js高仿饿了么外卖App实战中，讲师的Vue版本是2.2.1，而最新安装的是2.2.6版本。
创建一个基于 webpack 模板的新项目：
vue init webpack my-project
创建完会看到初始化的目录结构和以往的不同了
以前渲染首页主要涉及的HTML和 js文件有
/index.html 、 /src/main.js 、 /App.vue
而现在多了 /src/router/index.js
和 /src/components/Hello.vue ，因为新增了路由，在index.js中配置好路由，App.vue中直接渲染组件Hello.vue。相当于以前渲染App.vue的页面，现在跳转至渲染Hello.vue页面。
如果想实现组件切换的效果：
，旧版本的Vue是参照按以下步骤配置路由的：
App.vue渲染匹配的组件：
&!-- 使用 router-link 组件来导航. --&
&!-- 通过传入 `to` 属性指定链接. --&
&!-- &router-link& 默认会被渲染成一个 `&a&` 标签 --&
&div class="tab-item"&&router-link to="/goods"&商品&/router-link&&/div&
&div class="tab-item"&&router-link to="/ratings"&评论&/router-link&&/div&
&div class="tab-item"&&router-link to="/seller"&商家&/router-link&&/div&
&!-- 路由出口 --&
&!-- 路由匹配到的组件将渲染在这里 --&
&router-view&&/router-view&
main.js配置路由：
// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
// 1. 定义组件。
// 可以从其他文件 import 进来
import goods from 'components/goods/goods';
import ratings from 'components/ratings/ratings';
import seller from 'components/seller/seller';
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [{
path: '/',
redirect: '/goods'
path: '/goods',
component: goods
path: '/ratings',
component: ratings
path: '/seller',
component: seller
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
/* eslint-disable no-new */
el: '#app',
render: h =& h(App)
而2.2.6版本的Vue 已经配置好了路由，只需
Hello.vue渲染匹配的组件：
&div class="tab-item"&&router-link to="/goods"&商品&/router-link&&/div&
&div class="tab-item"&&router-link to="/ratings"&评价&/router-link&&/div&
&div class="tab-item"&&router-link to="/seller"&商家&/router-link&&/div&
&router-view :seller="seller"&&/router-view&
index.js配置子路由：
// 1. 定义组件。
import goods from '../components/goods/goods';
import ratings from '../components/ratings/ratings';
import seller from '../components/seller/seller';
export default new Router({
path: '/',
name: 'Hello',
component: Hello,
redirect: '/goods',
// 2. 配置子路由
children: [
{ // 当 /goods 匹配成功，
// goods 会被渲染在 Hello.vue 的 &router-view& 中
path: 'goods',
component: goods
path: 'ratings',
component: ratings
path: 'seller',
component: seller
参考文档：
讲师代码： vue-router：学习Vue.js也有一阵子了，为了加深对Vue的理解及运用，做了一个小项目。这是一个高仿饿了么外卖WebApp，现已完成商品预览、商品详情、商家预览、添加购物、查看评论等功能。
（请尽量使用手机预览）
移动端也可扫描以下二维码预览
虽然项目较小，但常用的技术工具均有使用，本项目对于vue初学者来说，难度适宜，可以从中学到各种工具的运用，若能独立完成此项目，对自动化构建vue项目将有很大帮助。正在学习Vue的同学，不妨亲手试试吧。本项目使用到的技术栈有：
MVVM框架：
状态管理：
前端路由：
服务端通讯：
滚动插件：
构建工具：
css预处理：
线上预览版本数据为mock数据，未使用axios从服务器端获取，若想了解axios在本项目中的使用，可并clone到本地查看。
上文中已贴出源码地址，供有兴趣的同学查看，欢迎star或fork。
阅读(...) 评论()