vue中wowjs的正确使用方式

在引入wowjs 时出现动画无法加载问题， 解决问题之后，觉得还是把这些完整的使用过程都记录下，避免踩坑。

1.通过npm 安装

 npm install wowjs -S
 
 npm install animate.css -S

2.在mian.js中引入

 import 'animate.css'

3.在组件需要的地方引入wowjs

 1.import {WOW} form 'wowjs'
    mounted(){
       this.$nextTick(() => {   //页面渲染完，在执行
	      let wow = new WOW({
	        live:false
	      })
	      wow.init()
	    })
    }
 2. import WOW from 'wowjs'    
      mounted() { 
		    new WOW.WOW().init()  // 简写也可以
       }

4.添加类名（因为animate.css 更新问题需要注意使用的类名）

1）animate.css版本4用wow animate__animated animate__slideInUp类

<div class="wow animate__animated animate__slideInUp animate__delay-1s"></div>

2）animate.css版本3用wow slideInUp类

<div class="wow slideInUp"></div>

注：不加前缀引入（不建议使用）

1. import 'animate.compat.css';

2. <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css"
  />

wowjs官网地址: https://wowjs.uk/

animate官网地址：https://animate.style/