Vue + Tailwind CSS | Создание приложения с нуля (Часть 1/5)

• Создание полноценного приложения на Vue 3 с использованием Composition API.  

• Применение стилей с помощью CSS Framework.  

• Приложение называется Antrac, адаптировано под мобильные устройства.  

• Ввод новой активности и указание времени для каждой.  

• Синхронизация времени между вкладками.  

• Статистика времени, потраченного на активности.  

• Установка проекта с использованием рекомендованного способа.  

• Использование инструментов ESLint и Formatter.  

• Установка npm зависимостей и запуск сервера для разработки.  

• Установка Tailwind CSS и PostCSS.  

• Инициализация проекта и настройка конфигурационных файлов.  

• Подключение Tailwind CSS в проекте.  

• Установка расширений для форматирования кода и поддержки Vue.  

• Удаление ненужных файлов и настройка окружения для разработки.  

• Использование расширения для браузера для разработки.  

• Обзор структуры приложения и файлов, загружаемых при обращении.  

• Импорт функций и компонентов, создание Vue приложения.  

• Очистка шаблона компонента и начало верстки шапки приложения.  

• Шапка фиксируется сверху при скроллинге.  

• Элементы шапки располагаются на одной строке.  

• Элементы шапки выравниваются по вертикали и бокам.  

• Добавляется нижняя граница и белый фон.  

• Использование npm пакета для интеграции иконок.  

• Импорт иконок в компонент.  

• Иконка "чек" отображается справа от лейбла.  

• Иконка имеет зеленый цвет и уменьшенный шрифт.  

• Добавление лейбла с прогрессом активности.  

• Прогресс отображается в процентах.  

• Использование директивы vue if для условного рендеринга лейблов.  

• Добавление центральной части и навигации.  

• Навигация фиксируется в самом низу страницы.  

• Центральная часть растягивается на всю высоту страницы.  

• Добавление ссылок на страницы.  

• Ссылки располагаются на одной строке.  

• Иконки добавляются в каждую ссылку.  

• Иконки уменьшаются в размерах.  

• Проверка разметки навигации.  

• Удаление содержимого из тэга мейн для проверки без содержимого.  

• Продолжение работы в следующем уроке.  

• Обнаружена идентичная разметка для пунктов меню.  

• Использование директивы Vue для многократного рендеринга разметки.  

• Создание переменной для хранения названий страниц.  

• Использование директивы Vue для итерации по массиву страниц.  

• Интерполяция значений переменной в атрибуты HTML.  

• Применение директивы VueBind для привязки значений к атрибутам.  

• Интерполяция текста в теги HTML.  

• Использование атрибута key для правильного сопоставления элементов.  

• Применение директив VueIf и VueElseIf для отображения нужных иконок.  

• Применение компонента Vue для рендеринга иконок.  

• Использование директивы VueBind для связывания значений с атрибутами.  

• Преобразование массива в объект для итерации.  

• Переход к созданию кастомных компонентов.  

• Создание компонента для шапки страницы.  

• Использование соглашения именования компонентов Vue.  

• Создаем кастомный компонент для шапки, переносим разметку из компонента ап.  

• Импортируем компонент в корневой компонент ап.  

• Удаляем импорт компонента иконки из компонента ап.  

• Переносим разметку навигации в новый компонент на.  

• Импортируем компонент на в корневой компонент ап.  

• Удаляем ненужные импорты и определения констант.  

• Вырезаем разметку логотипа и создаем компонент лого.  

• Переносим разметку лейбла прогресса в компонент хедер прогресс.  

• Импортируем компоненты в корневой компонент ап.  

• Вырезаем разметку пункта меню и создаем компонент на вайтем.  

• Переносим директиву ви на компонент на вайтем.  

• Используем слот для передачи иконок из компонента на.  

• Указываем атрибут href на компоненте на вайтем.  

• Отключаем наследование атрибутов корневым элементом компонента.  

• Проверяем, что атрибуты наследуются правильно.  

• Создаем константу для хранения текущей страницы.  

• Присваиваем дополнительные классы элементам пункта меню.  

• Используем директиву байда для присвоения классов на основе выражений.  

• На ссылке уже есть атрибут class, поэтому дополнительные классы добавляются к нему.  

• В компоненте зарав переменная пейдж содержит разные названия страниц.  

• Проверка позволяет динамически присваивать класс пункту меню, соответствующему текущей странице.  

• Необходимо зарегистрировать слушатель события клика на ссылке.  

• Используется директива вион для регистрации обработчика событий.  

• При клике на ссылке переменная карен пейдж меняет свое значение.  

• Переменная карен пейдж не обновляет интерфейс, так как она простая.  

• Для динамического обновления интерфейса переменные должны быть реактивными.  

• Функция рф из пакета вью используется для создания реактивной переменной.  

