Vue JS 创建 Web 组件的问题

Question

我正在尝试从 vue 组件创建 Web 组件，但我遇到了一些问题。这背后的原因是我正在用 vue 创建一个新项目，但我的经理希望我能够使用我正在编写的所有组件到我们现有的项目中，这是一个非常复杂的 Web 应用程序，没有任何框架（只有 vanilla 和jquery).

我面临的问题是当我尝试使用第三方库（如 vuetify）的组件执行此操作时。当我在非 Vue 应用程序中使用 Web 组件时，这根本无法按预期工作并且没有应用样式。

以下是这些组件之一的示例：

<template>
  <v-card dark class="mx-auto"
    outlined>
    <v-card-title>
      {{title}}
    </v-card-title>
    <v-row>
      <v-col cols="sm" v-for="stat in stats" :key="stat.text">
        <div class="col pa-4">
          <h3>{{stat.value}}</h3>
          <h5 class=" text-uppercase">{{stat.text}}</h5>
        </div>
      </v-col>
    </v-row>
  </v-card>
</template>

<script>
import {VCard, VCol, VRow} from 'vuetify'
export default {
  name: "StatusCard",
  props: {
    title: String,
    //stats: Array
  },
  components:{VCard, VCol,VRow},
  data: () => ({
      stats: [{text: 'test 1', value: 11}, {text: 'test 2', value: 22}]

  })
};
</script>

<style>
.small-icon {
  padding-bottom: 3px;
  padding-right: 5px;
}
</style>

这是我的 vue 应用程序中的样子：

现在我运行这一行：

vue-cli-service build --target wc --inline-vue --name card-test src/components/StatusCard.vue

我得到了所有文件，当我启动一个简单的 HTTP 服务器并提供创建的 demo.html 文件时，这就是我得到的：

我做错了什么？

Answer 1

好的，所以我终于让它工作了，以防其他人遇到同样的问题。我刚刚在我的组件中导入了 vuetify css:

<style>
@import '../../node_modules/vuetify/dist/vuetify.min.css';
</style>

Vue JS 创建 Web 组件的问题

Vue JS problems creating web components

web-component

vue.js