vue2引入阿里巴巴图标字体库的lottie动画

一、阿里巴巴图标字体库

1.进入阿里巴巴图标字体库官网：

2.下载JSON格式保存至@/assets/1.json

二、vue操作 

1.安装插件(vue-lottie)

npm install vue-lottie

2.main.js中引入

import lottie from "vue-lottie";
Vue.component("lottie", lottie);

3.index.vue使用

 <lottie
   :options="defaultOptions"
   :width="300"
   :height="400"
   style="position: absolute"
 />

import Anim from "@/assets/1.json";
export default {
  data() {
    return {
      defaultOptions: { animationData: Anim, loop: true, autoplay: true }
    }
  }
}