Skip to content

Vue 3 webapp билдер

Краткое описание

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

sh
$ 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
...
$ 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
...

Обоснование

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

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

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

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

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