1

我有一个创建多个全局可用组件的插件，这些组件访问主应用程序中其他插件设置的实例属性。在大多数 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>
4

1 回答 1

2

要解决此问题，您需要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防止代码重复。

于 2018-12-12T16:44:16.213 回答