Шаблоны и страницы

Просмотров 422
Сложность:

Типовая структура Nuxt.js приложения предполагает наличие папок с шаблонами (Layouts) и страницами (Pages). По сути, всё это компоненты. Только это типовые компоненты, которые находятся на верхнем уровне. Уровень шаблона выше уровня страницы. Внутри шаблона можно выводить контент страниц. В странице можно указать шаблон, который будет использоваться.

Изначально есть только шаблон default. Соответственно, все страницы, где явно не указан layout используют именно его. Можно без проблем использовать только один шаблон даже в более или менее сложных приложениях, но удобнее их делить, если содержимое существенно отличается. Например, админка сайта и основной контент. В админке можно прямо в layout указать настройки доступа, чтобы не делать этого в каждой странице.

Также в layout удобно прописывать общие мета-теги и подключать общие скрипты и стили для определенных групп страниц. Тем не менее, я считаю, что чем меньше шаблонов используется, тем лучше.

Также внутри папки layots можно создать файл error.vue, который будет выполнять роль шаблона страницы клиентской ошибки. Для обработки серверных ошибок нужно в корневой папке с проектом создать каталог app, в нём каталог views. И уже там создать статичный файл error.html.

Перейдём к страницам. В Nuxt.js используется файловых роутинг. Значит каждый vue файл внутри папки Pages является отдельной страницей на сайте. Внутренние папки являются вложенными путями в url. Например, если создать папку company, а в ней 2 файла index.vue и contacts.vue, то первый будет открываться по пути /company, а второй по пути /company/contacts.

Но пути могут быть не только статическими (с заранее заготовленными файлами), но и динамическими. Например, у нас есть папка page, а в ней файл _url.vue. Так мы сообщаем Наксту, что вместо _url будет подставляться динамический параметр. В самом запросе к бэкенду используем подставляемый url и бэкенд возвращает нам страницу, если находит документ с совпадением по полю url.

Можно использовать динамические страницы внутри папок с динамическими именами: /_category/_product.vue. Можно вообще отказаться от файлового роутинга. Можно лишь расширить его определенной функциональностью. Все эти случаи расписаны в инструкции к Nuxt.

При сборке приложения Nuxt разбивает бандл на чанки, учитывая файлы внутри папки Pages. То есть каждая отдельная страница = отдельный чанк. Можно дополнительно включить разбитие чанков и по шаблонам.

Автор: Александр Дергунов
Дата публикации: 27.3.2021 г.
Поделиться:

Простое Nuxt.js приложение

Оптимизация Nuxt.js приложения
4662 просмотров4662
Простое Nuxt.js приложение
Пользуемся преимуществами современных javascript фреймворков.
Сложность:
Что такое Nuxt.js?
664 просмотров664
Простое Nuxt.js приложение
Описание javascript фреймворка Nuxt.js.
Сложность:
Установка Nuxt.js и подготовка IDE
723 просмотров723
Простое Nuxt.js приложение
Устанавливаем нужное ПО и плагины, загружаем проект с Github.
Сложность:
Режимы работы Nuxt.js
737 просмотров737
Простое Nuxt.js приложение
Отдельный процесс и middleware для Express.js.
Сложность:
Структура Nuxt.js приложения
809 просмотров809
Простое Nuxt.js приложение
Типовые папки и файлы, разделение функциональности.
Сложность:
Структура Nuxt.js приложения - видео
Бэкенд Express + Mongoose
723 просмотров723
Простое Nuxt.js приложение
Реализация бэкенда для Nuxt приложения
Сложность:
Шаблоны и страницы
423 просмотров423
Простое Nuxt.js приложение
Для чего они нужны? Какие между ними отличия.
Сложность:
Vue компоненты
931 просмотров931
Простое Nuxt.js приложение
Примеры использования в Nuxt.js
Сложность:
Главная страница энциклопедии
metrika