• Переменная карен пейдж становится реактивной, что позволяет обновлять интерфейс.  

• При клике на пункте меню подсвечиваются нужные пункты.  

• Для предотвращения кликов на текущем пункте меню используется класс.  

• Вью избавляет от необходимости обращаться к значениям реактивных переменных через свойства.  

• Переменная карен пейдж используется в шаблоне для подсветки пункта меню.  

• При начальной загрузке страницы подсвечивается нужный пункт меню.  

• При загрузке страницы значение хэша должно соответствовать одной из страниц.  

• Функция норм пейдж хэш проверяет валидность хэша и присваивает значение реактивной переменной.  

• При невалидном хэше подсвечивается первый пункт меню.  

• Создаются отдельные компоненты для каждой страницы.  

• Компоненты страниц отображаются в зависимости от выбранного пункта меню.  

• Компоненты страниц размещаются в папке пейджис и отображаются в компоненте ап.  

• Импортируем компоненты страниц, указывая их папки.  

• Проверяем отображение компонентов в инструментах разработчика.  

• Используем директиву vue show для отображения одной страницы в определенный момент.  

• Директива vue show переключает состояние свойства display элемента.  

• Проверяем текущее значение страницы и отображаем соответствующий компонент.  

• Применяем директиву к другим компонентам страниц, сравнивая их с константами.  

• Перемещаем логику контроля состояния переменной currentPage в компонент App.  

• Исправляем путь к файлу с константами и проверяем отсутствие ошибок.  

• Передаем переменную currentPage компоненту через кастомный атрибут.  

• Используем кастомные атрибуты для передачи данных между компонентами.  

• Определяем кастомные атрибуты с помощью макроса defineProps.  

• Обновляем значение переменной currentPage в компоненте App.  

• Не модифицируем внешние свойства напрямую, а отправляем события.  

• Используем макрос defineEvent для объявления событий.  

• Обновляем значение переменной currentPage при клике на пункт меню.  

• Регистрируем слушатели для события navigate в компоненте App.  

• Обновляем значение переменной currentPage на основе данных события.  

• Проверяем, что обновленное значение переменной currentPage передается в компонент Nav.  

• Логотип и лейбл прогресса должны быть кликабельными и вести на соответствующие страницы.  

• При клике на логотипе переходим на страницу тайм-лайн, на лейбле прогресса - на страницу прогресса.  

• Отслеживаем клики на логотипе и лейбле из компонента шапки и обновляем переменную состояния пейдж.  

• Импортируем константу с названием страницы тайм-лайн и используем её в атрибуте href.  

• Регистрируем слушатель события клика на ссылке в компоненте шапки.  

• При клике на логотипе отправляем событие тайм-лайн компоненту-родителю.  

• В компоненте ап прослушиваем событие тайм-лайн и обновляем переменную состояния карен пейдж.  

• Проверяем, что при клике на логотипе обновляется хэш страницы и переменная состояния.  

• Копируем импорт константы пейдж тайм-лайн и переименовываем её в пейдж прогресс.  

• Прослушиваем события кликов на лейбле прогресса и отправляем событие прогресс компоненту ап.  

• Обновляем переменную состояния карен пейдж при клике на лейбле прогресса.  

• Обновляем реактивную переменную карен пейдж в компоненте ап.  

• Создаем функцию гоу для обновления переменной пейдж.  

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

• Создаем файл с функциями общего назначения, не зависящими от фреймворка.  

• Перемещаем функцию пейдж хэш в этот файл и импортируем её в компонент ап.  

• Аналогично перемещаем объект на вайтс, хранящий список пунктов меню, в файл с константами.  

• Добавляем разметку для страницы тайм-лайн.  

• Используем директиву вифор для отображения элементов списка.  

• Применяем стили к элементам списка и проверяем результат в браузере.  

• Округляем ссылку, делаем цвет фона светло-серым, горизонтальные падинги - две единицы.  

• Увеличиваем шрифт и делаем цвет текста серым.  

• Центрируем лейблы по горизонтали с помощью абсолютного позиционирования и смещения.  

• Добавляем верхний отступ для первого элемента с помощью класса mt-7.  

• Проверяем результат в браузере, добавляем уникальные значения для каждого часа.  

• Планируем продолжить работу над страницей тайм-лайн в следующем уроке.  

• Создаем константу для хранения списка часов в компоненте тайм-лайн.  

• Используем цикл for для генерации 24 часов и добавления их в массив.  

• В шаблоне отображаем все 24 часа, используя деструктуризацию свойств.  

• Создаем функцию для генерации массива часов.  

• Возвращаем значение константы и присваиваем его переменной тайм-лайн айс.  

• Переносим константу ас в файл констант и импортируем функцию в компонент тайм-лайн.  

