Инструменты создания контента

• Vue 3 - Как способ описания шаблонов отображения, компонентов
• Quasar - Возможность воспользоваться готовыми компонентами вроде кнопок и форм
• Pug - Возможность интерпретирования HTML
• Saas - Возможность интерпретирования CSS
• Typescript - Опциональная типизация с средней проверкой типов
• TSX/JSX - Способ описания функциональных компонетов

Иструменты модели и логического состояния.

В основе лежит реактивная частица "алак-атом" передачи данных, аналог ref и reactive от vue, но более производительная и применимая к чистым функциям js/ts.

• алак-атом
• Вопросы в телеграм-канале : https://t.me/alakatoms

Так же используется коннектор к vue -avuef и композиция алак-атомов в контроллеры модели - lasens (пример декларации) (пример применения). Эти два решения временно не распологают документацией, но уже достаточно стабилизировались для применения. С любиыми вопросами можно писать в телегу

Инструменты сборки проекта

• Vite - Основной сборщик
• Voie Plugin - Маршрутизация на основе файловой системы
• Сomponents Plugin - Автоматический импорт компонентов в vue-темплейтах

Иконки

Автоматический импорт иконок из клипарта Iconify

• клипарт
• vite-plugin-icons

Находим иконку в клипарте вроде collection:icon, и добавлем в шаблон по соглашению {prefix}-{collection}-{icon}, примеры:

• <icon-mdi-account />
• <i-mdi-account />
• <mdi-account />

Рекомендации к IDE

WebStorm

последний из коробки.

• Темплейт для модели

VSCode

требуется настраивать со всеми плагинами для vue и прочими.

вроде Vetur.

Make sure to enable vetur.experimental.templateInterpolationService in settings!

If Using <script setup>

<script setup> is a feature that is currently in RFC stage. To get proper IDE support for the syntax, use Volar instead of Vetur (and disable Vetur).

NoteBene

Возможно расширение

• imp - A vite plugin for import library component style automatic.
• svg - Used to generate svg sprite map.