VuePress 2中如何获取Vue实例以安装第三方Vue插件（以v-wave为例）

你之前的配置错误原因是：.vuepress/config.js 中拿到的app是VuePress的Node侧实例，并非客户端运行时的Vue 3应用实例，Vue前端插件必须注册到客户端的Vue实例上才会生效。正确配置方式如下：

步骤1：安装v-wave依赖（本地文件可跳过） #

如果使用npm安装：

npm install v-wave

如果使用pnpm安装：

pnpm add v-wave

步骤2：编写客户端配置 #

在.vuepress目录下新建（如果已存在则直接修改）client.js文件，写入以下内容：

import { defineClientConfig } from '@vuepress/client'
// 从npm包导入
import VWave from 'v-wave'
// 如果使用本地v-wave文件，替换上面的导入语句为你的实际路径
// import VWave from './relative/path/to/v-wave.js'

export default defineClientConfig({
  enhance({ app }) {
    // 此处的app就是客户端Vue 3的应用实例，直接注册插件即可
    app.use(VWave, {
      // 此处可传入v-wave的全局配置参数，如不需要可以省略
      // color: '#fff',
      // duration: 0.4
    })
  }
})

步骤3：验证使用 #

重启VuePress开发服务后，即可在任意Vue组件、Markdown文件中直接使用v-wave指令：

<template>
  <button v-wave>点击测试水波纹效果</button>
</template>

内容的提问来源于stack exchange，提问作者DengSihan