关键词：
参考技术A 1. header组件开发总结1）使用classMap设置优惠活动项
2）设置了公共样式自定义属性：border-1px($color)解决移动端1px问题
bg-image($url) 解决背景图片在不同设备像素比之下的大小
2.header弹出层组件开发
弹出层的内容部分采用 css sticky footer布局 ：
。最外层容器负责该弹出层的整体位置 背景以及控制浮层的展示和隐藏
。外层两个容器一个内容层（清除浮动），一个定在底部的底部层
。内容层里面再建立一个内容层装主要内容
布局 如下：
关于样式 ：
。外层容器 detail-wrapper设置min-height:100%(最小高度有视口那么高)
。detail-close为底部固定层，相对定位，设置-margin值来使它保留在底部
。注意：内容层detail-main设置margin-bottom来为使其不会遮盖住底部固定层
样式如下：
。加入文字进行测试发现文字短的时候close在底部，文字长的时候，close在内容层最底部
控制浮层展示和隐藏 ：
。dom上使用v-show="变量名"进行控制
。实例中设置data函数返回变量名的值为false(默认不展示)
。需要控制点击展示的dom上使用@click=“方法名”
。在实例methods中定义方法使变量名的值为相反
2. 星星组件开发
公共部分抽离成公共组件
。建立组件star接受两个参数星星数和大小，数据类型为Number
。使用计算属性来改变star 类名达到改变大小的目的
。
实现原理：建立一个数组result,声明变量 hasDecimal代表有小数点的情况，integer代表整数的部分。遍历整数部分，将类名on放入数组result中，如果有半星的情况就就放置类名off,剩下的放off。由于半星只会放置一个，所以不需循环。
。在header组件中引用star组件，使用star标签测试成功就可以了
布局方面：
效果：页面左右两边没有滚动条，页面长度超过视口，页面可以上下滑动
解决：定义视口的高度。将视口盒子绝对定位
首先 将商品goods数据mock到页面中，同header中seller数据请求
实现垂直居中使用table
实现页面垂直滚动：
。实现视口里的内容能够滚动，使用better-scroll库 https://github.com/ustbhuangyi/better-scroll/blob/master/README_zh-CN.md
使用：
better-scroll的使用方法就是:引入batter-scroll插件，然后初始化插件（方法是第二个篮圈处,创建变量实例化BScroll并且将dom节点传入。要注意的是第一个篮圈处，vue在数据更改的时候，dom会跟着数据映射，但是vue在跟新dom时其实是异步的，所以初始化时，数据更新但dom并没有变化，计算高度时会有问题，使用this.$nextTick接口可以解决dom更新的问题,可以计算到dom高度，实现滚动效果）
在我们的实际工作中，列表的数据往往都是异步获取的，因此我们初始化 better-scroll 的时机需要在数据获取后 https://cn.vuejs.org/v2/api/#vm-nextTick
better-scroll布局技巧：两层容器 外层容器固定视口高度并overflow:hidden，内容容器装内容，内层超过外层就会滚动
如果需要高度百分百，可以使用绝对定位技巧：
自动生成一个固定高度，宽度百分之百的盒子
。获取dom元素，使用vue提供的API ref
3.实现左右联动效果
计算坐标Y值，右边的Y值在哪个区间，左边就显示相应区间
建立数组记录每个区块的最大高度，计算高度方法也在nextTick中执行，
细节：在类名中加入hook如：list-hick-hook,表示单纯被js选择所用，没有其他实际用途
右侧Y值与左侧所引值做对比
监听滚动位置：使用probeType: 3.(是better-scroll的API)然后在scroll事件中传参pos，获取Y轴位置就是pos.y
判断scroll时，Y轴区间是否在右侧某两个高度区间之间，如果是，则匹配左侧对应的index 值
4.购物车组件开发
。建立，引入，注册组件
。父组件绑定属性传值到子组件
子组件在props中接受值
。做状态绑定计算
先考虑到，将会从父组件传过来一个数组，里面包含被选中的商品的所有信息，这个数组定义为selectedFoods,所有关联的状态变化都依赖于selectedFoods
养成好习惯接收数据时，将数据类型写上，默认值写好，return里面是暂时用来看效果的模拟数据
。通过计算属性计算总价和商品被选择的次数
totalPrice函数返回商品的总价，计算方式是通过选择的商品组成的数组selectedFoods中，遍历每一个被选择的商品以获得价格和被选中的次数，总价等于上次的价格加上商品价格乘以被选择的次数
totalCount函数返回选择的商品总次数（总共选了几件商品），计算方式同上，每个商品的被选择次数相加
。在dom中渲染
由于视图伴随着样式改变，所以这里做一个判断，当价格和次数都大于0时，会加入一个class类名为highlight
。写入highlight样式
最后渲染为
当将count改为0时
。接下来开始完善描述部分和价格部分，他们的状态变化都依赖于selectedFoods
当数据变化时，dom状态会跟着改变。
绑定class时，这里有两种状态，所以绑定的是一个计算属性
computed中：
然后定义好enough和not-enough的样式
状态更新总结：父组件传过来数组selectedFoods,所有状态更新都是依赖于selectedFoods里面的数据。利用数据通过计算属性制定当前状态。
。实现选择商品按钮
将按钮的数值变化与购物车联动起来
按钮会被多次复用，所以分离为一个组件
。按钮组件依赖于count属性，这个属性是原数据没有的
。在写好点击事件之后，发现没有效果，经过验证发现并没有触发点击事件，原因是，右侧的商品版面使用了better-scroll插件，better-scroll在移动端实现点击需要通过在dom节点配置参数（click: true）来初始化点击事件。
。当为dom元素注册点击事件时，发现在PC端点击会出现两次点击事件，所以需要防止触发两次点击事件
。 当 click事件可以正确触发之后，发现内部方法没有起作用，原因是vue的特性，这两个方法依赖于count属性，count属性其实并不存在，当我们为观测对象添加一个它不存在的字段的时候，直接赋值是检测不到变化的，如果需要达到检测目的，需要使用到vue接口（vue.set）来添加属性
。商品增减按钮动画同时需要滚动和平移所以需要两个层分别完成此动画
。实现选择商品与结算界面联动
通过计算属性来得到selecteFoods数组，然后将它传入子组件，子组件接受即可（之前已经部署好状态关联方法）
。实现选择商品小球抛出动画
难点，知道起始点位置也就是商品后面的+小球的位置，是不固定的，需要动态计算
怎样在父组件获取cartcontrol组件下的小球的dom呢？
原理：
1判断当前点的是哪个小球：再点击事件中使用event.target可以获取当前点击事件发生的dom
2将当前小球作为参数传递给父组件：用$emit订阅模式定义一个事件，将小球位置作为参数传递进去。记住：父组件要绑定这个事件来创建一个事件接收此参数。
3将此参数传递到shopcart子组件：在shopcart中定义一个事件drop，在父组件事件中，使用$.refs.shopcart.drop获取自组建的事件并把参数传给子组件
4.这样就完成了，子组件cartcontrol将小球位置作为参数传给父组件,父组件将此参数传递给另一个子组件shopcart的过程。
动画原理：
遍历数组balls,拿到其中的一个false小球将他的状态设置为true，然后将当前小球赋值给ball.el,然后将状态为true的ball放置到数组dropball里面。
5.详情页组件开发
。css技巧：详情页的顶图宽高一样，可是在加载页面时，在图片还没有加载出来时，会造成内容跳动（图片没加载出来，下面内容在上面，加载出来后，内容被挤到下面去）。
优化技巧:图片外部容器设置相对定位，高度为0，宽度100%，再设置padding-top:100%（默认paddingtop和宽度一样。)这样就形成了一个正方形可以先占据图片位置。再为图片设置绝对定位并且top和left为0，即可使图片加载出来后，出现在padding方块的位置。
优化点：keep-alive可以使已经加载过的组件和已经选择的商品不再因为vue-router切换tab而重新渲染。可以保持之前的状态
vue饿了么项目-header组件开发
1.数据传递的理解在App.vue中用到了header组件，首先注册组件components:{‘v-header‘:header}然后才能引用<v-header:seller="seller"></v-header>:seller="seller"的意思是将seller对象传递给v-header中的seller，而v-header中从哪里获得seller呢？通... 查看详情
基于vue来开发一个仿饿了么的外卖商城(代码片段)
一、抽出头部作为一个组件，在底部导航的时候可以相应的显示不同的标题技术点：使用slot进行组件间的通信；父组件给子组件传值（子组件里面通过props接收父组件传过来的数据）查看链接：https://blog.csdn.net/sinat_17775997/article/... 查看详情
vue饿了么项目实战笔记
1.页面骨架开发1.1组件拆分手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局... 查看详情
vue的饿了么写作感受
1.在重复使用的组件中，要把重复使用组件的需要在数据的请求的地方设置为在富组件中，通过props船只到子组件，这样在重复调用次组件的时候既可以很好的避免组件的值的冲突2.getData的使用，把所有的axios请求都在getData中使... 查看详情
vue2.0的通用组件
Element：一套通用组件库的开发之路Element是由饿了么UED设计、饿了么大前端开发的一套基于Vue2.0的桌面端组件库。今天我们要分享的就是开发Element的一些心得。官网：http://element.eleme.io/#/github：https://github.com/ElemeFE/element ... 查看详情
如何评价饿了么开源的vue组件库mintui
我们项目现在正在用vue，但是我们的需求更加的复杂。对于Mint，恕我直言，很多简单的css和html。基本那些调用我都会自己写，自己写一套也花不了多少时间。还有一个就是，这是一个mobile的产品。很多优化并没有做，比如类iscr... 查看详情
用vue制作饿了么首页
...网页，实现原则是将他们分块，然后各个击破。很明显的饿了么首页分为三个部分（组件）， 上面的头部（商家信息）， 中间路由 购物车每部分先占住自己位置，然后挨个将这三部分分别实现完整。我... 查看详情
基于vue来开发一个仿饿了么的外卖商城(代码片段)
一、准备工作1.大前提：已安装好node、npm、vue、vue-cli、stylus（此项目使用stylus来编译）2.开发软件：GoogleChrome（建议安装插件vue-devtools，方便调试），webstorm/sublimeText/VSCode（推荐使用webstorm，sublime和VSCode需要安装相应的插件）3.... 查看详情
vue饿了么项目-goods商品列表页开发
1.flex属性是flex-grow、flex-shrink和flex-basis属性的简写属性。flex-grow一个数字，规定项目将相对于其他灵活的项目进行扩展的量。flex-shrink一个数字，规定项目将相对于其他灵活的项目进行收缩的量。flex-basis项目的长度。合法值："au... 查看详情
zui和mint-ui，elementui哪个更适合用vue开发？
minit-ui是移动端是饿了么团队开发的，后者element-ui是PC端也是饿了么团队开发的，无论是移动端或者PC端结合Vue都比较适合开发，ZUI组件不是很强大，可以满足一般程序的需求。ZUI系统最显著的特性之一,通过构建完善的系统级防... 查看详情
经典文摘：饿了么的pwa升级实践（结合vue.js）
...Vue.js官方推特第一次公开到现在，我们就一直在进行着将饿了么移动端网站升级为 ProgressiveWebApp 的工作。直到近日在GoogleI/O2017上登台亮相，才终于算告一段落。我们非常荣幸能够发布全世界第一个专门面向国内用户的PWA... 查看详情
eleme饿了么vue项目随笔，随时更新，想到哪里写到哪里比较凌乱一直更新
组件设计原则：就近维护 mock数据模拟：/#/xx/api vue1.0json获取不到（请求出现sockjs-node/info文件，所以不能加地址栏不加#来获取模拟请求数据） vue2.0前端请求直接 /api 来获取数据 组件... 查看详情
vuejs仿美团，饿了么项目之——商品数量加减篇
参考技术A首先，新增个商品数量的加减功能组件，就叫cartcontrol.vue吧。新增个底部购物车组件，叫shopcart.vue吧。在good.vue中引入并注册组件。cartcontrol.vue中，通过props来接收list对象因为我在json中没有设置数量这个key，所以需要... 查看详情
按需引入饿了么ui组件
参考技术A第一步安装第二部在main.js中引入样式第三步安装第四步看情况，是否在全局引入（比如一些很多模块都要用到的Button,可在main.js中全局引入）有的组件在项目中只要用到一次，那只需在要用到此组件的模块中单独引入 查看详情
“vue饿了么实战”视频
“vue饿了么实战”视频，要的加我qq：840573460650)this.width=650;"src="https://s5.51cto.com/wyfs02/M01/06/B8/wKiom1m85FvjU2zgAAA3IuL_Eng432.png-wh_500x0-wm_3-wmp_4-s_4095027821.png"title="QQ截图20170916163541.png"alt="w 查看详情
vue开发实战生态篇#23：组件库对比：elementuiantdesignvueiview
说明【Vue开发实战】学习笔记。ElementUI、AntDesignVue、iViewElementUIAntDesignVueiView数量单测admin背景原型、设计ElementUI4681%vue-element-admin(社区)饿了么Axure、SketchAntDesignVue5587%Pro(社区)社区主导、蚂蚁金服技术支持Axure、SketchiView54无iView-a 查看详情
vue2高仿饿了么app
Github地址: https://github.com/ccyinghua/appEleme-project 一、构建项目所用：vueinitwebpackappEleme-projectnpmrundevcnpminstallnode-sass--save-devcnpminstallsass-loader--save-dev//sass-loader依赖于node-sas 查看详情
skecth怎么把饿了么组件变成自己的组件
参考技术A打开你已经做好的SU模型，鼠标点击确定之后即可将物体设置成组件。打开你已经做好的SU模型。我们以一个简单的SU模型为例。我们的组件在这里：窗口-组件。打开之后你会看到一个对话框，其中那些组件就是自带的... 查看详情