• Создаем компонент тайм-лайн айт для отображения одного часа.  

• Импортируем компонент в компонент тайм-лайн и переносим разметку.  

• Используем директиву ви для отображения компонента тайм-лайн айт.  

• Переносим директиву ви на компонент тайм-лайн айт.  

• Добавляем внешние свойства для передачи данных компоненту.  

• Используем объект для хранения данных, представляющих один час.  

• Выносим классы в отдельную переменную для упрощения шаблона.  

• Добавляем функционал подсветки текущего часа.  

• Проверяем соответствие текущего часа и присваиваем дополнительные классы для выделения.  

• Присвоение фиолетового цвета заднему фону и белого текста для текущего часа.  

• Удаление классов для текущего часа, если он не является текущим.  

• Использование массивов для указания классов в атрибуте class.  

• Перемещение массива часов в корневой компонент для хранения основных данных.  

• Импорт функции из файла функций в корневой компонент.  

• Передача массива часов компоненту тайм-лайн с помощью внешнего свойства.  

• Добавление селект элемента в каждый компонент тайм-лайн.  

• Настройка стилей для селект элемента: растяжение на всю ширину, округление краев, светло-серый фон.  

• Добавление кнопки для сброса значения селект элемента.  

• Импорт и стилизация кнопки: округление краев, светло-серый фон, падинги.  

• Применение псевдо-классов для состояния наведения и отключенного состояния.  

• Размещение кнопки и селект элемента на одной строке.  

• Использование директивы ви для итерации массива опций.  

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

• Создание массива опций и проверка корректности отображения.  

• Создание базового компонента для селект элемента.  

• Импорт разметки селект элемента в новый компонент.  

• Передача массива опций и плейсхолдера в качестве внешних свойств.  

• Декларирование внешних свойств с помощью макроса де файн пробс.  

• Передача идентификатора выбранной опции через внешнее свойство.  

• Добавление новых внешних свойств в общий список в макросе пробс.  

• Определение выбранной опции на основе свойства.  

• Сравнение идентификатора текущей активности с выбранной активностью.  

• Привязка выражения к атрибуту с помощью директива v-if.  

• Удаление атрибутов name и id из элемента select.  

• Выделение разметки кнопки в отдельный компонент.  

• Импорт компонента в файл с названием base-button.  

• Использование элемента slot для передачи разметки извне.  

• Возможность переиспользования компонента кнопки.  

• Определение внешних свойств в виде объекта.  

• Указание типов данных для каждого свойства.  

• Использование более детальной нотации для предотвращения ошибок.  

• Возможность сделать внешние свойства обязательными и указать значения по умолчанию.  

• Использование свойства validator для проверки формата данных.  

• Проверка массива объектов на наличие ключей label и value.  

• Применение функции для выполнения валидации.  

• Проверка каждого элемента массива на соответствие заданным критериям.  

• Проверка типов данных свойств вел и лейбл.  

• Использование метода эври для проверки каждого элемента массива.  

• Возвращение значения из функции валидатора для успешного завершения.  

• Изменение формы объектов в компоненте тайм-лайн айтемс.  

• Предупреждение о несоответствии формата данных.  

• Использование конфигурационной опции валидатора для дополнительной проверки.  

• Определение валидных страниц с помощью константы на вайтс.  

• Проверка совпадения названия страницы с одним из существующих.  

• Предупреждение при передаче невалидного названия страницы.  

• Проверка типа данных свойства ауэр как числа.  

• Проверка валидности часа в диапазоне от 0 до 23.  

• Использование деструктурирования для упрощения кода.  

• Проверка каждого элемента массива тайм-лайн айс.  

• Использование функции валидатора для массива.  

• Копирование логики валидации из компонента тайм-лайн.  

• Создание файла валидаторс.  

• Экспорт функции валидатора для проверки валидности страницы.  

• Импорт константы на вайтс в модуль валидаторс.  

• Применение валидации к событиям.  

• Использование валидатора для проверки данных, отправляемых с событием.  

• Проверка валидности названия страницы при возникновении события навигейт.  

• Прослушивание событий при клике на логотип и лейбл прогресса.  

• Использование одного события для обработки кликов на разных элементах.  

• Использование событий для навигации.  

• Перенос определения события и функции валидатора в компонент.  

• Отправка одного события с дополнительной переменной для определения страницы.  

• Удаление двух событий и добавление одной директивы.  

• Передача названия страницы в переменную и изменение реактивной переменной.  

• Переиспользование функции валидатора в другом месте.  

• Перенос импорта функции валидатора в файл с функциями.  

• Вынесение константы "midnight" в отдельный файл.  

• Проверка работы изменений в браузере.  

• Вынесение логики валидации в отдельные функции.  

• Создание функции валидатора для внешнего свойства.  

