vue 自定义组件，通过vue.use来使用，install的使用

vue 自定义组件，类似引入elementUI的方法，通过vue.use(ElementUI)来使用

第一步：定义一个组件components/star/index.vue

<template>
    <div>
        <span v-for="item in 5"  :key="item" :class="item <= scoreNumber ? 'icon-star-full':'icon-star-empty'" @click="setScore(item)"></span>
    </div>
</template>
<script>
export default {
    name:"star",
    props:{
        score:Number,
    },
    data(){
        return {
            scoreNumber:this.score
        }
    },
    methods:{
      setScore(score){
        this.scoreNumber = score;
        this.$emit('getScore',score);
      }
    }
}
</script>
<style  scoped>
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?dee4q');
  src:  url('fonts/icomoon.eot?dee4q#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?dee4q') format('truetype'),
    url('fonts/icomoon.woff?dee4q') format('woff'),
    url('fonts/icomoon.svg?dee4q#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-star-empty:before {
  content: "\e9d7";
}
.icon-star-full:before {
  content: "\e9d9";
}
</style>

第二步：libs/JSUI/index.js

import star from '../../componets/star'

const JSUI = {
    install:function(Vue){
        Vue.component('star',star)
    }
}

export default JSUI;

第三步：main.js中引用并Vue.use(JSUI)

import Vue from 'vue'
import App from './App.vue'
import JSUI from './libs/JSUI/index.js'

Vue.use(JSUI)
Vue.config.productionTip = false

new Vue({
  render: function (h) { return h(App) },
}).$mount('#app')