Давайте кодируем дизайн капли с vue.js & tailwindcss (работающая демонстрация) – Часть 1 из 2
Статья № 5 моей «1 статья в день до конца блокировки»
Обновление: вот часть 2
Давайте выберем небольшой дизайн из Dribble и кодируйте его с Vue.js & Tailwindcss, вы узнаете, как работает двусторонняя переплета Vue и как Tailwind позволяет делать красивые приложения, будучи полностью гибкими и не написав вручную CSS.
Давайте выберем дизайн, который легко реализовать, чтобы она не сделала статью слишком длинной, а также интуитивно понятна, весела и выглядит красиво. Я нашел этот дизайн, который рассчитывает ИМТ, позволяя вам выбрать свой пол, рост, вес и возраст.
Простой калькулятор ИМТ по Рубель Ваальт
Я использую Nuxt.js который является основой для Vue и Tailwind CSS Анкет
Почему Vue и Nuxt?
Vue.js это прогрессивная структура, которая позволяет вам быстро и быстро делать веб -приложения, у него двусторонняя привязка и использует однофакторные компоненты, которые позволят вам внести индивидуальные теги HTML, такие как и т. Д., Это позволяет вам разделить свою HTML. Ваш код очиститель, читаемый и более поддерживаемый. Nuxt это структура для VUE. Зачем нам нужна структура для рамки, так как Nuxt Randles во многих случаях использования в реальном мире для веб -сайтов, выходящих на коробку, которая будет практична, где вы в конечном итоге напишите меньший код котла, если вы выбрали Vue. Вы все еще можете выбрать Vue, если хотите, я просто люблю Nuxt лучше из -за его маршрутизации и структуры папок.
Почему Tailwindcss?
Tailwindcss Является ли структура CSS с только низкоуровневыми классами CSS, она предоставляет всю особенность полноценной структуры CSS и все же обеспечивает всю гибкость и свободу, которую CSS предоставляет, она не самоуверенна и не заставит вас писать CSS в ограниченном Путь, как традиционный фреймворк (начальная загрузка), в более простых терминах есть форма класса почти Каждое правило CSS (которое вы используете большую часть времени). Технически это означало бы, что это очень огромная структура, которая является, но Purgecss приходит на помощь, он удалит все избыточные классы и сохраняет только то, что используется в вашем html (nuxt.js имеет встроенные Purgecs, так что у вас нет сделать это вручную)
Шаг 1: Давайте создадим Nuxt Project и выберите Tailwindcss в качестве нашей структуры пользовательского интерфейса.
Создание проекта Nuxtjs с TailWindcss
После этого откройте проект в вашем любимом редакторе кода, я предпочитаю код VS. Вы можете запустить проект в режиме разработки, запустив команду NPM Run Dev, где вас встретят шаблон. Удалите весь код с страниц/index.vue и удалите CSS с макетов/default.vue. Макеты/default.vue будут действовать в качестве точки входа вашего проекта, здесь все содержимое маршрута будет отображаться динамически, и ваши маршруты будут определены в папке страниц, Каждый файл .vue в папке страниц означает веб -страницу, а маршрут будет именем файла. Вы можете узнать больше о Nuxt Routing Здесь и бесплатный Udemy Курс целый посвящен nuxt.js.
У нас будет две страницы в приложении, одна из них – калькулятор, который будет отображаться, как только сайт будет открыт, и одна будет страницей результата, у нас уже есть файл index.vue для него в папке страниц, добавить другой Result.vue Это добавит новый маршрут к нашему проекту, например, example.com/result.
Вот как легко создавать маршруты в nuxt.js. Структура проекта ниже.
Основная структура проекта для приложения
Запустите проект, запустив NPM Run Dev и Open Localhost: 3000 в вашем браузере и посмотрите на текст «домашняя страница», который является нашим индексом.
Default.vue будет отображать эти маршруты внутри компонента внутри. Если вы хотите, чтобы какой -либо компонент был показан на обоих маршрутах, вы можете просто добавить их по умолчанию. Vue будет автоматически отображаться, вместо повторяющихся кода на обеих страницах, это здорово для n_avbar_, навигационные ящики , задние кнопки в верхней части и т.п.
Шаг 2: Давайте кодируем калькулятор/индекс/домашняя страница.
Мы начнем с разделения кода на разные компоненты
Составные части
Итак, у нас есть 4 разных компонента здесь. Навигационная панель, которая будет отображаться в BOH на странице индекса и странице результата, поэтому мы можем просто включить ее в макет/default.vue. Другие три компонента будут показаны на странице индекса/калькулятора. Вот структура папок, которой я всегда следую, чтобы сохранить код чистым и читаемым.
Шаг 3: кодировать компоненты
- Все приложение имеет их темный, поэтому давайте применим класс BG-Gray-900 к нашему лучшему DIV, который является макетом/default.vue.
- Сделайте навигационный планку. У него есть один дивинг со значком и некоторым текстом в центре, с тенью Thich Box, мы будем использовать CSS Flex, чтобы выровнять содержание и классы тени TailIndcss. Приведенный ниже HTML -код генерирует NAVBAR для нас
Иконка используется от Герои
Таким образом, приведенный выше код генерирует этот NAVBAR с помощью нулевого пользовательского CSS. По сути, у нас есть родительский дивинг с двумя детьми, Div с значком SVG и тегом параграмма с некоторым текстом. Я применил к нему Flex & Etems-Center, чтобы разделить их на одну и ту же линию и вертикально выравнивая их в центре с центром элементов.
Я буду добавлять компонент NAVBAR в нашем файле макетов/default.vue, чтобы он был доступен в обоих маршрутах.
Код навигации импортируется в файле default.vue
- Гендерный компонент имеет два DIV, мы будем использовать CSS GRID, нет необходимости использовать CSS GRID, это может быть легко достижимо с другими способами, просто хотели бы объяснить функции TailWindcss для вас.
Вот как работает CSS Grid в Tailwindcss, подробнее об этом Здесь Анкет
Гендерная карта сетка с CSS Tailwind
Приведенный выше код генерирует этот макет, его простой и реагирует на Taillids, адаптивные помощники, сетка-2 определяет, что у нас, наша макет, будет два столбца, и между этим есть разрыв в 4 единицах, больше нет хакерских хакерцев с столбцами.
Гендерный компонент
Давайте выберем гендерные значки из Flaticon и добавьте их в эти карты. Вот как это в конечном итоге будет смотреть. Я добавил небольшую непрозрачность к не выбранной карте с классовой непрозрачностью-75, чтобы подсказать другое.
Выглядит хорошо, теперь давайте спроектируем компонент высоты. Я использовал слайдер HTML -диапазона с некоторыми пользовательскими CSS, потому что TailWindcss не позволяет настраивать на этом уровне, я сделал небольшое изображение, чтобы действовать как кнопка слайдера, потому что у него был радиус границы с непрозрачностью, который мы не можем сделать с CSS.
Теперь мы получим этот дизайн в нашем коде, соответствует дизайну, хотя и не пиксель для Pixel, я все еще доволен результатом. Я добавил директиву V-модели для захвата значения ползунка диапазона всякий раз, когда пользователь скользит ее и использует строковую интерполяцию для отображения значения сверху {{height}} , Это хороший пример того, как работает двусторонняя связь.
Подобно гендерному компоненту с двумя равными DOV, давайте сделаем компонент, чтобы получить возраст и вес пользователя.
До сих пор мы достигли большей части части калькулятора, все, что осталось добавить в наценке, – это кнопка внизу.
Мы добавим фиксированную кнопку внизу, которая рассчитывает, и отобразим результат во второй странице, где мы будем использовать события, излучаемые из наших компонентов, и получить захват в родителе.
Вот как будет рассмотреть страницу index.vue. Я также добавил кнопку внизу, которая заканчивает кодирование первой страницы. Это не Pixel Perfect, но мы добились хорошего прогресса. Вот код поступил До сих пор (я мог бы обновить его в ближайшее время после завершения проекта) и живая демонстрация Анкет
Эта статья стала достаточно долго, поэтому я сломаю ее в две части и опубликую эту часть 2 позже сегодня.
Надеюсь тебе понравилось. Вы можете следовать за мной на Twitter Чтобы получить обновление на части 2, так как я буду публиковать о своей серии там.
Дайте мне знать, если вам нужна помощь или у вас есть предложения по этому поводу.
PS, очень счастливый Рамадан для всех. Мир!
Оригинал: “https://dev.to/fayaz/let-s-code-a-dribble-design-with-vue-js-tailwindcss-working-demo-part-1-of-2-3h9”