Разработка прототипов для Vue-разработчиков с помощью OverVue

OverVue — это инструмент для прототипирования, который позволяет разработчикам динамически создавать и визуализировать приложение на Vue. Он обеспечивает интуитивно понятное отображение иерархии компонентов в реальном времени и предварительный просмотр кода в реальном времени. Простой в использовании графический интерфейс пользователя (GUI) позволяет добавлять атрибуты HTML и свойства CSS, помогая разработчику представить свой следующий проект. Полученный шаблонный код можно экспортировать в качестве шаблона для дальнейшей разработки в выбранной интегрированной среде разработки (IDE).

Этот инструмент помогает генерировать компоненты Vue, настраивать маршруты и отображать дерево родительских и дочерних компонентов. После небольшой настройки вы можете скачать шаблонный код, что значительно упрощает создание приложения Vue для внешнего интерфейса!

Содержание

• Установка
• Использование OverVue
• Изменения (последние)
• Как внести свой вклад
• Авторы

Установка

Чтобы загрузить рабочую версию, посетите сайт https://www.overvue.org.

Установка для разработчиков

В терминале:

1. Установите зависимости: npm install.
2. Создайте новый файл .zip/.deb: npm run build. (Примечание: сборка может занять некоторое время, но после завершения должна отобразиться надпись «сборка завершена», и файл будет готов к запуску.)
3. Запустите приложение electron в режиме разработчика: npm run dev.

Обновлённое руководство по установке и настройке WSL

Этот раздел был обновлён, чтобы отразить последние достижения в Windows Subsystem for Linux (WSL), особенно в области интеграции графических приложений Linux непосредственно в WSL без необходимости использования сторонних инструментов X-сервера, таких как X410 или VcXsrv.

Запуск графических приложений Linux в WSL

С запуском WSLg (Windows Subsystem for Linux GUI) процесс запуска графических приложений Linux на Windows был значительно упрощён. WSLg интегрируется напрямую с WSL 2, предлагая встроенную поддержку графических приложений Linux без необходимости дополнительной настройки сервера отображения.

Предварительные требования:

• Windows 10 версии 19044+ или Windows 11.
• Установлен WSL 2 и установлен по умолчанию. Используйте wsl --install для новых установок или wsl --update, а затем wsl --shutdown для обновления и перезапуска WSL.

Настройка графических приложений Linux

WSLg автоматически настраивает необходимую среду, избавляя от необходимости вручную устанавливать переменные отображения для графических приложений. Графические приложения Linux теперь можно запускать прямо из меню «Пуск» или через командную строку без дополнительной настройки.

Устаревшие примечания по настройке (не рекомендуется)

Предыдущие инструкции по настройке X410 или VcXsrv для... Изменения в версии

• Улучшена совместимость между мультиплатформенными операционными системами и восстановлено исправление для пользователей Windows.

• Переключение с Vue 2 Options API на Vue 3 Compositions API в разделе «Предварительный просмотр кода».

• Рефакторинг кодовой базы, очистка неиспользуемого старого кода и файлов для оптимизации сборки Electron.

• Оптимизация отображаемых изображений для уменьшения занимаемой площади и увеличения скорости работы на старых системах.

• Функция Slack и Github OAuth скрыта, так как в настоящее время она не работает и не используется.

• Веб-сайт обновлён последними выпусками OverVue 11.0 для использования сообществом.

Исправления ошибок

• Исправлены функции импорта и экспорта.

• Удалены неиспользуемые и устаревшие зависимости, которые могли привести к новым ошибкам (если новые ошибки будут обнаружены, пожалуйста, укажите это на вкладке «Проблемы»).

• Удалены неиспользуемые файлы и код для ускорения времени сборки.

• Основное обновление зависимостей значительно ускорило скорость работы приложения.

OverVue 10.0

• Полностью переработан основной вид, чтобы он стал интерактивным и интуитивно понятным древовидным представлением.

• Обновлён список HTML-элементов, добавлены вложенные элементы.

• Создан модальный компонент с фокусом.

• Интегрирована библиотека компонентов Vuetensils, дружественная к a11y.

• Добавлены модульные тесты для основной функции древовидного представления.

• Проведён рефакторинг кодовой базы: удалены ненужные комментарии, неиспользуемые файлы, журналы консоли.

• Очищен пользовательский интерфейс боковых панелей.

• Добавлен предыдущий основной вид сетки для переключения (в настройках в правом верхнем углу).

Исправление ошибок

• Исправлено, что HTML-элементы не отображаются в реальном времени.

• Функциональность удаления HTML-элемента была непоследовательной.

• В Code Preview был неожиданный код (например, v-model=undefined).

• Различные ошибки, связанные с пустыми списками HTML или маршрутами без дочерних элементов.

• Импортные операторы и вложения в Code Preview и экспортированный код были исправлены.

• Весь набор тестов был исправлен.

OverVue 9.0

• Кодовая база (более 40 компонентов) преобразована из Options API в Composition API.

• Магазин перенесён из Vuex в Pinia.

• Код перенесён на TypeScript.

• Реализовано тестирование магазина Pinia.

• Зависимость от сборщика Electron обновлена.

• UI переработан.

Исправление ошибок

