Я пытаюсь настроить базовую маршрутизацию в Vue. Я включаю 3 списка файлов, которые где-то неисправны. Если я включаю в app.vue, я получаю компонент foo в браузере. Если я сделаю, как указано в коде ниже, я получу:

введите описание изображения здесь

main.js

import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router' import Foo from './components/Foo'; Vue.use(VueRouter); Vue.config.productionTip = false const router = new VueRouter({ routes: [ { path: '/', component: Foo } ], mode: 'history' }) new Vue({ router, render: h ={amp}gt; h(App), }).$mount('#app') 

App.vue

  {amp}lt;template{amp}gt; {amp}lt;div id="app"{amp}gt; {amp}lt;img alt="Vue logo" src="./assets/logo.png"{amp}gt; {amp}lt;router-view{amp}gt;{amp}lt;/router-view{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/template{amp}gt; {amp}lt;script{amp}gt; import Foo from './components/Foo' export default { name: 'app', components: { Foo, }, } {amp}lt;/script{amp}gt; 

foo.js

 {amp}lt;template{amp}gt; {amp}lt;div class="hello"{amp}gt; {amp}lt;h1{amp}gt;string happens{amp}lt;/h1{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/template{amp}gt; {amp}lt;script{amp}gt; export default { name: 'Foo', } {amp}lt;/script{amp}gt; 

Вы получаете сообщение об ошибке, потому что вы импортируете Foo App.vue , но не используете его там. Просто удалите этот импорт, и ошибка исчезнет.