项目：使用vue.js2.5 + cube-ui 实现饿了么商家页面
头部区：组件v-header、头部弹层组件header-detail（包括star组件）
1. v-header组件 主要由内容区和公告区组成，核心要点在于公告栏要有不折行+显示缩略的效果。实现方法为设置属性：white-space: nowrap； overflow: hidden；text-overflow: ellipsis。还有就是对于整个header部分显示半透明模糊效果的图片，模糊效果使用filter。
2. header-datail浮层组件 整个组件效果是全屏效果，下部还有个固定的关闭按钮，由于本身高度可能超过手机高度，因此会滚，不能使用position fixed布局，如果内容比较长，则会盖住X。这里使用到了经典的css sticky footers 布局。尝试过把head-detail组件放在header组件中，为了防止父元素的嵌套样式效果影响组件，更好的方法是把该部分被创建为cube-ui中的create-API组件。（cube-ui提供了一个很好的API就是creat-api模块，让我们把一个模块从声明式的写（<star></star>）,而变为API调用（creatAPI(vue,component)）即当一个组件执行createAPI之后，我们可以在组件内部通过$ceate(Star)来调用组件，并且可以动态挂载到body下面。因此就很适合这种全屏弹窗组件动态挂载到body下，而移除时可以从body下卸载。）在调用时，使用驼峰形式引入组件，传入props，创建之后通过组件调用show()方法控制显示，使用hide()方法控制浮层关闭。
3. star组件 显示是由三组图片组成（全星，半星，空），使用props接收size和score两个参数。计算属性依赖size实现三种大小的样式展现，通过计算score在数组中放入响应的星星状态，使用v-for遍历数组显示评分。
4. tab组件 使用cube-ui提供的tab-bar来实现页面切换。写入change事件（cube-ui的slide的）在slide页面切换时触发，并且派发当前页面的索引值，从而实现页面切换。为了优化体验，希望tab滑动时下划线可以跟着页面实现流畅滚动，可以根据tab占比和slide占比相同实时计算tab滚动位置。由于开始tab标签是写死的，个数也是固定的，因此希望这个tab可以接收一个数组，包含tab个数，tab名称，对应的组件，而tab只是用来维护这些内容，因此v-for遍历，使用<component :is>动态提供组件。并在app.vue中添加默认的tab数组。
5. shop-cart组件 购物车shop-cart组件有多种状态：（1）没有购买商品时，购物车全部灰色（2）当购买商品时，购物车右上角回有商品件数，并且会按照商品计算出价格，（3）当达到配送金额会显示“去结算”，不然就显示“还差XX元起送”。其中对于购物车的设计主要使用了flex布局主要维护选择的商品。 Seller会在goods中声明成计算属性。Goods组件会接收一些tab组件传入的props,而tab的数据也是从app.vue中传入的。因此当动态获取seller之后props的获取是一个响应式的，可以一层层通过tab达到goods组件。
6. shop-control组件 主要分为三个部分（减号 数字 加号），其中点击加号会触发两个动画：（1）cart-control组件的渐出，（2）购物车小球下落动画。
对于（1）：首先，使用v-show控制组件只有商品件数大于零显示。每个按钮维护一个food，并且对于按钮点击绑定add()和decease()事件用于记录商品的数量count。同时在父组件goods中维护计算属性selectFood(),用于计算商品数量，父组件将selectfood作为props传入shop-cart，从而实现两个兄弟组件之间的数据交互。对于过渡动画，使用<transition>组件通过v-show驱动。外层偏移内层rotate滚动，从而实现一边偏移一边滚动的渐出效果显示。
对于（2）：想象购物车里面有很多隐藏的小球，点击按钮，小球会变到当前点击位置并显示，然后经过一个动画飞入购物车，并且支持多个小球同时在动画。首先定义balls数组用于存放所有小球，属性show默认设置为false。并在shop-cart中定义小球容器，v-show遍历小球，拿到true的小球做动画。并监听几个vue的钩子函数before-enter ，enter ，after-enter来做动画。在beforedrop中拿到点击的位置，并将购物车中的小球显示在该位置。在dropping中触发重绘reflow，并让做动画回到原来位置，从而实现小球下落，动画之后监听transtionend事件，触发afterDrop，修改小球show显示状态为false，回收小球，并将小球元素display设置为null。从而实现了一次小球下落。
7. shop-cart-list组件+shop-cart-sticky组件 当购物车中有商品时，点击购物车会弹出购物车详细内容，列表限制高度并可以滚动。（起初一期时没有将这一部分抽离出来，因此就在shop-cart组件的后半部分，通过一个标记来控制区块显示）二期，对于这种弹层类组件选择使用cube-ui的<popup>组件实现，并将其设置为API调用，设置hide() show()方法来控制蒙层显示。
但是有个问题：shop-cart-list是API组件，会动态的向body中挂载结点，因此层级较高，高过内层组件层级。但是购物车组件是一个子组件，因此会遮盖到原来的购物车组件（这个组件有个向上突出的部分）。由于无法调整层级，解决方法就是：使用shop-cart-sticky组件。动态向body中挂载一个购物车组件的副本。并且这一部分还要加入的功能有：（加入购物车的小球动画，结算，清空购物车）对于小球下落动画，可以调用cart-control的drop方法，两个弹出dialog的操作都使用了cube-ui中的dialog组件。而对于切换tab的购物车联动问题，只需要在请求数据之前判断是否已经拿到数据。