Как реализовать простую структуру Vue?

Question

[SpideR-KOSS]

Добрый день!

Подскажите как реализовать простую структуру на VueJS?

Задача следующая.

Есть код хедера и футера. Есть много html страниц с одинаковой структурой но разным контентом.

Как мне проще сделать чтобы я мог использовать один шаблон структуры, но менять содержимое контента в зависимости от страницы?

И может ли это работать если нет сервера?

Comments

[Андрей К]

На счёт севера, хоть какой-то север для отдачи статики нужен.

Если это тупо статический сайт без базы данных, то можно и без Vue сделать на HTML + CSS, если использовать какой-то шаблонизатор HTML, чтобы не все делать руками.

В общем, сервер нужен хоть в каком-то виде, иначе нет особого смысла вам затеи.

[SpideR-KOSS]

Андрей К, под шаблонизатором HTML вы подразумеваете фреймворк типа бутстрапа?

[Андрей К]

SpideR-KOSS, нет, например есть мой любимый Pug, а также много других на любой вкус.

Он умеет layout (шаблон страницы в которую нужно что-то вставлять), include (места, где просто подставляються куски файлов, чтобы можно было одни и те же куски вставлять в разные файлы, да и просто удобно когда не все в одном месте), а также переменные и простые функции.

Мне он нравится тем, что там используется синтаксис на отступах, вместо тегов. Но не только мне, так как это самый популярный для js.

Конечно часть его функций не нужна при работе с Vue.js, но я обычно тоже их использую вместе. Там написано внизу страницы.

[Никита Егоров]

Андрей К,

использовать какой-то шаблонизатор HTML

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

[Андрей К]

Никита Егоров, https://ru.wikipedia.org/wiki/%D0%A8%D0%B0%D0%B1%D...

[Никита Егоров]

Андрей К, а типа специальное название. Как-то не удобно, сказал другому человеку это слово, он не понял, а если препроцессор, то суть улавливается.

[Андрей К]

Никита Егоров, Вы путаете, то, что один язык компилируется другой, как например LESS или SASS - это даёт некоторое дополнительное удобство одного языка перед другим.

Использую шаблонизатор в данном случае мы получаем новое качество. Мы получаем инструмент с помощью которого можно делать большое количество статических страниц и поддерживать изменения в них, например меню не нужно будет изменять в 1000 HTML файлах.

Ну и вообще, в том же C препроцессор просто делает простые текстовые операции. Смысл слова как раз в том, что он выполняется до основного процесса.

А вот шаблонизатор как раз и говорит, что он позволяет что-то создавать на основе шаблона.