我正在创建一个展示诗歌和东西的诗歌网站。我添加了一个组件-> PostCard.vue
,然后将其导入到路由器文件中。但是,我得到这个error: Module not found error
和
./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)
})
创建PostCard组件后,我立即收到该错误。请帮我解决这个问题。