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

我想创建一个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]：监视程序“isDark”的getter中出错：“TypeError:无法读取未定义的属性'dark'”

提示/编辑：我正在使用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'
      },
    },
  },
});

---

问题是您实际上没有在

@/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
  }
}

---

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

Vuetify文档指出，在创建vue实例时，需要定义

Vuetify

选项：

newvue({
vuetify，
}).$mount（“#应用程序”）

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

以下是使用插件的代码：

const options={}；//在这里添加其他选项！（vuex、路由器等）
使用（自定义插件，选项）；
新的Vue（选项）$mount（“#应用程序”）；

这是您的插件代码：

从“/src/plugins/vuetify”导入vuetify；
导出默认值{
安装（Vue，选项）{//options未定义，除非您传递options参数！
Vue.component（'my-custom-component'，MyCustomComponent'）；
Vue.use（Vuetify）；
options.vuetify=vuetify；
}
};

vuetify

模块非常简单：

从“Vuetify”导入Vuetify；
导入“vuetify/dist/vuetify.min.css”；
常量opts={}
导出默认的新Vuetify（opts）；

你能提供

@/plugins/vuetify'

的代码吗？刚刚编辑了我的文章。顺便说一句，我忘了提到我正在使用Vuetify 2.0.0。不幸的是，这并不能解决我的问题。它会导致与以前相同的错误。您是否尝试在

Vue.extend

之前移动

Vue.use（）

？