组件中的data必须是一个函数。因为组件是可以服用的，如果组件中的data定义为对象的话，那么修改某一个组件的data会影响另外的组件。

前后端的交互需要通过ajax请求，通过vue-resource库可以实现ajax请求。

安装vue-resource，在amin.js中import ，通过Vue.use（）全局注册,在App.vue中的cteated（）钩子函数中发送ajax请求，获取数据。this相当于App的一个实例，vue-resource为组件定义了一个$http的方法。

import VueResource from 'vue-resource';

Vue.use(VueResource);

created() {
  this.$http.get('/api/seller').then((response) => {
    response = response.body;
    if (response.errno === ERR_OK) {
      this.seller = response.data;
    }
  });
}

用v-bind指令，可以从父组件传递数据给子组件，在子组件中用props接收父组件传递过来的数据。

<img>一般会指定宽高，如<img width="64" height="64" :src="seller.avatar">

<img>和<div class="content">是并列显示的，通过设置display:inline-block实现的。这两个元素之间会有间隔，这是由于中间有空白字符，要消除这些空白字符可以把父元素<div class="content-wrapper">的font-size设置为0，然后在子元素中设置各自的font-size。这个技巧在后面多次用到了。

<div>是行内元素，指定宽高是不会生效的，要设置为display：inline-block后，指定宽高才会生效。

根据不同的dpr，原则背景图片的像素，在mixin.styl文件下写bg-image($url)

bg-image($url)
  background-image: url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
  background-image: url($url + "@3x.png")

图片和文字并排排列时，需要将两者对齐，项目中用到的方式是设置图片在的span vertical-align：top

supports中要根据活动的内容显示图片，返回的数据时type，使用一个数组classMap将type映射到对应的图片，然后用v-bind绑定classMap。

bulletin-wrapper包含三部分，要实现公告内容的这种效果，要设置不换行，超出的内容隐藏，用省略号代替超出的文本

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

要实现背景的模糊效果，可以给背景图片加一个容器，然后在外层容器使用filter。背景图片要置于底部，这可以通过设置z-index来实现。这样子设置后在.background的父元素会有阴影漏出来，需要给其父元素设置overflow：hidden

<div class="background">
  <img :src="seller.avatar" width="100%" height="100%">
</div>

.background
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  z-index: -1
  filter: blur(10px)

浮层用到了经典的CSS sticky footers布局。浮层相对于窗口fixed布局，注意overflow要设置为auto。浮层的显示和隐藏通过v-show指令来实现<div v-show="detailShow" class="detail">

sticky footers布局是指：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。这个文章里列了两种方法。http://www.w3cplus.com/css3/css-secrets/sticky-footers.html

这个项目中用了另外一种比较复杂但是兼容性更好的方法。内容区域需要加一个容器，这种方法的结构一般是这样子的

<div v-show="detailShow" class="detail">
  <div class="detail-wrapper clearfix">
    <div class="detail-main"></div>
  </div>
  <div class="detail-close"></div>
</div>

在base.styl中写class clearfix的样式

.clearfix
  display: inline-block
  &:after
    display: block
    content: "."
    height: 0
    line-height: 0
    clear: both
    visibility: hidden

设置容器detail-wrapper的大小为100%，detail-main设置一个padding-bottom，给页脚detail-wrapper留出位置，页脚detail-close设置负 margin拉到视口中。

.detail
  position: fixed
  z-index: 100
  Top: 0
  left: 0
  width: 100%
  height: 100%
  overflow: auto
  backdrop-filter: blur(10px)
  background: rgba(7, 17, 27, 0.8)

.detail-wrapper
    width: 100%
    min-height: 100%
    .detail-main
       margin-top: 64px
       padding-bottom: 64px
  .detail-close
     position: relative
    width: 32px
    height: 32px
    margin: -64px auto 0 auto
    clear: both
   font-size: 32px

生成star组件，star组件从父元素接收参数score和size，根据size增加class starType，根据score生成数组itemClasses，来确定星星的状态（on、half、off）。starType和itemClasses都在计算属性中定义。

小标题的布局。主要有两点要注意，第一标题固定布局，两边的线自适应布局；第二标题两边的间隔用padding来设置。布局用flex来实现，元素用了<div>,因为用<span>的话在有些手机上可能会存在兼容性问题。

<div class="title">
  <div class="line"></div>
  <div class="text">优惠信息</div>
  <div class="line"></div>
</div>

.title
  display: flex
  width: 80%
  margin: 28px auto 24px auto
  .line
    flex: 1
    position: relative
    top: -6px
    border-bottom: 1px solid rgba(255, 255, 255, 0.2)
  .text
    padding: 0 12px
    font-weight: 700
    font-size: 14px

在vue中动画可以通过<transition>来实现