В этой статье предполагается, что читатель уже знаком с фреймворком Vue.js и инструментами командной строки Vue (vue-cli). Официальные документы по этим темам: (https://vuejs.org/v2/guide/) и (https://github.com/vuejs/vue-cli).

Вчера (на момент написания) замечательная команда Vue-core выпустила версию beta-15 официальных инструментов командной строки Vue. Одна особенность, в частности, выделяется среди обычных исправлений ошибок и улучшений производительности, это новый веб-интерфейс пользователя для интерфейса командной строки Vue. Этот замечательный инструмент позволяет разработчикам Vue графически создавать новый проект Vue, отслеживать производительность приложения в реальном времени, добавлять плагины в существующий проект и многое другое. Это довольно сложная задача, поскольку знакомство с этим инструментом может упростить развертывание и поддержку любого типа приложения Vue.js. Давайте углубимся в некоторые особенности. Полный журнал изменений для этого выпуска можно найти на vue-cli github.

Создание нового проекта

Давайте пройдемся по этапам создания нового проекта vue с нуля.

  1. Откройте новое окно терминала / командной строки.
  2. Установите и / или обновите инструменты vue-cli до beta-15 с npm i -g @vue/cli
  3. После обновления запустите vue ui. Вы должны увидеть сообщение о том, что графический интерфейс начинается с адреса типа http://localhost:8000. Если окно браузера не открывается автоматически, вы можете вручную перейти по этому адресу.
  4. Должно открыться новое окно браузера, которое выглядит следующим образом:

5. Перейдите в папку, в которой вы хотите создать проект, и нажмите зеленую кнопку «Создать здесь новый проект», чтобы начать процесс.

6. Выберите ручную предустановку, которая затем перенесет вас на страницу функций, где вы можете индивидуально включить такие функции, как поддержка Typescript, маршрутизация, поддержка тестирования, препроцессоры CSS и Vuex.

7. Наконец, выберите любые параметры конфигурации, затем начните установку, нажав «Создать проект». Вы должны начать видеть команды vue cli, выполняемые сейчас в терминале, из которого вы запустили vue ui.

8. После завершения у вас теперь есть блестящий новый проект Vue.js с теми функциями, которые вам нужны!

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

Плагины проекта

Первый раздел, плагины проекта, позволяет вам добавлять основные функции в ваше приложение после того, как оно уже было создано. Для многих популярных инструментов и фреймворков доступны сотни общедоступных плагинов. Хотите добавить GraphQL в свое приложение, не прибегая к чрезмерной настройке? Установите плагин Apollo, чтобы получить стандартную настройку для вас.

Эта архитектура плагинов присутствует в cli с момента альфа-версии v3, но новый пользовательский интерфейс делает поиск и установку этих плагинов безболезненными. Создание нового пустого проекта только для того, чтобы опробовать некоторые новые причудливые инструменты или фреймворки, обычно требует довольно много времени, чтобы выяснить, как совместить все инструменты вместе, и это просто устраняет многие из этих болевых точек.

Конфигурация проекта

Всем, кому приходилось вручную возиться с несколькими файлами конфигурации для таких инструментов, как webpack, gulp, eslint, babel или typescript, понравится новый пользовательский интерфейс конфигурации проекта. В этом разделе представлен чистый интерфейс, позволяющий настраивать конфигурацию линтера / транспилятора без глубокого погружения во вложенные объекты JSON файлов конфигурации.

Задачи проекта

Возможно, я оставил лучшее напоследок, так как это моя любимая часть пользовательского интерфейса. Раздел задач проекта позволяет запускать сценарии npm из графического интерфейса пользователя, предоставляя вам подробную статистику о вашем приложении. Предоставленные данные позволяют легко увидеть, как ваше приложение будет загружаться на различных скоростях соединения / устройствах, и позволяют разработчикам быстро определять, какие зависимости могут быть ресурсоемкими.

У большинства функций также есть параметры для дальнейшей настройки функциональности, например, значок шестеренки рядом с «Запуск / остановка задачи» для vue-cli-service serve отобразит параметры, позволяющие изменить NODE_ENV с разработчика на продукт, указать, должны ли ресурсы обслуживаться через https, и разрешить URL-адрес / порт localhost необходимо установить вручную.

Заключение

Команда Vue предоставила нам поистине потрясающий инструмент, и я настоятельно рекомендую всем разработчикам Vue поиграть с ним в своих побочных проектах или в личных целях. Поскольку vue-cli v3 все еще находится в стадии бета-тестирования, все еще могут быть некоторые ошибки, поэтому использовать его в производственных приложениях может быть небезопасно. Я столкнулся с одной проблемой при изучении этого, но это не было связано с пользовательским интерфейсом, это была проблема npm, которую я смог решить с помощью изменения конфигурации.

В целом этот новый пользовательский интерфейс vue-cli предлагает красивый, современный интерфейс для некоторых из более приземленных задач, которые приходится решать веб-разработчикам.

📝 Прочтите этот рассказ позже в Журнале.

🗞 Просыпайтесь каждое воскресное утро и слышите самые интересные истории, мнения и новости недели, ожидающие в вашем почтовом ящике: Получите примечательный информационный бюллетень›