你如何在 web 组件中包含 vuetify

Question

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

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

我想在此组件中使用 Vuetify。我如何将它添加到 mycomponent.vue 以便它在组件的影子根范围内？

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

谢谢，唐尼

Answer 1

从v1.3开始，可以导入单独的组件，A La Carte...

<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

Answer 2

对于 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>

你如何在 web 组件中包含 vuetify

How do you include vuetify inside web component

vue.js

vuetify.js

vue-cli-3