gpt4 book ai didi

vue.js - 如何将 Vuetify 注入(inject)我的自定义 vue 插件

转载 作者:行者123 更新时间:2023-12-03 06:38:58 24 4
gpt4 key购买 nike

我想创建一个 Vue 插件,该插件具有以编程方式呈现 Vue 组件的功能。该组件依赖于 Vuetify。如果我在该组件中使用 vanilla HTML/CSS,一切正常,但在其中使用与 Vuetify 相关的东西(例如 a )不起作用。我假设我没有将 vuetify 本身正确地注入(inject)到组件中。

在我的自定义组件中,我尝试分别导入每个 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 注入(inject)应用程序的方式发生了一点变化。这是我的 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'
},
},
},
});

最佳答案

不确定你是否解决了这个问题,但我遇到了同样的问题,即插件中的 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);

关于vue.js - 如何将 Vuetify 注入(inject)我的自定义 vue 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57215232/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com