Генератор компонентов Vue.js?

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

Часть этой рутины, однако, можно всегда оптимизировать.

В этой статье хочу познакомить вас с инструментом, который разработал, для минимизации рутины при создания компонентов Vue.js – VGENT.

VGENT (Vue Agent) – это CLI (Command Line Interface) приложение, которая генерирует компоненты для фреймворка Vue.js или Nuxt.js. Данный инструмент можно гибко настроить под нужды проекта, и генерировать компоненты командами в терминале.

Установка

Установить VGENT можно при помощи npm или yarn, глобально:

npm install --global vgent

# or

yarn global add vgent

Или локально в определенный проект:

npm install --save-dev vgent

# or

yarn add --dev vgent

Однако, при локальном использований в проекте надо запускать команды при помощи yarn или npx:

npx vgent init

# or

yarn vgent init

Итак, как им пользоваться?

Для использования VGENT в проекте, надо инициализировать его и настроить под проект:

vgent init

После запуска данной команды, приложение будет задавать вопросы по поводу где сохранять компоненты и прочее, и в конце в корне проекта создать конфигурационный файл .vgentrc с содержанием:

{
  "src": "/",
  "dir": {
    "components": "/components",
    "pages": "/pages"
  },
  "components": {
    "atomicDesign": true,
    "styleLang": "scss",
    "scriptLang": "ts",
    "componentApi": "optionsApi",
    "useIndex": true
  },
  "pages": {
    "useIndex": true
  }
}

Где:

• src – это рабочая директория проекта

• dir – это объект с путями до директории компонентов и страниц начиная с рабочей директории

  • components – это директория, где находятся компоненты

  • pages – это директория, где находятся страницы, у кого-то это может быть pages, а у кого-то views

• components – тут идут настройки генерации компонента

  • atomicDesign – это конфигурация, которая включает сохранения компонентов по структуре Атомарного дизайна: components/atoms, components/molecules, components/organisms, components/templates

  • styleLang – опция, которая позволяет выбрать CSS или пре-процессор: CSS, SCSS, SASS, LESS

  • scriptLang – опция, которая позволяет выбрать язык программирования компонентов: JS или TS

  • componentApi –опция, которая позволяет выбрать АПИ компонентов, это может быть Options API, или Composition API, или же при использований с TS Class-based компоненты

  • useIndex – эта опция позволяет сохранять компоненты с директорией: ComponentName/index.vue, если значение false, то просто будет сохранять файл с названием ComponentName.vue

Наконец генерируем компоненты

Раз у нас есть конфигурация и VGENT теперь знает как генерировать компоненты, то мы можем начать им пользоваться. И для генерации компонентов нам просто надо запустить в терминале команду:

vgent make -c <component_name>

А если мы используем структуру атомарного дизайна, то нам надо будет еще указать тип компонента:

# аргумента -a для генерации компонента атома
vgent make -c <component_name> -a

# аргумент -m для генерации компонента молекулы
vgent make -c <component_name> -m

# аргумент -o для генерации компонента организма
vgent make -c <component_name> -o

# аргумент -t для генерации компонента шаблона
vgent make -c <component_name> -t

А для генерации страниц, мы можем просто запустить команду:

vgent make -p <page_name>

Однако, у нас еще бывают динамичные страницы, и их тоже можно генерировать передав дополнительные аргументы:

# аргумент --slug для генерации страницы слага
vgent make -p <page_name> --slug

# аргумент --id для генерации страницы с id
vgent make -p <page_name> --id

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

В планах развивать дальше этот проект и добавить функционал для генерации других модулей в экосистеме Nuxt.js или Vue.js

Буду рад, если данный инструмент поможет вам минимизировать рутину и оптимизировать вашу разработку!

Также, буду рад обратной связи!

Ссылки: GitHub, npmjs