Пару дней назад моя сестра попросила об одолжении. Она хотела создать небольшую контактную / промо-страницу для детского сада, которым она руководит. Ничего особенного и необычного, просто обычная целевая страница с графикой мероприятий и контактной формой. Работа выходного дня.
Что ж, звучит как очень простая и быстрая задача, которую нужно выполнить и помочь нуждающемуся брату или сестре. Первая мысль была Vue, следующей - Попутный ветер. Поразмыслив, выясняется, что это прекрасная возможность наконец использовать Vite… с реальным проектом.
Итак, у меня есть инструменты для UI / внешнего интерфейса, остались только обработчик формы и развертывание приложения, обслуживающая платформа. И поскольку все это я получил от Netlify… решение было принято.
Установить и запустить Vite было очень просто. Этот инструмент работает невероятно быстро и мощно. Оказывается, я тоже могу немного поиграться с концепцией настройки сценария. Он навязывает своего рода новый подход к написанию, но в конечном итоге становится очень удобным и согласуется с потоком Composition API.
Хорошо, моя среда разработки готова, мне просто нужно приступить к созданию реальных компонентов. Поскольку я использую Tailwind, мне нужно установить некоторую начальную конфигурацию со значениями стиля по умолчанию. Вы знаете, размеры шрифта, цвета и прочее. Отлично.
Создавайте контейнеры с некоторыми классами сетки, отлично, здесь ничего особенного. Пришло время для некоторых глобальных компонентов многократного использования, таких как кнопки. И начнем ... 🤕 Безумие классов утилит "Попутный ветер". Чтобы определить простую кнопку, мне пришлось использовать более двадцати классов. Flashback - каждый раз, когда я использую Tailwind, я сталкиваюсь с этой сверхдлинной разметкой строк - ужасно. Кошмар, правда?
С этим нужно покончить! По крайней мере, для моих приложений Vue. 😃
Я знаю, что могу использовать обработчик apply и определить все классы в разделе стилей. Но это совсем не решает проблемы. Это тоже не так уж и глобально, дружественно к повторному использованию. Итак, мне нужно определить некоторые глобальные варианты для моих глобальных компонентов, таких как кнопки, входы, блоки. Но как их использовать с Tailwind и Vue? Легко, пока я могу связывать свои стили внутри шаблонов Vue, я могу определять свои стили как объект и использовать их везде. И, конечно же, пока я использую Composition API, я могу создавать причудливые композиции. Так был создан пакет vue-use-variant.
Основная цель заключалась в создании глобально доступного объекта или объектов с некоторыми определениями стилей, вариантами компонентов. Давайте сделаем это. Для баннера.
Большой. 👍 У нас есть несколько общих стилей кнопок и несколько определений вариантов - для основных и дополнительных. Типичный. 😅
Хорошо, теперь составной элемент и то, как я использую его с вариантами выше.
Ваш окончательный результат будет выглядеть примерно так.
font-bold rounded border-0 bg-blue hover:opacity-80 p-4 text-lg
Вот и все. Круто, правда? Он чистый, читаемый, удобный, быстрый и доступен во всем мире. Классовое безумие покончено. 🎉 Вы можете использовать его с объектами Ref, с реквизитами и прямо внутри компонента. Наконец, вы можете использовать его с любой другой структурой. Он был создан для экосистемы Vue, но вам не мешает использовать его с React, если хотите.
Создайте свои варианты для всех повторно используемых компонентов и используйте их в своем приложении. Таким образом, вы всегда получите один источник правды, а ваши компоненты пользовательского интерфейса всегда будут иметь одинаковую форму и визуальное представление.
Техническую спецификацию и некоторые инструкции можно найти здесь. Вы можете установить его из npm или пряжи. Вы можете поиграть с самой простой демонстрацией, которая есть в репозитории. Он был создан с помощью Vite, так что он может быть дополнительным стимулятором. И, конечно же, очень тепло приветствуются любые предложения, сообщения о проблемах.
Спасибо за прочтение. Наслаждаться! ✋ Может быть, подумай купи мне кофе.
