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>

就会出现以下效果