Vue3+vite使用LottieFiles/lottie-web，阿里图标动效库

动效下载

动效库可以在下载也可以在这个下载，下载Json格式文件即可。

安装

需要安装lottie-web这个库，vue2好像需要安装另一个库，外国网站，文档不太友好，百度一下。

npm install lottie-web --save

在Vue3中使用lottie-web

代码

    <template>
            <div ref='animation1'></div>
    </template>
    <script setup lang="ts">
    import { ref, onMounted } from "vue";//引入相关api
    import lottie from "lottie-web";//引入动效库
    import json001 from "~src/assets/json/json001.json";//引入下载的动效json
    const animation1 = ref(null) //获取dom
    onMounted(() => {//在这个生命周期渲染
            lottie.loadAnimation({
                container: animation1.value,//选择渲染dom
                renderer: "svg",//渲染格式
                loop: true,//循环播放
                autoplay: true//是否i自动播放,
                animationData: json001,//渲染动效json
            });
    }
    </script>

总结

这样就可以使用了，如果您遇到什么问题，可以随时联系我。