錯誤：找不到模塊“./MessageFeed.vue”

Question

這是錯誤的屏幕截圖：-

這些是我正在處理的文件：-

這是對話.vue：-

<template>
<div class="conversation">
    <h1>{{contact ? contact.name : 'Select a Contact'}}</h1>
    <MessageFeed :contact="contact" :message="messages"/>
    <MessageComposer @send="sendMessage"/>




</div>
</template>

<script>
    import MessageFeed from './MessageFeed.vue';
    import MessageComposer from './MessageComposer.vue';

    export default {
        props: {
        contact: {
        type: Object,
        default: null
},
        messages: {
            type: Array,
            default: []
}
},
    methods: {
        sendMessage(text){
            console.log(text);
}

}

}

</script>

這是 MessageFeed.vue：-

<template>
    <div class="feed">
    <ul v-if="contact">
         <li v-for="message in messages" :class="`message${message.to == contact.id ? ' sent' : 'recieved'}`" :key="message.id">
        <div class="text">
        {{message.text}}
        </div>
</li>
         </ul>  

    </div>

</template>

<script>
    export default {
        props: {
        contact: {
            type: Object, 
            required: true
},
        message: {
           type: Array,
           required: true
}
}

}



</script>

我對javaScript或vue一無所知，我只是按照教程進行操作，我遇到了這個錯誤，找不到任何解決方案，我什至不知道在這里放什么代碼，但我希望這已經足夠了

-謝謝你

Answer 1

嘗試像那里一樣在 Conversation.vue 重寫腳本

    <script>
        import MessageFeed from './MessageFeed.vue';
        import MessageComposer from './MessageComposer.vue';

        export default {
            components: {
    MessageFeed,MessageComposer
  },
            props: {
            contact: {
            type: Object,
            default: null
    },
            messages: {
                type: Array,
                default: []
    }
    },
        methods: {
            sendMessage(text){
                console.log(text);
    }

    }

    }

    </script>