Всем привет, продолжаем цикл статей о социальной сети Stryfe.online. В этом выпуске я расскажу об очередных крупных изменениях, да да лучше я понимаю, что лучше выбрал один стек и работай с ним, но изменение стека сделано ради ускорения создания.
Смена стека
Сменой стека это назвать конечно слишком громко, но смена есть. С Vue 3 + Expressjs, я переделал на Nuxtjs. Такой сменой я ускорил разработку серверной стороны в несколько раз, а так же это позволяет мне сразу сделать максимально рабочий сайт для поисковых систем и скорости отрисовки для вас. Nuxtjs в серверном api, позволяет удобно использовать zod валидатор только описав схему. Об остальных плюсах я буду показывать на примере в следующих выпусках.
На примере простого маршрута отображения числа зарегистрированных пользователей.
Как видно по пути к файлу можно легко понять полный маршрут, а метка get в файле отображает метод http-запросов.
В дальнейшем покажу еще несколько примеров для понимания как удобно устроен Nuxtjs на основе серверного фреймворка Nutro.js.
UI
В предыдущей статья я говорил, что проект будет переезжать на PrimeVue. Но переезд был сложнее, чем с vue+express на nuxt, т.к. общие подходы у api они встречаются везде, а вот Tailwindcss на основе которого создан PrimeVue и особенности самой работы PrimeVue сильно отличается от Bootstrap 5 и приходилось разбирать и сам PrimeVue и Tailwindcss для тех же выравниваний или отступов. Не спорю у Tailwindcss удобнее тем, что можно задавать динамические размеры той же высоты или ширены объекта например h-[350px] (высота 350px) или w-[350px] (ширина 350px).
А теперь рассмотрим страницы, которые уже сверстаны.
Главная страница
Страница авторизации
Отклик от формы авторизации
PrimeVue намного приятней в работе, остаются только сложности с тем, что его остается заучить как и Tailwindcss. Если будут какие-то нарекания и предложения к дизайне, милости прошу в комментарии. На этом у меня все, еще увидимся в следующих статьях.