Статья № 5 моей «1 статья в день до окончания карантина»

Давайте выберем небольшой дизайн из dribble и закодируем его с помощью Vue.js и tailwindcss, вы узнаете, как работает двусторонняя привязка Vue и как попутный ветер позволяет создавать красивые приложения, будучи полностью гибкими и без написания CSS вручную.

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

Я буду использовать Nuxt.js, который является фреймворком для Vue и tailwindcss.

Почему именно Vue и Nuxt?

Vue.js - это прогрессивный фреймворк, который позволяет быстро и быстро создавать веб-приложения, он имеет двухстороннюю привязку и использует отдельные файловые компоненты, которые позволят вам создавать пользовательские теги HTML, такие как<gender /> or <height-slider /> и т. Д., Это позволяет вам разделить разметку HTML на меньшие блоки и сделайте ваш код более чистым, читаемым и более удобным в обслуживании. Nuxt - это фреймворк для vue. Зачем нам нужен фреймворк для фреймворка, поскольку Nuxt обрабатывает множество реальных вариантов использования веб-сайтов, из коробки, которая практична, когда вы в конечном итоге напишете меньший шаблонный код, если бы вы выбрали vue. Вы все равно можете выбрать vue, если хотите, мне просто больше нравится Nuxt из-за его маршрутизации и структуры папок.

Почему Tailwindcss?

Tailwindcss - это CSS-фреймворк только с низкоуровневыми CSS-классами, он обеспечивает все функции полноценного CSS-фреймворка и при этом обеспечивает всю гибкость и свободу, которые предоставляет вам CSS, он не самоуверен и не заставит вас писать CSS. ограниченно, как это делает традиционный фреймворк (Bootstrap), проще говоря, существует форма класса почти для каждого отдельного правила css (которое вы используете большую часть времени). Технически это означало бы, что это очень огромный фреймворк, что и есть, но на помощь приходит purgeCss, он удаляет все лишние классы и сохраняет только то, что используется в вашем HTML (Nuxt.js имеет встроенный purgeCSS, поэтому у вас нет делать это вручную)

Шаг 1. Давайте создадим проект Nuxt и выберем TailwindCSS в качестве инфраструктуры пользовательского интерфейса.

После этого откройте проект в своем любимом редакторе кода, я предпочитаю VS Code. вы можете запустить проект в режиме разработки, выполнив команду npm run dev, где вас встретит шаблон. Удалите весь код из pages/index.vue и удалите css из layouts/default.vue. layouts/default.vue будет действовать как точка входа в ваш проект, здесь все содержимое маршрута будет отображаться динамически, и ваши маршруты будут определены в папке страниц, каждый файл .vue внутри папки страниц означает веб-страницу, а маршрут будет имя файла. Вы можете найти больше информации о маршрутизации nuxt здесь и полный бесплатный udemy курс, посвященный nuxt.js.

У нас будет две страницы в приложении, одна - это калькулятор, который будет отображаться, как только сайт будет открыт, и одна будет страницей результатов, у нас уже есть index.vue файл для него в папке страниц, добавьте еще один под названием result.vue this добавит новый маршрут в наш проект, например example.com/result.

Вот как легко создавать маршруты в nuxt.js. Структура проекта ниже.

Запустите проект, запустив npm run dev, откройте localhost:3000 в браузере и увидите текст «Домашняя страница», который был отображен index.vue, попробуйте открыть localhost:3000/result, вы увидите «Страница результатов», страницу result.vue.

default.vue будет отображать эти маршруты внутри компонента <nuxt />. Если вы хотите, чтобы какой-либо компонент отображался на обоих маршрутах, вы можете просто добавить их в default.vue, он будет отображаться автоматически, вместо того, чтобы повторять код на обеих страницах, это отлично подходит для n avbar, панели навигации, верхние кнопки назад и т. д.

Шаг 2. Давайте закодируем калькулятор / указатель / домашнюю страницу.

Начнем с разделения кода на разные компоненты.

Итак, у нас есть 4 разных компонента: панель навигации, которая будет отображаться на странице индекса и на странице результатов, поэтому мы можем просто включить ее один раз в layout/default.vue. Остальные три компонента будут показаны на странице указателя / калькулятора. Вот структура папок, которой я всегда следую, чтобы код оставался чистым и читаемым.

Шаг 3. Кодируйте компоненты

  • Все приложение имеет темные символы, поэтому давайте применим класс bg-gray-900 к нашему самому верхнему div, то есть layouts/default.vue.
  • Сделайте панель навигации. У него есть один div со значком и некоторый текст в центре, с большой тенью блока, мы будем использовать CSS Flex для выравнивания содержимого и классов тени для tailwindcss. Приведенный ниже HTML-код создает для нас панель навигации.

Таким образом, приведенный выше код создает эту навигационную панель с нулевым написанным настраиваемым CSS. В основном у нас есть родительский div с двумя дочерними элементами, div со значком svg и тег paragrarh с некоторым текстом. Я применил к нему flex и items-center, чтобы разделить их на одной линии и выровнял их по вертикали по центру с помощью items-center.

Я добавлю компонент навигационной панели в наш layouts/default.vue файл, чтобы он был доступен в обоих маршрутах.

  • Компонент Gender имеет два блока, мы будем использовать CSS-сетку, нет необходимости использовать CSS-сетку, это может быть легко достигнуто и другими способами, просто хотел объяснить вам возможности tailwindcss.

Вот как CSS Grid работает в Tailwindcss, подробнее об этом здесь.

Приведенный выше код генерирует этот макет, он прост и реагирует с помощью помощников, реагирующих на попутный ветер, grid-cols-2 указывает, что в нашем макете будет два столбца, и между ними будет промежуток в 4 единицы, больше никаких взломов полей с столбцами.

Давайте возьмем значки пола из flaticon и добавим их внутрь этих карточек. Вот как это в итоге будет выглядеть. Я добавил немного непрозрачности невыбранной карточке с классом opacity-75, чтобы выделить другую.

Выглядит хорошо, теперь давайте спроектируем компонент "Высота". Я использовал ползунок диапазона html с некоторым настраиваемым CSS, потому что tailwindcss не позволяет настраивать на этом уровне, я сделал небольшое изображение, которое будет действовать как кнопка ползунка, потому что у него был радиус границы с непрозрачностью, чего мы пока не можем сделать с CSS.

Теперь у нас есть этот дизайн в нашем коде, который соответствует дизайну, но не пиксель к пикселю, я все еще доволен результатом. Я добавил директиву v-model для захвата значения ползунка диапазона всякий раз, когда пользователь его перемещает, и использовал строковую интерполяцию для отображения значения поверх него {{height}}, это хороший пример того, как работает двусторонняя привязка.

Подобно компоненту пола с двумя равными блоками div, давайте создадим компонент для получения возраста и веса пользователя.

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

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

Так будет выглядеть страница index.vue в конце. Я также добавил внизу кнопку, которая завершает кодирование первой страницы. Это не идеальный пиксель, но мы добились хорошего прогресса. Вот код, зафиксированный на данный момент (я могу обновить его вскоре, когда проект будет завершен) и живая демонстрация.

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

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

Дайте мне знать, если вам понадобится помощь или у вас есть предложения по этому поводу.

PS Всем счастливого Рамадана. Мир!