vue.js - 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 文件时，我得到了所有文件，这就是我得到的：

我究竟做错了什么？

标签： vue.jsweb-component

Answer 1

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

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