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

【问题标题】：Vue.js component is not showing visually on the pageVue.js 组件未在页面上直观显示
【发布时间】：2021-03-02 04:22:37
【问题描述】：

我有以下名为 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 boot 模板）中调用组件的方式如下：

<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>

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

【问题讨论】：

标签： vue.js vue-component web-component

【解决方案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
    }
  })
})();

【讨论】：