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

Question

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

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

在我的存储库中，您可以在 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...）。
创建一个 'wrapping' 组件（例如 Wrap.vue），将 vuetify 及其样式导入该组件，然后导入 App.vue。将新组件名称添加到 CLI 命令：

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

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

Vuetify build as Web component style not showing

javascript

web-component

vue.js

vuejs2

vuetify.js

有什么问题？

解决方案 1

解决方案 2