Question

我想创建一个Vue插件，该插件具有以编程方式呈现Vue组件的功能。该组件取决于Vuetify。如果我在该组件中使用普通的HTML / CSS，则一切正常，但在其中使用与Vuetify相关的功能（例如a）将无法正常工作。我以为我没有将vuetify本身正确地注入到组件中。

在我的自定义组件中，我尝试分别导入每个Vuetify组件，但均未成功。我还尝试使用以下语法创建组件：new Vue（{vuetify}），但也没有成功。

import MyCustomComponent from '@/components/MyCustomComponent'
import vuetify from '@/plugins/vuetify';



export default {
  install(Vue, options) {
    function renderMyCustomComponent() {
        const CustomComponent= Vue.extend(MyCustomComponent)
        Vue.use(vuetify)
        let instance = new CustomComponent()
        instance.$mount()
        document.body.appendChild(instance.$el)
    }

    Vue.prototype.$renderMyComponent = renderMyCustomComponent
  }

}

错误消息表明，我的组件中无法使用vuetify（或至少某些属性） [Vue warn]: Error in getter for watcher "isDark": "TypeError: Cannot read property 'dark' of undefined"

提示/编辑：我正在使用Vuetify 2.0。 Vuetify注入应用程序的方式发生了一些变化。这是我的vuetify插件文件的代码：

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
import de from 'vuetify/es5/locale/de';

Vue.use(Vuetify)

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: '#3f51b5',
        secondary: '#b0bec5',
        accent: '#8c9eff',
        error: '#b71c1c'
      },
    },
  },
});

Answer 1

问题是您实际上并未将插件本身导出到'@/plugins/vuetify'中；

import MyCustomComponent from '@/components/MyCustomComponent'
import Vuetify from 'vuetify';

export default {
  install(Vue, options) {
    function renderMyCustomComponent() {
        Vue.use(Vuetify)
        const CustomComponent= Vue.extend(MyCustomComponent)
        let instance = new CustomComponent()
        instance.$mount()
        document.body.appendChild(instance.$el)
    }

    Vue.prototype.$renderMyComponent = renderMyCustomComponent
  }
}

Answer 2

不确定您是否解决了此问题，但是我遇到了一个问题，即插件中的Vuetify无法正确初始化。

Vuetify文档指出，创建vue实例时需要定义vuetify选项：

new Vue({
  vuetify,
}).$mount('#app')

幸运的是，自定义Vue插件具有一个我们可以使用的options参数。

以下是占用您插件的代码：

const options = {}; // add other options here! (vuex, router etc.)
Vue.use(YourCustomPlugin, options);

new Vue(options).$mount('#app');

这是您的插件代码：

import VuetifyConfig from "./src/plugins/vuetify";

export default {
    install(Vue, options) { // options is undefined unless you pass the options param!
        Vue.component('my-custom-component', MyCustomComponent);
        Vue.use(Vuetify);
        options.vuetify = vuetify;
    }
};

vuetify模块非常简单：

import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";

const opts = {}

export default new Vuetify(opts);

如何将Vuetify注入我的自定义vue插件

2 个答案: