VueJS Module not found error after adding one component

I am creating a poetry site which displays poetry and stuff. I added a component -> PostCard.vue and then imported it on my router file. However, I am getting this error: Module not found error with

./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-3d4dfba4","hasScoped":false,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/PoetCard.vue
Module not found: Error: Can't resolve '...' in 'c:\wamp64\www\testvue\src\components'
 @ ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-3d4dfba4","hasScoped":false,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/PoetCard.vue 15:22-36
 @ ./src/components/PoetCard.vue
 @ ./src/router/routes.js
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

PoetCard.vue

<template>
    <div class="card" style="width: 18rem;">
        <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>
</template>

routes.js

import PoetCard from '@/components/PoetCard'

export const routes = [
    { path: '/', name: 'PoetCard', component: PoetCard }
]

App.vue

<template>
    <div id="app">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <a class="navbar-brand" href="#">Poet Box</a>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <form class="form-inline my-2 my-lg-0 ml-auto">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                </form>
            </div>
        </nav>
        <router-view/>
    </div>
</template>

<style>
    body {
        font-family: 'Roboto', 'Helvetica', sans-serif;
    }
    .navbar-brand {
        font-family: 'Pacifico', sans-serif;
        font-size: 24px;
    }
</style>   

<script>
    export default {
        name: 'App'
    }
</script>

main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

require('bootstrap/dist/css/bootstrap.min.css');

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    render: h => h(App)
})

I am getting that error just after I created the PostCard component. Please help me to fix this.