Генератор компонентов 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

Читайте так же:

  • Сайты с жестоким контентомСайты с жестоким контентом Сеть Информирования Средств Массовой Информации Учителя и родители должны быть осведомлены о жестоком и ненавистном содержании. Которое легко доступно в Интернете детям и молодежи. Насильственное содержание Более трети (35%) мальчиков в 7-11 классах специально посещали места насилия […]
  • Минздрав предложил ввозить в РФ незарегистрированные вакциныМинздрав предложил ввозить в РФ незарегистрированные вакцины Минздрав предлагает разрешить ввоз вакцин и препаратов, которые пока не зарегистрированы в России. Таким образом, россияне смогут привиться зарубежными вакцинами от коронавируса. Пакет предложений Минздрава предусматривает такую возможность для клиник, работающих в медицинском […]
  • Микросхем точно хватит только Apple и автопроизводителям — TSMC расставила приоритетыМикросхем точно хватит только Apple и автопроизводителям — TSMC расставила приоритеты Крупнейший контрактный производитель в мире TSMC будет уделять приоритетное внимание Apple и производителям автомобилей в своем производственном графике на третий квартал. О чем сообщает тайваньское издание Digitimes. Поскольку глобальная нехватка кремниевых чипов продолжается. TSMC […]
  • Digital Material Passport. Ч.1 — Скрытые грани «цифровых двойников»Digital Material Passport. Ч.1 — Скрытые грани «цифровых двойников» Давайте представим, что у нас уже есть:суперкомпьютер для проведения многофакторных мультинагрузочных виртуальных испытаний;готовый цифровой объект (двойник), который мы готовили для замены физических испытаний виртуальными;проверенные и корректные математические расчетные модели для […]