像这样的lottie动画我们该如何在vue中引入呢？

其实非常简单

首先我们先安装lottie依赖

npm install --save vue-lottie

全局引入 vue-lottie

在 main.js 引入并注册全局组件即可，当然你也可以局部引入，我用的局部引入

import lottie from 'vue-lottie'; 

Vue.component('lottie', lottie)

在你想要使用lottie动画的部分引入你的 lottie 资源

这里的资源可以是json文件也可以是GIF动图等等（网上可以搜索lottie动画素材有很多免费的），用json文件的话页面上的动画会很流畅，其他文件格式都会有点卡顿，可以根据自己的需要进行选择，我这里引入的是json文件

//相关 star，这里404.json是你的动画文件
import * as animationData  from "@/assets/errorJSON/404.json";
import Lottie from 'vue-lottie'
//相关 end


export default {
  name: 'Exception404',
  
  
  //相关 star
  components:{Lottie},
  data(){
    return {
    //其中 animationData.default 是重点，之前看了好多网上教程都是没有加这个，就没有做成功，加上 default 就好了
      defaultOptions: { animationData: animationData.default },
      animationSpeed: 4,
      anim: {}
    }
  },
  methods: {
    handleAnimation: function(anim) {
      this.anim = anim;
      console.log(anim); //这里可以看到 lottie 对象的全部属性
    },
  },
 //相关 end
 
 
  computed: {
    classes() {
      return [
        'ele-exception ele-text-center',
        {'ele-exception-dark': this.$store.state.theme.darkMode}
      ];
    },
  },
}  
</script>

结果