При создании приложений Vue мы всегда будем иметь довольно общие компоненты, которые не подходят ни для одной функциональной области. Для компонентов такого типа мы создаем глобальный реестр, чтобы они были доступны во всем приложении.

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

TL;DR

  1. поместите все ваши общие компоненты в папку
  2. импортировать их в index.js
  3. экспортировать их из этого index.js в Array
  4. импортируйте этот массив, переберите их и зарегистрируйте с помощью Vue в своей основной точке входа.

Пример

Мне всегда резонирует конкретный пример, а не абстрактные понятия. Поэтому давайте посмотрим, как мы применили эту технику для проекта, который недавно отправили для Министерства образования штата Теннеси:

Вот некоторые служебные компоненты, которые мы используем во всем приложении:

Компонент <pretty-date> форматирует дату в общем формате, используя date-fns, что позволяет нам централизовать формат, а также то, как он отформатирован в одном компоненте. Изначально мы использовали moment.js, но, поскольку нам не нужна локализация, мы могли значительно снизить вес пакета и использовать date-fns.

SuccessMessage.vue

<success-message> не является глобальным компонентом верхнего уровня, но используется им для отображения пользовательских сообщений.

ErrorMessage.vue

Как и <success-message>, <error-message> используется для отображения сообщений пользователю, но для отображения ошибок вместо сообщений об успехе. Оба компонента используются непосредственно <system-messages>.

SystemMessages.vue

Компонент <system-messages> считывает ошибки и сообщения прямо из магазина и отображает либо <success-message>, либо <error-message> в зависимости от ситуации.

LoadingIndicator.vue

<loading-indicator> - это простой индикатор загрузки на основе CSS. Это все отображается, но лучше обернуть его как единое целое, а не копировать этот HTML / шаблон повсюду.

index.js

В этом index.js мы импортируем файлы верхнего уровня и экспортируем их как Array:

main.js

Теперь в нашей точке входа мы регистрируем компоненты перед загрузкой Vue:

Вывод

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

Есть ли у вас какие-либо проекты Vue, в которых вам нужна помощь? Отправьте нам сообщение и дайте нам знать. Мы будем рады помочь!

Первоначально опубликовано на eldarion.com 23 октября 2018 г.