How to correctly connect all components in a vue project?

Question

Vue.js

There is a simple vue project with the following structure ( similar to the realworld-vue project ):
_______________________________________
src ¬
.... assets
.... components ¬
................... ......... Home.vue
............................ Map.vue
.... router ¬
. ................ index.js
.... App.vue
.... main.js
_______________________________________
Content of router/index.js :

import Vue from 'vue';
    import Router from 'vue-router';    
    
    Vue.use(Router); 
    
    const routes = [
    	{
    		path: '/',
    		name: 'home',
    		title: 'Home',
    		component: Home
    	},
    	{
    		path: '/',
    		name: 'map',
    		title: 'Map',
    		component: Map
    	},
    	{
    		path: '*',
    		redirect: { name: 'home' },
    	},
    ];
    
    export default new Router({
    	routes,
    });

Contents of components/Home.vue (same for Map.vue ):

<template>
    	<div id="Home">
    		Home
    	</div>
    </template>
    
    <script>
    	export default {
    		name: 'Home'
    	};
    </script>
    
    <style scoped>
    </style>

App.vue content :

<template>
        <div id="app">
            <h1>Hello World!</h1>
    
            <!-- <real-world-home />-->
            <router-view></router-view> 
        </div>
    </template>
    
    <script>
        import Home from './components/Home';
    
        export default {
            name: 'app',
            components: { Home }
        }
    </script>
    
    <style lang="scss">
    </style>

Main.js content :

import Vue from 'vue'; 
    
    import App from './App';
    import router from './router';
    
    new Vue({
    	el: '#app',
    	router,
    	template: '<App/>',
    	components: { App },
    	store,
    	render: h => h(App)
    });

I run webpack, there are no errors, but there is nothing on the screen either. The collector is configured, the router too.
But in the developer panel there is only <div id="app"></div>an error:

Uncaught ReferenceError: Home is not defined

Question: How to properly connect all components in a vue project? ...
What is the correct sequence of connecting files, imports, project structure?
And do I understand correctly that all component files are connected to the router?

Answer 1

Import the Home and Map components where you use them - in router/index.js, you don't need to import them into App.vue (nor do you need to specify them in components). Like so .
Well, using Map as the name of the component is not a good idea, because Map is already there .

Answer 2

- The structure can be any, usually the one that comes from the assembly box is enough.
- Components can be connected globally and locally, the first option is for basic components that are often used, such as a button, field, etc., connect the rest locally.
- In the router (and in principle everywhere) those components that are needed are connected, in your case Home and Map.