• Перенос импорта функции валидатора в компонент.  

• Создание функции валидатора для массива объектов.  

• Импорт функции в компонент.  

• Проверка работы валидации для часов.  

• Сохранение выбранного значения выпадающего списка в переменную.  

• Прослушивание событий выбора элемента списка.  

• Реализация сброса значения выпадающего списка при нажатии на кнопку.  

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

• Событие селект передается с выбранным значением.  

• Используется объект событие для получения выбранного значения.  

• Компонент отправляет кастомное событие селект.  

• Используется макрос define и миц для валидации событий.  

• Событие селект обрабатывается в компоненте тайм лайт.  

• Переменная состояние обновляется при выборе значения.  

• Локальная переменная не является реактивной, поэтому значение не обновляется.  

• Переменная делается реактивной с помощью функции рф.  

• Реактивная переменная обновляет внешние свойства.  

• Значение переменной преобразуется в число при выборе.  

• Реализуется сброс значения выпадающего списка при клике на кнопку.  

• При сбросе значения выпадающего списка отображается неправильное значение.  

• Используется выражение для определения значения по умолчанию.  

• Добавляется условие для отображения опции по умолчанию при пустом значении.  

• Выражение для определения значения по умолчанию переносится в отдельную переменную.  

• Используется функция computed для создания реактивного свойства.  

• Свойство зависит от внешнего свойства и обновляется при его изменении.  

• Определяется функция валидации для проверки значения.  

• Функция валидации проверяет, является ли значение числом или null.  

• При сбросе значения используется валидатор для проверки числа или null.  

• Добавляем новые функции в файл валидатора.  

• Выносим повторяющиеся проверки в отдельные функции.  

• Поддерживаем один уровень абстракции в функциях.  

• Разделяем выражение на несколько функций.  

• Создаем приватный валидатор для проверки интервала.  

• Передаем параметры для проверки интервала.  

• Выносим проверку валидности часа в отдельную функцию.  

• Создаем функцию для проверки строки.  

• Переносим валидаторы ближе к функциям.  

• Файл с валидаторами увеличивается, но становится безопаснее.  

• Проверяем работу приложения и навигации.  

• Указываем значение по умолчанию для реактивной переменной.  

• Выносим элемент отображения часа в отдельный компонент.  

• Переносим разметку и логику в новый компонент.  

• Импортируем новый компонент и передаем значение часа.  

• Преобразуем час в строку и добавляем недостающие символы.  

• Удаляем импорт функции компьютер.  

• Проверяем отображение часов в браузере.  

• Добавляем разметку для страницы активностей.  

• Используем компоненты для кнопки и выпадающего списка.  

• Импортируем необходимые компоненты и кастомную иконку.  

• Импортируем компоненты из папки "пейджис" в папку "компонент".  

• Создаем флекс-контейнер с вертикальным расстоянием и падингами.  

• Добавляем отступ между названием активности и кнопкой удаления.  

• Увеличиваем размер шрифта для длинных названий активности.  

• Присваиваем атрибуты компоненту BaseSelect для отображения опций.  

• Определяем массив опций для компонента BaseSelect.  

• Используем директиву ви для итерации массива активностей.  

• Добавляем границу между элементами списка с помощью класса девай.  

• Создаем новый компонент для списка активностей.  

• Вырезаем разметку элемента списка и создаем новый компонент.  

• Переносим директиву вифор и массив объектов в новый компонент.  

• Импортируем необходимые компоненты и переносим их в новый компонент.  

• Создаем реактивную переменную для состояния выпадающего списка.  

• Передаем значение переменной компоненту BaseSelect.  

• Обновляем значение выпадающего списка с помощью события селект.  

• Переносим массив активностей в главный компонент приложения.  

• Добавляем внешнее свойство для массива активностей.  

• Переносим статический массив активностей в файл с константами.  

• Добавляем кастомную функцию валидации для свойства активностей.  

• Проверяем, что активность является строкой и не пуста.  

• Выносим проверку в отдельную функцию для улучшения читаемости кода.  

• В корневом компоненте добавляем новый элемент в массив с пустой строкой.  

• При передаче массива во внешнее свойство компонента, каждый элемент попадает в компонент активности.  

• Валидация срабатывает, так как последний элемент массива является пустой строкой.  

• В компоненте отменяем последние изменения.  

• Предупреждение о неудачной валидации исчезает.  

• Определяем валидацию для массива активностей.  

• Импортируем функцию валидации из модуля.  

• Экспортируем новую функцию, принимающую массив активностей.  

• Используем подход, аналогичный валидации объектов тайм-лайн.  

• Проходим по элементам массива и выполняем валидацию каждого элемента.  

• Проверяем работу приложения и отсутствие предупреждений в консоли.  

• Все данные передаются в компоненты валидными.