vuepress2：如何获取 Vue 实例以便我可以使用第三方 vue 插件？答案

【问题标题】：vuepress2: how to get Vue instance so I can use third part vue plugin?vuepress2：如何获取 Vue 实例以便我可以使用第三方 vue 插件？
【发布时间】：2021-10-23 02:25:57
【问题描述】：

我正在尝试在VuePress 2 中使用v-wave（由 Vue 3 提供支持的 VuePress）

我按照文档，尝试使用v-wave作为VuePress 2的本地插件

.vuepress/config.js

const vwave = require('path/to/v-wave.js');

module.exports = {
    plugins: [
        (options, app) => {
            app.use(vwave); // the `app` is a instance of VuePress not Vue
            return {name: 'v-wave'};
        }
    ]
};

但它不起作用，因为 app 不是 Vue 实例，而是 VuePress。

如何安装 v-wave 以使其在 VuePress 2 中工作？

非常感谢！

【问题讨论】：

标签： vue.js vuejs3 vuepress

【解决方案1】：

VuePress 中似乎没有专门用于配置客户端应用程序的配置 API。但是，插件 API 支持在客户端应用程序中使用 clientAppRootComponentFiles property 配置根组件。

例如，这个配置指向.vuepress/RootComponent.vue:

// .vuepress/config.js
const path = require('path')

module.exports = {
  plugins: [
    {
      name: 'root-component-setup',
      clientAppRootComponentFiles: path.resolve(__dirname, './RootComponent.vue'),
    }
  ]
}

在该组件文件中，使用 Composition API 的 getCurrentInstance() 访问应用程序实例的 use() 以全局安装 v-wave 插件：

// .vuepress/RootComponent.vue
<template>
  <slot></slot>
</template>

<script>
import { getCurrentInstance, defineComponent } from 'vue'
import VWave from 'v-wave'

export default defineComponent({
  setup() {
    getCurrentInstance().appContext.app.use(VWave)
  }
})
</script>

demo

【讨论】：