• Исправлена функциональность вложения HTML-элементов.

• Добавление innerText было исправлено.

• Форматирование экспортируемого кода было исправлено.

• Отношения родитель-потомок в компоненте были исправлены в фрагменте кода и при экспорте.

• Типирование и начальные значения хранилища были исправлены, чтобы соответствовать использованию действий.

• Избыточность кода была устранена путём внедрения Composition API и Pinia.

Changelogs 8.0 и старше

OverVue 8.0

• Добавлена функция привязки компонента к сетке с дополнительным раскрывающимся меню плотности сетки.

• Фрагмент кода отражает стиль области CSS-сетки компонентов.

• Возможность импортировать компоненты из библиотеки Element Plus.

• Экспортированный шаблон проекта теперь более точно отражает размещение компонентов в приложении.

• Улучшено перетаскивание холста и отмена выбора.

• Инструкции по установке разработчика WSL улучшены.

• TypeScript добавлен в приложение.

• Внедрена функция панели поиска компонентов.

• Возможность добавления Google и Github OAuth в экспортируемый проект.

• Модульное тестирование и тестирование компонентов добавлены в шаблон экспортируемого проекта.

• Пользовательский интерфейс переработан. OverVue 7.0

• Настройка цвета компонентов по своему усмотрению.

• Фрагмент кода отражает CSS-стили компонентов.

• Добавлено больше семантических HTML-тегов.

• Возможность добавлять атрибуты class, ID и v-model.

• Добавлена функция перетаскивания при добавлении или изменении HTML-тегов.

• Возможность добавления дочерних компонентов в фрагмент кода родительских компонентов.

• Добавление тегов стиля с ограниченной областью действия — при создании класса создаётся запись стиля с позиционированием компонента/элемента HTML.

• Объединение состояний/действий/свойств в одну вкладку.

• Переработка пользовательского интерфейса.

Исправления ошибок:

• Исправлены возможности отмены и повтора действий.
• Исправлено некорректное отображение номера значка для вложенных HTML-тегов.

OverVue 6.0

• Включение режима TypeScript для генерации фрагментов кода и экспорта проекта или отдельных компонентов на TypeScript.
• Интерактивное дерево компонентов в реальном времени позволяет легко визуализировать отношения родитель-потомок и структуру Vue Router.
• Улучшение рабочего процесса за счёт добавления заметок к компонентам. При экспорте проекта или компонентов в любимую среду IDE заметки преобразуются в комментарии в файлах Vue.
• Теперь с туториалом «Начало работы», визуальной очередью элементов HTML и общим упрощённым пользовательским интерфейсом OverVue стал интуитивно понятным как никогда.
• OverVue теперь контейнеризован с помощью Docker, чтобы предоставить разработчикам одинаковый опыт независимо от операционной системы.

Исправления ошибок:

• Исчезающий ящик при уменьшении размера окна.
• Невозможность удалить связь родитель-потомок.
• Невозможно добавить несколько дочерних элементов родителю, кроме случаев создания нового компонента.
• CodeSnippet не прокручивается при переполнении контейнера.
• Нажатие на холст не полностью деактивирует активный компонент.
• Обработка ошибок при «вставке» компонента, когда компонент не скопирован.
• Танцующие компоненты.
• Визуализация дерева проекта.

OverVue 5.0

• Обновлён исходный код до Vue 3.
• Основные зависимости обновлены до последних версий:
  • Vuex 3 обновлён до Vuex 4.
  • Electron 5 обновлён до 16.
  • Quasar 1 обновлён до 2.
• Экспорт переписан для Vue 3.
• Конфигурация Vue Devtools для запуска и подключения при запуске quasar в режиме разработки.
• Обратите внимание, что из-за критических изменений при обновлении до Vue 3 vued3tree пришлось заменить на vue3-tree. Из-за этого в настоящее время отображается маркированный список вместо дерева. Это временное изменение, и старый пакет будет использоваться снова, как только он станет совместимым.

OverVue 4.0

• Интеграция Slack через кнопку входа в Slack для привязки канала пользователя к его экземпляру OverVue.
• После входа в систему пользователи могут отправлять сообщения в выбранный канал Slack после сохранения.
• Реализована возможность удаления состояния и действий из магазина.
• Добавлена возможность быстрого копирования/вставки компонентов с помощью горячих клавиш.
• Интерфейс переработан, чтобы обеспечить пользователям более интуитивный опыт:
  • Нижняя панель инструментов перемещена вправо.
  • Функции слева предназначены для создания/редактирования компонентов.
  • Функции справа предназначены для просмотра общей иерархии прототипа приложения.
  • Меню редактора компонентов теперь переключается между режимами создания/редактирования в зависимости от того, выбран ли компонент.
  • Магазин Vuex и действия теперь перемещены в левое меню с возможностью просмотра/создания/удаления состояния и действий.
• Внедрены Vue Devtools для облегчения разработки. | OverVue | LinkedIn | GitHub | | --- | --- | --- | | Дэвид Ли | LinkedIn | @GomDave | | Триша Дуонг | LinkedIn | @trishanduong | | Хайме де Венеция | LinkedIn | @jdvplus | | Яника Абагат | LinkedIn | @janicaa1 |