@vue/cli4.5.8 Vue3项目中独立Modal组件实现及缺失模板报错解决

• 核心原因是Modal.vue不符合Vue单文件组件（SFC）规范：所有模板内容必须被<template>标签包裹在SFC的根层级，你直接将<transition>作为SFC的顶层节点，Vue的SFC编译器无法识别这段内容为组件模板，最终编译生成的组件对象缺失渲染函数，触发「Component is missing template or render function」的警告。
• 补充说明：无自定义逻辑的组件可以不写<script>标签，编译器会自动生成默认导出，但模板未包裹的问题无法被编译器自动修复。

基础可用版本（仅补充模板包裹，无额外逻辑）：

<template>
  <transition name="modal">
    <div class="modal-mask">
        <div class="modal-wrapper">
            <div class="modal-container">
                
                <div class="modal-header">
                    <slot name="header">
                        default header
                    </slot>
                </div>
                
                <div class="modal-body">
                    <slot name="body">
                        default body
                    </slot>
                </div>
                
                <div class="modal-footer">
                    <slot name="footer">
                        default footer
                        <button class="modal-default-button" @click="$emit('close')">
                            OK
                        </button>
                    </slot>
                </div>
            </div>
        </div>
    </div>
</transition>
</template>

<style scoped>
    .modal-mask {
        position: fixed;
        z-index: 9998;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: table;
        transition: opacity 0.3s ease;
    }

    .modal-wrapper {
        display: table-cell;
        vertical-align: middle;
    }

    .modal-container {
        width: 300px;
        margin: 0px auto;
        padding: 20px 30px;
        background-color: #fff;
        border-radius: 2px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
        transition: all 0.3s ease;
        font-family: Helvetica, Arial, sans-serif;
    }

    .modal-header h3 {
        margin-top: 0;
        color: #42b983;
    }

    .modal-body {
        margin: 20px 0;
    }

    .modal-default-button {
        display: block;
        margin-top: 1rem;
    }

    .modal-enter {
        opacity: 0;
    }

    .modal-leave-active {
        opacity: 0;
    }

    .modal-enter .modal-container,
    .modal-leave-active .modal-container {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
</style>

如果需要更符合Vue3规范的写法，可以补充显式的事件声明，避免未声明的事件告警：

<script>
import { defineComponent } from 'vue'
export default defineComponent({
  // 显式声明组件对外触发的事件
  emits: ['close']
})
</script>

内容的提问来源于stack exchange，提问作者mstdmstd