vue3 引入使用动画库aos.js

推荐简单动画库：aos.js官网地址
其对应api参考地址：aos.js的github地址

1. 安装aos
   参考其官方手册进行安装：

npm install aos --save

3. main.js文件中引入

import App from './App.vue'
import AOS from 'aos'
import 'aos/dist/aos.css'
import { createApp } from "vue";


export const app = createApp(App)
// 设置全局配置
app.AOS = new AOS.init({ disable: "phone" });

app.use(AOS).mount('#app')

//export const app = createApp(App)
//app.AOS = new AOS.init({ disable: "phone" });
//app.use(AOS).mount('#app')

4. 使用

<template>
  <div
    class="lt_card_background"
    data-aos="zoom-in"
    data-aos-duration="1000"
    data-aos-once="true"
    @click="handleClick"
    ref="card"
  >
  </div>
 </template>

参考文章：
aos安装问题