继上一个vue网页仿星星评价，vue脚手架插件的npm安装教学以及使用教学。脚手架仿网页星星评价

这是上一个星星评价地址

npm

（前提是已经按装node）

1. 按下 window+r键打开cmd
2. npm install -g cnpm --registry=https://registry.npm.taobao.org(全局安装如果没下载cnpm，需要下载 )
3. cnpm i -g @vue/cli (全局安装vue脚手架)
4. vue -V（查看vue脚手架是否安装好）
5. vue create demo1 （建一个名叫demo1的项目）
6. npm run serve（运行项目）

vue脚手架使用

初始目录是这个样子的


在App.vue中写入以下代码

<template>
  <div>
    {{score1}}
    <Star  @change="score1=$event"></Star>
  </div>
</template>

<script>
import Star from "./components/Star";
export default {
  components: {
    Star
  },
  data() {
    return {
      score1: 2,
    };
  }
};
</script>

<style>
</style>

在components目录下的Star.vue文件写以下代码

<template>
  <div>
    <div>
      <i @mouseleave="temScore=innerScore" @click="innerScore=item" @mouseenter="temScore=item" v-for="item in count"
        class="fa star" aria-hidden="true" :class="item <= temScore?'fa-star':'fa-star-o'" style="font-size: 30px;"></i>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    count: {
      type: Number,
      default: 5 //几个
    },
    score: {
      type: Number,
      default: 2 //几个
    }
  },
  data() {
    return {
      innerScore: this.score,
      temScore: this.score
    };
  },
  watch: {
    innerScore(val) {
      this.$emit("change", val);
    }
  }
};
</script>
<style>
@import url(https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);
.star {
  color: gold;
}
</style>

就会出现以下效果