vue2 + vue-router2 + vue-cli2 + vue-resource + stylus + flex + eslint + webpack2 

* Goods、Ratings、Seller组件视图均可上下滚动
* 商品页 点击左侧menu，右侧list对应跳转到相应位置
* 点击list查看商品详情页，父子组件的通信
* 评论内容够可以筛选查看
* 购物车组件，包括添加删除商品及动效，购物控件与购物车组件之间非父子组件通信，点击购物车图标，展示选择的商品列表
* 商家实景图片可以左右滑动 

.detail // 动画对象
  transition .5s
.fade-enter, .fade-leave-to // 淡入开始与淡出结束状态
  opacity 0

<menuNav ref="menuNav"></menuNav>
<div id="app">
  <input type="text" ref="input1"/>
  <button @click="change">添加</button>
</div>

<script>
new Vue({
  el: "#app",
  methods: {
  change:function(){
    this.$refs.input1.value ="22" // 减少获取dom节点的消耗
    this.$refs.menuNav.style.color = "#333"
    }
  }
})
</script>

<keep-alive>
  <router-link :seller="seller"></router-link>
</keep-alive>

a 
  color #0982C1
  &:hover 
    text-decoration underline
  

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

.discount 
  bg-image('discount') // 参数用字符串调用

pic-border(niceColor = #fff)
  border 1px solid niceColor

.pic
  pic-border(#f00) //参数为空,则为#fff

<div ref="menuWrapper"></div>

created () {
  this.$nextTick(() => {
    new BScroll(this.$refs.menuWrapper, {
      click: true
    })
  })
}

this.$nextTick(() => {
  this.scroll.refresh()
  })

border-1px($color)
  position relative
  border none
  &:after
    position absolute
    bottom 0
    left 0
    content ''
    width 100%
    height 1px
    transform scaleY(0.5)
    background $color

let data = require('../data.json')
this.seller = data.seller