nuxt3 如何引入wow.js

要在Nuxt 3中引入wow.js，可以按照以下步骤操作：

1. 安装wow.js和animate.css

可以使用npm或yarn安装wow.js和animate.css：

npm install wowjs animate.css

或

yarn add wowjs animate.css

2. 创建一个插件文件

在Nuxt 3中，可以使用插件文件来引入第三方库。创建一个新的文件`wow.js`，并将以下代码添加到文件中：

import { createApp } from 'vue'
import WOW from 'wowjs'

export default function (context, inject) {
  const app = createApp()
  app.directive('wow', WOW.wow)
  inject('wow', WOW)
}

在这个插件文件中，我们首先使用`createApp`函数创建一个Vue实例。然后，我们使用Vue的`directive`方法将WOW.js的指令`wow`添加到Vue的指令系统中。最后，我们使用Nuxt 3的`inject`方法将WOW.js注入到Nuxt 3应用程序中。

3. 在nuxt.config.js中引入插件

打开`nuxt.config.js`文件，在`plugins`数组中添加以下代码：

{
  src: '~/plugins/wow.js',
  mode: 'client'
}

这将在客户端模式下引入插件。

4. 在组件中使用WOW.js

现在，您可以在组件中使用WOW.js了。在需要使用WOW.js的组件中，您可以按照以下步骤操作：

首先，使用`this.$wow.init()`方法初始化WOW.js：

export default {
  mounted() {
    this.$wow.init()
  }
}

然后，您可以在需要使用WOW.js的元素上添加`wow`指令：

<template>
  <div class="wow fadeIn" v-wow>
    ...
  </div>
</template>

现在，当这个组件被挂载时，WOW.js将自动在带有`wow`指令的元素上应用动画效果。