Билдер Vue 3 веб приложений22.11.2023 10:00

Vue 3 вебсайт билдер (npm пакет vue-webapp) позволяет создать каркас будущего веб приложения, с возможностью выбора бизнес-шаблона (портфолио, блог, магазин и .т.д.), макета сайта, дизайна и элементов функционала (API модуль, i18n, PWA, splash screen, auth модуль, темы и т.д.), для дальнейшей кастомизации и наполнения контентом.

Создание (можно также использовать npm или yarn):

$ pnpm create vue-webapp

✔ Project name: … my-vue-project
✔ Make it PWA ( adds service worker and manifest )? … yes
✔ Add Github Action Workflow for publishing it on GitHub Pages? … no
✔ Select navigation drawer › TouchSlideoutDrawer
✔ Select webapp footer › RichFooter
✔ Add 'BaseIcon' component? … yes
...

$ cd my-vue-project
$ pnpm i
$ pnpm dev

На выходе:

Обоснование​

Существует довольно много (в основном специфичных и быстро устаревающих) бойлерплейтов для создания Vue приложения. Обычно по этим подразумевается создание пустого проекта с определенными библиотеками. Другими словами, это просто настройка окружения для начала разработки без, непосредственно, кода.

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

В результате может возникнуть впечатление, что Vue — довольно низкоуровневый фреймворк, и чтобы создавать вебприложения быстро, эффективно и удобно, необходимо взять какую-либо надстройку или иное решение — Nuxt, Vue Storefront, Astro, VitePress — которые прямо позиционируют себя как средство для решения определенных (или широкого круга) бизнес задач.

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

Понятно, что определение той или иной «лучшей практики» (fetch или axios?) может быть довольно спорным моментом и зависит от контекста, но тем не менее.

Цели​

1. Создание конструктора каркаса простого сразу работающего SPA приложения под конкретную задачу за пару минут, с возможностью его дальнейшей стилизации и наполнения контентом.

2. Тонкая кастомизация его с помощью небольших функциональных блоков кода.

3. Сбор и обобщение лучших техник и практик при создании современного реактивного фронтенда.

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

5. Дать возможность опытным разработчикам быстро и эффективно создавать каркас готового веб приложения и использовать переиспользуемые блоки кода (boilerplate), особенно такие, которые не могут быть распространяемы как NPM пакеты.

Данное приложение должно выполнять роль конструктора каркаса вебсайта, с возможностью выбора при создании:

• Глобального бизнес-шаблона сайта (портфолио, блог, онлайн-магазин и.т.д)

• Варианта общего лэйаута вебприложения

• Вариантов конкретных компонент (header, footer, navigation drawer и т.д.)

• Варианта общего стиля/дизайна

• Отдельного функционала, инжектируемого как функциональные фрагменты (API модуль, i18n, PWA, splash screen, auth модуль, themes и т.д.)

• Возможности подключения/интеграции при желании распространенных библиотек (в том числе UI)

• Возможности интеграции c определенными headless CRM и API сервисами

Отдельно планируется создание веб-витрины, на которой пользователь, динамично меняя параметры, сможет посмотреть и протестировать доступные макеты сайта, темы/стилизации, компоненты (header, footer и т.д.) и функционал развертываемого приложения, а также их комбинацию друг с другом.

Принципы

— Лёгкое эффективное веб-приложение с высоким современным UI/UX
— Vue 3, Composition API, script setup синтаксис

Полностью

Опции

Доступные на данный момент:

На данный момент доступно подключение и конфигурация следующих опций:

— Layout — макет приложения
— Header — верхняя часть в шаблоне приложения
— Footer — нижняя часть в шаблоне приложения
— Drawer — навигационное меню
— BaseIcon — компонент иконки с возможностью динамичного указания имени
— Github Pages deploy Workflow — GitHub Actions сценарий для билда и деплоя приложения на GitHub Pages
— PWA — добавление Service worker и Манифеста к приложению

В разработке:

— API модуль — абстрактный слой для связи с бэкенд API
— Splash screen — экран-заставка во время старта приложения для улучшения UX
— Глобальный прелоадер
— i18n — интернационализация приложения с помощью различных вариантов `i18n` библиотек.

В планах:

— Онлайн витрина для динамичного тестирования различных вариантов частей приложения и функционала
— Расширение числа вариантов layout, header, footer и других компонент
— JSON-RPC адаптер для API модуля
— Auth — каркас модуля для аутентификации на JWT токенах, включая различные варианты форм регистрации и логина
— Интеграция Auth с популярными сервис провайдерами (Firebase и др.)
— GitHub Actions для деплоя приложения на различные сервисы (Vercel, Heroku, Firesbase) и другие полезные CI/CD сценарии.
— Themes — темы приложения (включают в себя как разные цветовые палитры, так и возможности менять другие для глубокой кастомизации шаблона и вида компонентов CSS стили)
— Проверка при старте на свою новую версию и перезагрузка для избежания проблем с кэшем браузера

Подробная документация по проекту: https://vue-faq.org/ru/vue-webapp/

Если для вас данный проект выглядит интересно, поддержите его поставив GitHub звезду. Это даст стимул развивать его далее.

© Habrahabr.ru