未显示验证生成为Web组件样式

我正在使用Vue和Vutify构建一个带有Web组件的应用程序;当我将Vutify添加为Web组件时,CSS风格的Vutify已经消失了。我尝试将<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css">添加到demo.html文件中,但没有帮助。我的回购是vuetify as web component。 我的vue.config.jstranspileDependencies: [ 'vuetify' ]中有,但这也没有帮助。 我需要指出的是,Vutify风格不起作用。 我尝试了以下页面。

  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中加入vutify风格


解决方案

有什么问题?

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中,则不会在其中呈现vutify的所有组件,它们将呈现在1级以下(您正在导入到App.vue中的所有组件)。

解决方案1

App.vue中删除vutify的所有组件,并将其下移一级。

<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

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

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

相关文章