vue2.0 练习项目-外卖APP(完)

　　经过今天的努力，终于把这个项目做完了；功能不是很多，就三个页面这样子吧！在开发过程中也有遇到些小问题的。比如我在弄那个star评选星星组件时就遇到一个问题了，在created事件中作数据请求是异步的，而star控制中的created事件也只会执行一次，导致页面在加载出来时分数值始终是0的。后面思考了下，使用了watch属性去对数据进行监听，从而可以达到效果。

　　截段star控件的代码看看吧。

<template>
    <div class="star-box">
        <span class="star" v-for='(item,index) in starGroup' :class='item' ></span>
    </div>
</template>
<script>
function matchScore(score) {
  let len = parseInt(score),
    floor = parseFloat(score) - len,
    countStar = 5,
    group = [];
  for (var i = 0; i < len; i++) {
    group.push("on");
  }
  if (floor > 0) {
    group.push("half");
  }
  let residue = countStar - group.length;
  if (residue > 0) {
    for (var j = 0; j < residue; j++) {
      group.push("off");
    }
  }
  return group;
}

export default {
  props: {
    score: 0
  },
  data() {
    return {
      starGroup: []
    };
  },
  methods: {},
  watch: {
    score: function(newScore) {
      this.starGroup = matchScore(newScore);
    }
  },
  created() {
    this.starGroup = matchScore(this.score);
  }
};
</script>
<style>
.star-box {
  display: inline;
  vertical-align: sub;
}
.star:nth-child(1) {
  margin-left: 0px;
}
.star {
  margin-left: 10px;
  display: inline-block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.on {
  background-image: url("./star24_on@2x.png");
}

.half {
  background-image: url("./star24_half@2x.png");
}

.off {
  background-image: url("./star24_off@2x.png");
}
</style>

　　其实开发过程中遇到的问题不是很多，vue这个框架真的是挺容易上手的，总结下用到知识点：vue2 + vuex + vue-router + webpack + ES6/7。

　　弄张动图浏览下所有功能点吧：

　　项目demo演示地址：https://codeyoyo.github.io/seller-app/dist/ （请用chrome手机模式预览）

　　项目源码地址：https://github.com/codeyoyo/seller-app