Прототип лучше, на 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, перейдите к этой статье.
Огромный привет команде разработчиков: Дину Охаши, Дрю Нгуену, Джозефу Эйзеле, Александру Хавасу, Керианн Лин, Эллисон Пратт и Джоджу Олаоде.