Использовать плагин, заданный конструктором Vue, для наследования компонентов с помощью vue-component-class

Question

У меня есть плагин, который создает несколько глобально доступных компонентов, эти компоненты обращаются к свойствам экземпляра, установленным другими плагинами в основном приложении. В большинстве примеров Typescript люди получают конструктор Vue import { Vue } from 'vue' или import { Vue } from 'vue-property-decorator', однако я бы хотел использовать конструктор vue, который передается моему плагину. Как бы вы это сделали?

Вот моя попытка, которая не работает, к сожалению. Я знаю, что это работает без использования классов, но это не главное.

// app/main.ts

import Vue from 'vue';
import Vuetify from 'vuetify';
import { MyComponentsPlugin } from 'my-components-plugin';

import App from './App';

Vue.use(Vuetify);
Vue.use(MyComponentsPlugin);

new Vue({
  render: h => h(App)
});

// my-components-plugin/main.ts

import { VueConstructor } from 'vue';

import MyComponentExport from './components/MyComponent/Component.vue';

export async function MyComponentsPlugin(
  vue: VueConstructor,
  options?: any,
): Promise<void> {
  vue.component('MyComponent', MyComponentExport(vue));
}

// my-components-plugin/components/Component.vue

<template>
  <p>toto</p>
</template>

<script lang="ts">
import { VueConstructor } from 'vue';
import { Component, Prop } from 'vue-property-decorator';

export default function(Vue: VueConstructor) {
 @Component
  class Header extends Vue {
    private mounted() {
      console.log(this.$vuetify);
    }
  }

  return Header;
}
</script>

<style></style>

Answer 1

Чтобы решить эту проблему, вам необходимо обновить конфигурацию webpack в вашем vue.config.js.Добавьте:

const path = require('path');

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'development') {
      config.resolve.modules.prepend(path.resolve(__dirname, './node_modules'));
    }
  },
};

Таким образом, зависимости вашего проекта будут сначала искать в вашем локальном node_modules проекте, чтобы найти их зависимости, следовательно, они будут использовать тот же Vue, что и основное приложение.

Нам не нужно добавлять его для производственной среды, поскольку пакеты будут оптимизированы, а Vue дублирование кода будет предотвращено.