vue使用lottie web插件渲染动画

1.先安装相应的插件

npm install lottie-web --save

2.引入插件(我这里是局部引入的)

import lottieWeb from 'lottie-web'

3.使用，整体代码如下，我这里是引入的本地JSON文件

<template lang="pug">
  .lottie
    .lottie-box(ref="lottie", style="height: 80px; width: 80px;")
</template>
<script>
import lottieWeb from 'lottie-web';
import * as animationData from '@/constant/animation.json'
export default {
  name: 'lottie',
  mounted () {
    this.handleLottie()
  },
  methods: {
   handleLottie () {
      let lottie = {
        container: this.$refs.lottie,   //要渲染的动画元素
        renderer: 'svg',    //渲染类型
        loop: true,  //循环播放
        autoplay: true,  //自动播放
        animationData: animationData.default  //这个default要写，不然也不显示
      }
      lottieWeb.loadAnimation(lottie)
    }
  }
}
</script>

哎，一开始我mounted里面调用方法的时候是这样写的 this.handleLottie，一直没报错但是动画也不显示，后来加上了括号就好了
其他常用方法可以看官网： https://airbnb.io/lottie/#/web