Vue.js组件在页面上没有可视化显示。

Question

我有以下名为TeamCard的Vue组件：

<template>
    <div class="m-8 max-w-sm rounded overflow-hidden shadow-lg">
        <!-- removed fro brevety -->
        div class="text-gray-900 font-bold text-xl mb-2">{{ name }}</div>
            <p class="text-gray-700 text-base"> {{ description }} </p>
            <!-- removed fro brevety -->
        </div>
    </div>
</template>
<script>
    export default {
        name: "TeamCard",
        props: {
            name: {
                type: String,
                required: true,
            },
            description: {
                type: String,
                required: true,
            },
        }
    };
</script>

<style scoped>
    @import "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css";
</style>

我以以下方式在HTML页面(Spring模板)中调用该组件：

<teamCard v-bind:name="'Hawks'" v-bind:description="'Best team'" ></teamCard>
<script src="https://unpkg.com/vue"></script>
<script th:src="@{/TeamCard/TeamCard.umd.min.js}"></script>
<script>
    (function() {
        new Vue({
            components: {
                teamCard: TeamCard
            }
        })
    })();
</script>

当我转到具有第二个片段的浏览器中的页面时，没有显示任何内容。控制台中没有错误。我做错了什么？如何显示组件？

Answer 1

我从来没有见过Vue这样使用，但它似乎没有安装元素的应用程序。试试这个：

<div id="app">
   <team-card v-bind:name="'Hawks'" v-bind:description="'Best team'"></team-card>
</div>

和

(function() {
  new Vue({
    el: '#app',
    components: {
      teamCard: TeamCard
    }
  })
})();