Question

我正在使用以下命令构建Web组件：

vue-cli-service build --target wc --name my-element 'src/components/mycomponent.vue'

我想在此组件内部使用Vuetify。如何将其添加到mycomponent.vue中，以使其位于组件的影子根内部？

此组件将动态加载到使用其他框架/样式构建的应用程序中。我希望Web组件能够在其中使用v-btn，v-layout等。

谢谢你，唐尼

Answer 1

对于vuetify 2.x，它需要在Vue实例上进行如下初始化。

// plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify);

const opts = {};

export default new Vuetify(opts);

// main.js
import Vue from 'vue';
import App from './app.vue';
import vuetify from './plugins/vuetify';

new Vue({
  vuetify,
  render: h => h(App),
}).$mount('#app');

您需要将此类初始化移至Web组件中。

<template>
  ...
</template>

<script>
import { VBtn, VLayout } from 'vuetify/lib'
import vuetify from '../plugins/vuetify';

export default {
  name: 'MyWebComponent',
  vuetify,
  components: {
    VBtn,
    VLayout
  },
  ...
}
</script>

<style>
  ...
</style>

Answer 2

从v1.3开始，您可以导入单个组件点菜 ...

<template>
  <!-- whatever -->
</template>

<script>
import { VBtn, VLayout } from 'vuetify/lib'

export default {
  name: 'MyElement',
  components {
    VBtn,
    VLayout
  },
  // etc
}
</script>

请参见https://vuetifyjs.com/en/framework/a-la-carte#importing-components

您如何在Web组件中包含Vuetify

2 个答案: