Привет, любители VueJS!

Сегодня я хотел бы поговорить с вами о системе макетов для вашего приложения VueJS. Мой друг Филипп спрашивал меня, как добавить разные макеты для его приложения для выпечки. После нескольких часов поиска в Google он нашел несколько интересных уловок и спросил меня, что я думаю о макетах VueJS. В этой статье я решил поделиться своим мнением по этой теме и показать вам трюки, как создавать умные макеты для проекта VueJS.

Но прежде чем мы начнем, задайте себе один вопрос:

Ответ прост:

Как разработчики VueJS обычно решают эту проблему? Самый распространенный подход - создать компонент более высокого порядка и добавить его на все страницы.

Я вижу пару проблем с этим подходом:

  1. Мы должны импортировать наши макеты снова и снова на разные страницы.
  2. Мы должны обернуть наш контент этими компонентами макета.
  3. Это немного усложняет наш код и заставляет компоненты отвечать за рендеринг макетов.

С одной стороны, это не должно иметь большого значения, но меня впечатлил подход NuxtJS к добавлению макетов, и я хочу создать что-то подобное. Если вы не знакомы с NuxtJS, могу сказать два слова: «Это потрясающе». Вы можете определить свой макет как свойство компонента, и вам не следует добавлять компоненты более высокого порядка для добавления макетов в свое приложение. Но давайте пока забудем о NuxtJS и посмотрим, что мы можем делать с макетами в VueJS.

Предварительное условие

Давайте начнем и создадим новый проект vue с Vue CLI https://cli.vuejs.org/

vue create vue-layouts

Не стесняйтесь выбирать между Vue2 + и Vue3 +.

Очистка проекта

Мы должны очистить наш проект и удалить неиспользуемый файл, созданный vue cli.

Прежде всего, удалите компонент HelloWorld.vue и папку компонентов. В этом проекте это не понадобится. В Home.vue мы должны удалить импорт в компонент HelloWorld.vue.

Удалите папку ресурсов с содержимым и создайте новый файл views / Contacts.vue.

После удаления неиспользуемых файлов наши проекты выглядят так:

--src
----views
------About.vue
------Contacts.vue
------Home.vue
----App.vue
----main.js
----router.js

Теперь мы готовы создавать макеты.

Создание конструктора макета

В качестве первого шага нам нужно создать новый компонент под названием «layouts / AppLayout.vue» (не забудьте создать папку «layouts»).
Вот Vue Реализация 2 версии:

Как видите, это очень простой компонент, но он составляет основу нашей системы верстки. Давайте посмотрим, как это работает.

В части шаблона мы добавили динамический компонент. В качестве содержимого динамического компонента мы добавляем вычисляемое свойство, называемое «макет». Это вычисленное свойство ищет текущий маршрут и проверяет там макет или использует макет по умолчанию, который мы определили в константе как «AppLayoutDefault». Если маршрут найден, вычисляемое свойство пытается найти подходящий макет и загрузить его в динамический компонент.

А вот реализация Vue 3:

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

Вот реализация Vue 3 Composition API (спасибо Kristoffer Roen Lie за идею https://twitter.com/KristofferRoenL)

Создание макетов

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

Но прежде чем мы продолжим работу с макетами, давайте немного реорганизуем наш код и переместим ссылки маршрутизатора из App.vue в новый компонент «layouts / AppLayoutLinks».

После этого небольшого рефакторинга мы должны создать наши три макета и макет по умолчанию. Начнем со стандартного. В моем случае это очень просто. Вы, наверное, захотите сделать его красивее.

Имейте в виду, что имя вашего макета по умолчанию должно быть таким же, как константа defaultLayout в нашем конструкторе макета AppLayout.vue. В нашем случае это «AppLayoutDefault» (без расширения файла).

И наши три основных макета один за другим

Я не тратил много времени на создание красивых макетов. Единственная разница - разные цвета. Но я считаю, что этого достаточно для целей данной статьи.

Перенос раскладок на уровень роутера

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

Верно, мы можем добавить его в метаатрибут каждого используемого маршрута. Вы, наверное, уже заметили, что в нашем конструкторе макета мы использовали свойство this. $ Route.meta.layout. О свойствах маршрута можно прочитать здесь.

Итак, давайте сделаем это прямо сейчас и добавим наши макеты к каждому маршруту.

Завершающий штрих

Вы можете сказать сейчас: «Хм, все еще не работает». Да, нам просто нужно сделать последнее - подключить конструктор макета к приложению. Есть два пути:

Во-первых, используйте старый добрый компонент более высокого порядка, чтобы обернуть наш router-view в App.vue. Именно так:

Да, я добавил компонент более высокого порядка, несмотря на то, что я сказал в начале статьи. Но, как видите, он импортируется только один раз, и я думаю, что это нормально.

Есть другой способ. Вместо импорта нашего AppLayout.vue в App.vue мы можем создать глобальный компонент vue и включить его в приложение vue. Нам следует изменить наш файл main.js.

Вот версия Vue 2:

И версия Vue 3:

Очистите файл App.vue

Тестирование макета по умолчанию

Чтобы убедиться, что все работает должным образом, давайте создадим новый тестовый маршрут и убедимся, что макет по умолчанию работает правильно.
Добавьте новый маршрут в router.js

{
  path: '/test',
  name: 'Test',
  component: () => import('@/views/Home.vue')
}

Если вы перейдете к маршруту «/ test» сейчас, то увидите наш макет по умолчанию, поскольку мы не определяли его в маршрутизаторе.

Заключение

Я обнаружил, что эту систему компоновки очень удобно использовать в моих приложениях VueJS. Я вижу несколько преимуществ:

  1. Легко реализовать. Вы можете добавить его через несколько минут после создания нового проекта.
  2. Легко использовать. Макет просто должен быть указан в соответствующем маршруте. Но если вы забудете это сделать, макет по умолчанию все равно будет работать.
  3. Сделал наш компонент более чистым без хотя бы одного оператора импорта и оболочки шаблона.
  4. Вся логика компоновки перенесена на уровень маршрутизатора, а не на уровень компонентов.

Надеюсь, вам понравилась эта статья и вы нашли несколько полезных приемов, которые можно использовать в повседневной работе. Базу кода вы можете найти в моей учетной записи github - https://github.com/NovoManu/vue-smart-layouts

Если вам интересна эта статья или другие мои статьи, не стесняйтесь подписываться на меня:

github: https://github.com/NovoManu

twitter: https://twitter.com/ManuUstenko

На этом все,
Увидимся в следующей статье.