Question

我有一个创建多个全局可用组件的插件，这些组件访问由主应用程序中其他插件设置的实例属性。在大多数Typescript示例中，人们通过import { Vue } from 'vue'或import { Vue } from 'vue-property-decorator'来获取Vue构造函数，但是我想使用传递给我的插件的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代码重复。

使用给定Vue构造函数的插件通过vue-component-class进行组件继承

1 个答案: