По состоянию на июль 2019 года Vue находится на вершине всех JavaScript-фреймворков в рейтинге звезд GitHub и занимает 3-е место в целом, превосходя React более чем на десять тысяч звезд, оставляя Angular далеко позади.
Как самый молодой из трех больших интерфейсных JavaScript-фреймворков, он стал очень популярным и быстро завоевал популярность в сообществе разработчиков.
И это несмотря на то, что Angular и React поддерживаются Google и Facebook.
Как самый молодой фреймворк из трех, экосистема для разработчиков Vue отстает от своих конкурентов. OverVue создан для того, чтобы помочь разработчикам быстро приступить к созданию своих веб-приложений.
По своей сути OverVue - это настольное приложение, построенное с использованием Vue и Electron, которое позволяет пользователю создавать компоненты Vue, устанавливать иерархию родитель-потомок и настраивать маршруты с помощью Vue Router, и все это в красивом пользовательском интерфейсе.
После этого пользователь может сгенерировать файл и экспортировать шаблонный код в проект. Вот еще несколько его горячих функций!
Загрузить изображение
Эта первая часть необязательна, но очень полезна, если у вас есть хорошо продуманный дизайн, который вы готовы превратить в код.
Откройте боковую панель слева и нажмите «Загрузить изображение», чтобы выбрать изображение макета из файловой системы. Нажатие стрелки рядом с «Dashboard» будет переключать между отображением и сворачиванием вашей панели.
Создать компонент
Создать компонент в OverVue очень просто. Дайте вашему компоненту имя, выберите любые HTML-элементы для размещения в шаблоне Vue и выберите родительский элемент из раскрывающегося меню на боковой панели, если применимо.
Создав компонент, вы можете перетащить его и изменить размер, чтобы он соответствовал макету изображения.
Если вы забыли указать иерархию родитель-потомок в раскрывающемся меню, вы можете просто щелкнуть правой кнопкой мыши свой компонент, чтобы настроить иерархию.
Компонент OverVue
Переключайтесь между активными компонентами с помощью щелчка левой кнопкой мыши. Настройте желаемые элементы HTML в меню компонентов слева и отслеживайте их на панели инструментов.
Визуализируйте свою родительско-дочернюю иерархию с помощью красивой перерисовки дерева в Team OverVue.
Фрагменты кода
Щелкните вкладку «фрагмент кода» на панели управления, чтобы увидеть свой код. Не стесняйтесь копировать код в буфер обмена и вставлять его прямо в свой проект.
Поддержка роутера
Введите имя маршрута в раскрывающемся списке «Маршруты» и нажмите «Ввод», чтобы добавить маршруты в приложение.
При переключении между маршрутами будут отображаться только те компоненты, которые существуют в активном пути на холсте. По сути, это то, что Vue Router делает на практике в вашем приложении.
Любые изменения в структуре вашего маршрута будут плавно обновлять отображение дерева.
Сохранить / Экспорт
Когда вы закончите, вы можете сохранить свой проект и открыть его позже, или вы можете экспортировать новый шаблонный код в свою рабочую область.
Создается package.json, и вы можете npm/yarn установить свои зависимости.
Движение вперед
Есть несколько функций, которые мы еще не доработали. Поскольку это инструмент с открытым исходным кодом, помощь приветствуется.
Вот некоторые функции, которые мы еще не реализовали:
- Управление состоянием Vuex.
- Интеграция TypeScript.
- Возможность вкладывать элементы HTML.
- Возможность перетаскивать только определенного родителя вместе с его дочерними элементами с помощью Vue draggable resizable.
- Версия CLI и пакет npm.
- Возможность загрузки нескольких изображений для каждого маршрута.
Любые предложения приветствуются!
Команда OverVue с гордостью запускает бета-версию нашего продукта. Мы приветствуем первых пользователей и тестеров нашего приложения.
Мы рады помочь разработчикам ускорить первоначальную настройку архитектуры приложений и ускорить разработку с помощью этой красивой абстракции.
Вы можете найти OverVue’s GitHub здесь.
Огромное спасибо за всю тяжелую работу моим коллегам-программистам: Дину Охаши, Дрю Нгуену и Джозефу Эйселе.
