Привет, любители VueJS!
Сегодня я хотел бы поговорить с вами о системе макетов для вашего приложения VueJS. Мой друг Филипп спрашивал меня, как добавить разные макеты для его приложения для выпечки. После нескольких часов поиска в Google он нашел несколько интересных уловок и спросил меня, что я думаю о макетах VueJS. В этой статье я решил поделиться своим мнением по этой теме и показать вам трюки, как создавать умные макеты для проекта VueJS.
Но прежде чем мы начнем, задайте себе один вопрос:
Ответ прост:
Как разработчики VueJS обычно решают эту проблему? Самый распространенный подход - создать компонент более высокого порядка и добавить его на все страницы.
Я вижу пару проблем с этим подходом:
- Мы должны импортировать наши макеты снова и снова на разные страницы.
- Мы должны обернуть наш контент этими компонентами макета.
- Это немного усложняет наш код и заставляет компоненты отвечать за рендеринг макетов.
С одной стороны, это не должно иметь большого значения, но меня впечатлил подход 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. Я вижу несколько преимуществ:
- Легко реализовать. Вы можете добавить его через несколько минут после создания нового проекта.
- Легко использовать. Макет просто должен быть указан в соответствующем маршруте. Но если вы забудете это сделать, макет по умолчанию все равно будет работать.
- Сделал наш компонент более чистым без хотя бы одного оператора импорта и оболочки шаблона.
- Вся логика компоновки перенесена на уровень маршрутизатора, а не на уровень компонентов.
Надеюсь, вам понравилась эта статья и вы нашли несколько полезных приемов, которые можно использовать в повседневной работе. Базу кода вы можете найти в моей учетной записи github - https://github.com/NovoManu/vue-smart-layouts
Если вам интересна эта статья или другие мои статьи, не стесняйтесь подписываться на меня:
github: https://github.com/NovoManu
twitter: https://twitter.com/ManuUstenko
На этом все,
Увидимся в следующей статье.