Прототип лучше, на Vue.js

OverVue, инструмент для создания прототипов для Vue.js, был представлен в 2019 году. Это настольное приложение позволяет разработчикам моделировать свои приложения с помощью простого в использовании графического интерфейса пользователя и сохранять или экспортировать желаемый окончательный проект. Для тех, у кого уже есть опыт работы с OverVue v1, , а также для тех, кто плохо знаком с этим инструментом, я очень рад поделиться некоторыми новыми и улучшенными функциями предстоящей версии, которые делают прототипирование проекта таким большим. более удобный.

Загрузка изображений

Теперь, когда приложение доступно как для Mac, так и для Windows, легко скачать приложение и начать проект. После открытия у вас есть возможность загрузить изображение-макет для вашего текущего маршрута, HomeView. В этом проекте, поскольку я планирую использовать Vue Router, я создал второй маршрут и добавил к ним изображения макетов. Это новая функция, с помощью которой вы можете добавить уникальный макет к каждому создаваемому маршруту.

Настроить компоненты

Создавать и настраивать компоненты Vue очень просто. Каждому компоненту может быть назначен родительский или дочерний компонент. Это можно сделать при создании компонентов слева или позже, щелкнув компонент правой кнопкой мыши и выбрав «Обновить дочерние элементы». Вы можете перемещать и изменять размеры своих компонентов, чтобы они соответствовали вашему макету. Кроме того, теперь вы можете изменить z-index (щелкнув правой кнопкой мыши), чтобы при желании наслоить компонент.

Вложить элементы HTML

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

  • Дважды щелкните родительский HTML-код и выберите HTML-элемент из отображаемых слева значков HTML.
  • Щелкните левый значок родительского HTML, чтобы глубже проникнуть в ваш HTML-элемент, и выберите HTML-элемент из значков HTML, отображаемых слева.

Отменить / повторить свои действия

Если вы допустили ошибку или хотите вернуться к предыдущему шагу, вы можете сделать это относительно легко с помощью кнопки отмены / повтора в правом верхнем углу или простым нажатием на клавиатуру (ctr-z / ctr-y ).

Сохранить и экспортировать

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

Будущие итерации

Некоторые функции, которые нам очень нравятся, но еще не реализованы:

  • Прототипирование состояния Vuex и экспорт шаблонов.
  • Возможность экспорта файлов в TypeScript.
  • Вложение компонентов в элементы HTML.
  • Интеграция с Storybook.

Спасибо за прочтение! Как приложение с открытым исходным кодом, мы будем рады, если вы протестируете это приложение и сообщите о любых проблемах или предложениях, которые могут у вас возникнуть. Дайте нам знать, что вы думаете ниже, или перейдите на GitHub для получения дополнительной информации. Если вы хотите прочитать первую статью OverVue на Medium, перейдите к этой статье.

Огромный привет команде разработчиков: Дину Охаши, Дрю Нгуену, Джозефу Эйзеле, Александру Хавасу, Керианн Лин, Эллисон Пратт и Джоджу Олаоде.