Первый взгляд на Vue UI
Я только что провел лучшую половину дня, играя с Vue UI, и должен сказать, что это чертовски круто. Я работал с Vue над моими последними несколькими проектами, и, хотя он все еще является довольно новым для моего потока проектов, я старался оставаться в курсе всех новых разработок во Vue, и Vue UI привлек мое внимание.
Вкратце, Vue UI - это команда, которую вы можете запустить в Vue CLI, которая установит и запустит браузер с довольно крутым пользовательским интерфейсом. Отсюда вы можете создавать проекты и управлять ими через этот пользовательский интерфейс. Вы можете устанавливать, добавлять, удалять, настраивать плагины и зависимости, запускать задачи и получать подробную статистику, которая на самом деле недоступна, если вы просто используете консоль.
Создайте проект
Чтобы приступить к работе с Vue UI, убедитесь, что у вас установлена последняя версия Vue CLI. Если это не так, установите ее с помощью приведенной ниже команды, а затем запустите vue ui. Легкий
npm i -g @vue/cli vue ui
При первом открытии вам будет представлен менеджер проекта Vue. Если вы уже создали проект, в следующий раз, когда вы откроете Vue UI, он откроет этот проект по умолчанию для легкого доступа. На этом начальном экране мы можем создать новый проект вместо стандартной команды Vue create. Он будет делать то же самое, но дает лучший пользовательский опыт. Дайте своему проекту имя, выберите диспетчер пакетов (я использую npm) и нажмите "Далее".
Вы сможете использовать предустановки или копаться в руководстве, чтобы выбрать каждый плагин, который вам может понадобиться. Не беспокойтесь, если вы забыли некоторые плагины, так как это то, для чего предназначен Vue UI, легко настраиваемые и управляемые проекты!
Управление вашим проектом
Теперь, когда ваш проект создан, вам будет представлен удобный пользовательский интерфейс. Боковая панель для плагинов, зависимостей, конфигураций, задач и несколько предложений на верхней панели (например, добавить Vuex, добавить Vue-router, если вы еще не добавили их) в качестве кнопок для установки в один клик.
Если вы хотите добавить что-то в свои плагины, просто выбрав «Добавить плагин», вы увидите большой список плагинов с описаниями и ссылками на дополнительную информацию для более широкого описания того, что это за плагин и как его использовать. После установки вы сможете увидеть измененные файлы и сразу же зафиксировать их или пропустить и зафиксировать позже.
Если бы мне пришлось добавить такой плагин, как GraphQL, он предоставил бы мне ряд параметров конфигурации, включая добавление фиктивных компонентов, если я не знаком с GraphQL, что является приятной мелочью.
Выполнение задач
Если вы нажмете на раздел задач на боковой панели, вы сможете запускать фактические задачи, которые вы будете запускать через командную строку. Такие вещи, как команда serve или build, не только позволят вам получить доступ к этой команде, но и предоставят вам статистику, включая статус, любые ошибки, предупреждения, размер ресурсов и модулей. Чуть ниже вы можете увидеть исчерпание статистики скорости, поэтому для тестирования PWA или приложений, которые вы создаете во Vue, вы можете мгновенно проверить, сколько времени потребуется для загрузки на основе их сети одновременно.
Чуть ниже находится краткое изложение ресурсов, которое может показать, где ваше приложение может замедлить вас с большими размерами файлов или если вы просто ищете области, которые нужно улучшить.
Существует также вкладка анализатора, которая дает графическое представление вашей статистики, которое выглядит очень привлекательно, но я еще не видел в нем столько значения, сколько на панели инструментов.
Мне действительно нужно использовать Vue UI?
Нет, не совсем, но, как и большинство вещей с UI и UX-дизайном, важны мелочи. Сделать жизнь разработчиков немного проще с помощью чистых, простых в навигации интерфейсов - это большой шаг вперед в моих глазах. Хотя большую часть этого можно сделать внутри терминала или путем тестирования, это отличное дополнение к рабочему процессу, позволяющее визуально увидеть все это и уметь управлять им.
Как фронтенд-разработчик, я всегда рад видеть любовь и заботу, вложенные в продукты, будь то внимание к деталям в дизайне или тонкая анимация, которая делает все гладким, и я определенно чувствую, что Vue UI сделал это. Я рад, что буду продолжать использовать это и посмотреть, как он будет развиваться по мере того, как все больше разработчиков используют больше плагинов и расширяют Vue.
