安装lottie

npm install lottie-web

代码

<template>
  <div id="app">
    <div id="lottie"></div>
  </div>
</template>

<script>
import lottie from "lottie-web";
import animationJsonData from "./01.json"; // json 文件
export default {
  name: "App",
  components: {
  },
  mounted() {
    const lot = lottie.loadAnimation({
      container: document.getElementById("lottie"),
      renderer: "svg",
      loop: true,
      autoplay: false,
      animationData: animationJsonData,
    });

    // 开始播放动画
    lot.play();
  },
};
</script>

<style>
#lottie{
  width: 300px;
  height: 300px;
}
</style>

效果

【Vue】lottie的使用_Data