Vue|[Vue warn]: Unknown custom element: <v-car> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

一、问题现象

 

 

 ===================================================================

 

 

 最近在练习vue项目时，遇到这样的一个问题,很是奇怪，编译是ok，点击也能弹窗，但还是会报错

vue源码

<template>
    <div>
        <template>
            <v-tabs :value="0" background-color="primary">
              <v-tab @click="$router.push({name:'Case'})">用例管理</v-tab>
              <v-tab @click="$router.push({name:'Task'})">任务管理</v-tab>
              <v-tab @click="$router.push({name:'Jenkins'})">Jenkins管理</v-tab>
              <v-tab @click="$router.push({name:'Report'})">报告管理</v-tab>
            </v-tabs>
        </template>

<v-dialog v-model="addDialog" max-width="500px">
    <v-car>
        <v-card-title>添加测试用例</v-card-title>

        <v-card-text>
            <v-container>
                <v-text-field label="用例名称"></v-text-field>
                <v-select :items="selectItem" label="用例类型"></v-select>
                <v-textarea label="用例数据"></v-textarea>
            </v-container>
        </v-card-text>

        <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="primary" text @click="addDialog = false">取消</v-btn>
            <v-btn color="primary">确定</v-btn>
        </v-card-actions>

    </v-car>
</v-dialog>

<v-btn color="primary" class="btn" @click="addDialog = true">添加用例</v-btn>
<v-btn color="success" class="btn">生成任务</v-btn>
<template>
            <v-data-table
              v-model="selected"
              :headers="headers"
              :items="desserts"
              item-key="name"
              show-select
              class="elevation-1"
            >
            </v-data-table>
        </template>
</div>
</template>




<script>
    export default {
        data() {
            return {
                selectItem: ['文本', '文件'],
                addDialog: false,
                selected: [],
                headers: [{
                    text: 'id',
                    value: ''
                }, {
                    text: '用例名称',
                    value: ''
                }, {
                    text: '用例数据',
                    value: ''
                }, {
                    text: '操作',
                    value: ''
                }],
                desserts: [],
            };
        },


    };
</script>


<style scoped>
    .btn {
        margin: 10px;
    }
</style>

 

二、解决方案

v-car修改成v-card

 

 三、修改后效果

 

 四、总结

组件名称少了一个单词，编译通过，功能似乎也ok，但是带来的影响是很大的，还是需要多补补vuetify基础知识