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
    }
  })
})();

Vue.js 组件未在页面上直观显示

Vue.js component is not showing visually on the page

web-component

vue.js

vue-component