Как правильно подключить все компонетны в vue проекте?

Question

[HamSter]

Есть простейший vue проект с такой структурой (по аналогии с проектом realworld-vue):

_______________________________________

src ¬
.... assets
.... components ¬
............................ Home.vue
............................ Map.vue
.... router ¬
................. index.js
.... App.vue
.... main.js
_______________________________________

Содержимое 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,
    });

Содержимое components/Home.vue (аналогично и для Map.vue):

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

Содержимое App.vue:

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

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)
    });

Запускаю webpack, ошибок нет, но и на экране ничего нет. Сборщик настроен, роутер тоже.

Но в панели разработчиков есть только <div id="app"></div> и ошибка:

Uncaught ReferenceError: Home is not defined

Вопрос: Как правильно подключить все компонетны в vue проекте? ...

Какая правильная последовательность подключения файлов, импорт, структура проекта?

И правильно ли я понимаю что в router подключаются все файлы компонентов?

Answer 1

[0xD34F]

Импортируйте компоненты Home и Map (надо заметить, что имена подобраны так себе - одно слово не рекомендуется использовать; кроме того, Map уже есть) там, где используете их - в router/index.js, импортировать в App.vue не надо (как и указывать их в components). Типа так.

Comments

[HamSter]

Спасибо огромное!
Про Map поняла)

А можно еще вопрос, если нужно вставить на эту же страницу и home и карту и еще какой-нибудь компонет (не переходя по ссылке)

нужно ли в App.vue импорт этих компонентов или как-то иначе вставляется?

[0xD34F]

HamSter, если компонент используется не в роутере - да, надо будет сделать импорт и указать его в components. Или же зарегистрировать компонент глобально.

Answer 2

[Олег]

- Структура может быть любая, обычно достаточно той, что идет из коробки сборки.
- Компоненты можно подключать глобально и локально, первый вариант для базовых компонентов, которые часто используются, например кнопка, поле и прочее, остальное подключайте локально.
- В router (и в принципе везде) подключаются, те компоненты, которые нужны, в вашем случае Home и Map.