在vue中插件自己的loading插件

首先去https://www.iconfont.cn/ 注册登录 下载加载字体图标，加入购物车
点击购物车 选择 下载代码

，打开下载的东西，选择蓝色的五项
在自己的vue项目中，在src文件夹下新建一个文件夹 我取名 myUI，然后在myUI文件夹下新建一个assets文件夹，把刚才选择的五项粘贴进去。
然后打开选中的文件 全部复制，然后再myUI文件夹下新建一个index.scss,把复制的粘贴进去，

修改路径

下面的代码换成这些

在这里插入代码片.mu-iconfont {
  font-family: "iconfont" !important;
  font-size: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
}

.mu-icon-jiazai1:before {
  content: "\e62b";
}

.mu-icon-jiazai2:before {
  content: "\e72f";
}

.mu-icon-jiazai3:before {
  content: "\e69a";
}

.mu-icon-jiazai4:before {
  content: "\e6b4";
}

.mu-icon-jiazai5:before {
  content: "\e61c";
}


.mu-icon-jiazai6:before {
  content: "\e7ba";
}


.mu-icon-success:before {
  content: "\e56a";
}

.mu-icon-search:before {
  content: "\e61a";
}
.mu-icon-warn:before {
  content: "\e6d1";
}

  //加载动画
  @keyframes mu-rotate{
    
      100%{
          transform:rotate(360deg)
      }
  }
  .mu-loading{
      animation:mu-rotate 1.5s infinite linear
  }

  //背景色
  .mu-bg-white{
      background:$white;
  }
  .mu-bg-green{
      background:$green;
  }
  .mu-bg-red{
      background:$red;
  }
  .mu-bg-blue{
      background:$blue;
  }
  .mu-bg-black{
      background:$black;
  }
  .mu-bg-yellow{
      background:$yellow;
  }
  .mu-bg-orange{
      background:$orange;
  }
  .mu-bg-gray{
      background:$gray;
  }

  //文字颜色
  .mu-white{
    color: $white;
  }
  .mu-green{
    color: $green;
  }
  .mu-red{
    color: $red;
  }
  .mu-yellow{
    color: $yellow;
  }
  .mu-blue{
    color: $blue;
  }
  .mu-orange{
    color: $orange;
  }
  .mu-gray{
    color: $gray;
  }
  .mu-black{
    color: $black;
  }
 

在myUI文件夹下新建一个variable.scss，
放入一下代码

$white:#ffffff;

$green:#0feb63;

$red:#cf002d;

$blue:#5aa1e7;

$black:#000000;

$yellow:#d5eb11;

$orange:#ec660c;

$gray:#eceaea;

$large:22px;
$emdium:18px;
$small:14px;
$mini:10px;

在index.scss中引入variable.scss
@import ‘variable.scss’;

在myUI文件夹下新建loading文件夹，在里面新建一个index.vue,代码如下

在这里插入代码片<!--  -->
<template>

    <i
      :class="[
        'mu-iconfont',
        'mu-loading',
        'mu-icon-jiazai' + type,
        {
          [`mu-${color}`]:color
        }
        
      ]"
    />
 
 
</template>

<script>
const types = [1, 2, 3, 4,5,6];
export default {
  components: {},
  name: "mu-loading",
  props: {
    type: {
      type: Number,
      default: 1,
      validator(value) {
        return types.includes(value);
      },
    },
    color: {
      type: String,
      
    },
  },
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style type="text/css">
</style>

在loading文件夹下新建index.js，代码如下

import loading from './index.vue'
loading.install = function(vue){
    vue.component(loading.name,loading)
}
export default loading;

在main.js中引入 代码如下

```css
import './myUI/index.scss'
import load from './myUI/loading/index.vue'
Vue.component(load.name,load)

a