Как лучше реализовать страницу?

Question

[Ibishka]

Здарова. Установил vue Cli. В папке src создал папку pages, внутри создал Home.vue, в нем между тег template открыл див и внутр поставил весь коде домашней страницы header section и т.д. Из за того что без дива vue ругается. Так потом подключил этот файл в App.vue. так на выходе получилься div с id app внутри div без класса просто чтоб не ругвлся vue из за header и section и т.д и внутри мой код header section и т.д. Так вот что то менч не устраивает что использую бесмысленный div. Так как вы делаете это все можете ли подсказать? P.s сайт многостраничный.

Comments

[Алексей Ярков]

Не уходите. Сейчас наши специалисты по потоку сознания подойдут и сгенерируют код.

[Ibishka]

Алексей Ярков, да мне не нужен код просто словами

[Aetae]

Один компонент vue = один логический элемент. Не должно быть в куче "код header section и т.д", должны быть отдельные компоненты Header, Section и т.д., которые кладутся в отдельный компонент Layout.

Answer 1

[Andrey Suha]

Каждый компонент имеет только один корневой элемент из за этого и ругается, а по хорошему хедер отдельный компонент, секция отдельный, страница тоже отдельный компонент.

Получится что то вроде этого

// App.vue
<div id="app">
    <app-header/>
    <router-view/>
    <app-footer/>
</div>

И страницы будут выглядеть примерно так

<div id="page">
...page content

Ну и советую почитать Вам сначала доку по вую