javascript - Vuetify 构建为 Web 组件样式未显示

Question

我正在使用 Vue 和 Vuetify 以及 Web 组件构建一个应用程序；当我将 Vuetify 添加为 Web 组件时，CSS 样式 Vuetify 已经消失了。我尝试将 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css"> 添加到 demo.html 文件中但这没有帮助。我的 repo 是 vuetify as web component . 我在我的 vue.config.js 中有 transpileDependencies: [ 'vuetify' ]但这也无济于事。 我需要注意 Vuetify 样式不起作用。 我尝试了以下页面。

1. v-aoutocomplete not working with wc
2. Vuetify: external page CSS breaks Vuetify's component style
3. Custom Web Component image not showing

在我的 repo 中，您可以在 readme.MD 文件中看到步骤和重现以及我尝试过的选项。 我很高兴听到如何在 WC 中包含 vuetify 样式

Answer 1

问题是什么？

当 vue-cli正在构建它忽略的 Web 组件 main.js并使用 entry-wc.js相反，正如官方文档所说:When building a Webcomponent or Library, the entry point is not main.js, but an entry-wc.js file... .
默认 vue-cli已有这个入口文件，它使用src/App.vue作为入口组件，这意味着如果您导入 vuetify进入App.vue所有 vuetify 的组件都不会在那里呈现，它们将在下面 1 级呈现(所有导入到 App.vue 的组件)。

解决方案 1

从 App.vue 中删除所有 vuetify 的组件并将它们下移 1 级。

<template>
  <HelloWorld/> <!-- v-app / v-main / v-btn go inside HelloWorld -->
</template>

<script>
import vuetify from '@/plugins/vuetify'
import HelloWorld from './components/HelloWorld';

export default {
  name: 'App',
  vuetify,
  components: {
    HelloWorld,
  },
};
</script>

<style> 
  @import 'https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css';
</style>

解决方案 2

将 vuetify 的组件留在里面 App.vue (删除 import vuetify... + <style> @Import... )。
创建一个“包装”组件(例如 Wrap.vue )，将 vuetify 及其样式导入该组件，然后导入 App.vue . 将新组件名称添加到 CLI 命令:

...
"wcin": "vue-cli-service build --target wc --inline-vue --name my-element 'src/Wrap.vue'"
...