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

Posted 2023-02-22

【中文标题】如何将 Vuetify 注入我的自定义 vue 插件

【英文标题】：How to inject Vuetify into my custom vue plugin

【发布时间】：2019-12-04 12:21:31

【问题描述】：

我想创建一个 Vue 插件，其中包含一个以编程方式呈现 Vue 组件的函数。该组件依赖于 Vuetify。如果我在该组件中使用 vanilla 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'
      ,
    ,
  ,
);

【问题讨论】：

能否提供'@/plugins/vuetify'的代码？

刚刚编辑了我的帖子。顺便提一句。我忘了提到我正在使用 Vuetify 2.0.0

【参考方案1】：

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

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

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

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

这是使用您的插件的代码：

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

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

这是你的插件代码：

import vuetify 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);

【参考方案2】：

问题是你实际上并没有在'@/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
  

【讨论】：

不幸的是，这并不能解决我的问题。它会导致与以前相同的错误。

您是否尝试在Vue.extend 之前移动Vue.use()？