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

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


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


import PoetCard from '@/components/PoetCard'

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


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

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

    export default {
        name: 'App'


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

Vue.config.productionTip = false


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

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