Vue CLI превратился в полноценную систему для быстрой разработки VueJS. Vue CLI 3.0 поставляется с исключительными инструментами, которые расширяют возможности разработчиков, обеспечивая быструю и интуитивно понятную структуру проектов, разумные значения по умолчанию для веб-пакетов, нулевую настройку, расширяемость и многое другое.

Но, вероятно, наиболее удобным из его предложений является возможность создавать проекты Vue и управлять ими через красивый графический пользовательский интерфейс на основе браузера, который называется Vue Project Manager. В этом сообщении блога вы узнаете, как использовать графический пользовательский интерфейс Vue CLI 3.0 для простого создания, импорта, управления и настройки проектов Vue.

Хотя Vue CLI 3 выпущен как стабильный, «пользовательский интерфейс все еще находится в стадии бета-тестирования. Ожидайте несколько причуд тут и там». (Эван Ю)

Посетите Блог Auth0 🔐 и найдите все, что вам нужно знать об инфраструктуре идентификации, управлении доступом, системе единого входа, аутентификации JWT и последних новостях в области безопасности. 👉 AUTH0 БЛОГ👈

Установка Vue CLI 3.0

Есть два способа запустить и использовать Vue CLI 3.0: через глобальную установку или через npx. Вы узнаете об обоих здесь.

Глобальная установка Vue CLI 3.0

Если вы ранее установили vue-cli, v1.x или v2.x, вам необходимо сначала удалить его, выполнив следующую команду:

npm uninstall vue-cli -g

Пакет Vue CLI был переименован с v3.x на @vue/cli. Эта версия требует установки Node.js v8.9+. Чтобы установить пакет глобально, после удаления любой предыдущей версии выполните следующую команду:

npm install -g @vue/cli

После завершения установки у вас будет доступ к двоичному файлу vue для взаимодействия с этим глобальным пакетом в любом месте вашей командной строки. Убедитесь, что установка прошла успешно, проверив версию CLI:

vue --version

Использование Vue CLI 3.0 до npx

Если у вас установлен NPM v5.2+, у вас есть доступ к npx. npx облегчает разработчикам использование инструментов CLI и других исполняемых файлов, размещенных в реестре NPM. Например, вы можете выполнить пакет CLI NPM, не устанавливая его глобально. Чтобы использовать Vue CLI 3.0 с npx, вы замените двоичный файл vue на npx @vue/cli. Например, чтобы проверить версию Vue CLI, которую будет использовать npx, вы можете ввести следующую команду:

npx @vue/cli --version

Обзор установки

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

«Вы можете запустить Vue CLI 3.0 через глобальную установку или через npx. Начать легко!»

ОТПРАВИТЬ ЭТО В Твиттер

Запуск менеджера проектов Vue

Чтобы запустить графический интерфейс Vue CLI 3.0, известный как Vue Project Manager, выполните одну из следующих команд в зависимости от ранее использованного пути установки:

Глобальная установка:

vue ui

npx

npx @vue/cli ui

После полного выполнения этой команды вы увидите следующее сообщение в командной строке:

🚀 Starting GUI... 🌠 Ready on http://localhost:8000

Идите вперед и откройте http://localhost:8000, чтобы насладиться славой Vue Project Manager. Красиво, не правда ли?

Чтобы настроить порт, на котором вы можете запустить vue-ui, вы можете передать команде аргумент -p, за которым следует номер порта, который вы хотите использовать. Например:

Глобальная установка:

vue ui -p 8080

npx

npx @vue/cli ui -p 8080

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

Для тех, кто предпочитает работать с темными темами, Vue Project Manager предлагает эту опцию. В нижней строке меню найдите черно-белый значок в виде капли. Нажмите на нее, чтобы переключить темный режим:

Я предпочитаю использовать темный режим в своих приложениях. Не стесняйтесь использовать цветовую схему по вашему выбору.

Посадочный вид для менеджера проектов Vue — http://localhost:8000/project/select. Это представление позволяет просматривать любой проект, который был создан или импортирован в Vue Project Manager, создавать новые проекты и импортировать проекты. Прямо сейчас инструмент показывает сообщение «Нет существующего проекта», потому что в нем еще нет зарегистрированного проекта. Далее вы узнаете, как создавать и импортировать проекты Vue в этот инструмент.

Прежде чем вы это сделаете, обратите внимание, как в нижней строке меню вы можете увидеть путь к файлу в каталоге, из которого вы запустили команду vue-ui. Я бы порекомендовал вам создать каталог в вашей системе для хранения всех ваших проектов Vue и всегда запускать vue-ui оттуда. В моем случае я решил использовать /Users/auth0/vue на своем Mac.

Создание новых проектов с помощью Vue Project Manager

Открыв главное представление Vue Project Manager, http://localhost:8000/project/select, щелкните вкладку Create:

С этого момента я буду называть Vue Project Manager VPM. В рамках функции «Создать» VPM предлагает вам интуитивно понятный и интерактивный инструмент для указания папки, в которой вы хотите создать проект. По умолчанию VPM использует каталог, из которого вы запускаете vue-ui.

Использование функции навигации по файлам

Крайняя левая кнопка функции навигации по папкам позволяет открыть родительскую папку текущего каталога:

Значок карандаша позволяет вручную изменить путь к файлу. Когда вы закончите редактирование, нажмите клавиши esc или enter, чтобы закрыть его:

Вы также можете перемещаться по файловой системе, используя вкладки каталога:

Вы можете добавить папку в «Избранное», а затем перейти непосредственно к ней, используя раскрывающийся список «Избранное»:

Наконец, у вас также есть возможность создать новую папку и показать скрытые папки из файловой системы:

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

Теперь, когда вы понимаете, как использовать функцию навигации по файлам VPM, пришло время создать новый проект. Нажмите на кнопку «+ Создать новый проект здесь». Это запустит процесс формирования проекта Vue в выбранном каталоге. Возможно, вы привыкли создавать проекты с помощью инструментов CLI, но на этот раз все это делается через пользовательский интерфейс. Вас ждет угощение!

Первым шагом в процессе создания лесов является указание «Детали» проекта:

Здесь вы можете:

  • Укажите имя проекта через имя папки проекта. Назовите его hello-vue.
  • Укажите диспетчер пакетов: По умолчанию, npm или yarn. Выберите npm.
  • Перезапишите целевую папку, если она уже существует.
  • Инициализируйте репозиторий git и укажите начальное сообщение фиксации.
  • Включите эту опцию и введите «Добро пожаловать в Vue». как сообщение фиксации.

После того, как вы закончите настройку деталей проекта, нажмите кнопку «Далее».

Следующим шагом будет установка пресетов проекта:

Согласно VPM пресет представляет собой объединение плагинов и конфигураций. После того, как вы выбрали функции, вы можете при желании сохранить их в качестве предустановки, чтобы вы могли повторно использовать их для будущих проектов без необходимости повторной настройки всего заново.

У вас есть три варианта создания пресетов:

  • Предустановка по умолчанию: babel, eslint.
  • Вручную: выбор функций вручную.
  • Удаленная предустановка: извлеките предустановку из репозитория git.

Выберите «Вручную» и нажмите «Далее». Теперь вы попадаете на вкладку «Функции», где вы можете указать, какие функции вы хотите включить для проекта:

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

А пока включите следующее:

  • Поддержка прогрессивного веб-приложения (PWA).
  • Маршрутизатор
  • Препроцессоры CSS.

Оставьте Vuex выключенным, поскольку позже вы собираетесь включить его по-другому. Нажмите "Далее".

Наконец, вам предоставляется вкладка «Конфигурация», где вы можете указать подробности о функциях, которые вы решили включить и которые требуют дополнительной настройки:

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

Поскольку вы включили препроцессоры CSS, вам предоставляется возможность выбрать препроцессор CSS: Sass/SCSS, Less и Stylus. Смело выбирайте любой из них.

Далее, поскольку это предустановленная вручную конфигурация, вам нужно указать, какой линтер вы хотите использовать для проекта. В раскрывающемся списке показаны различные варианты. Я предпочитаю «ESLint + Prettier». Выберите тот, который вам нравится больше всего.

Наконец, вы можете выбрать, хотите ли вы, чтобы процесс линтинга запускался при сохранении или при фиксации. Мне нравится анализировать мои проекты при сохранении, чтобы мои файлы выглядели чистыми и упорядоченными, пока я кодирую — это также помогает с читабельностью!

У вас все настроено. Идите вперед и нажмите кнопку «Создать проект», чтобы запустить процесс создания строительных лесов проекта. Однако не так быстро… VPM хочет знать, хотите ли вы сохранить свои текущие пользовательские подарки, чтобы повторно использовать их при создании будущего проекта. Не стесняйтесь сделать это или нажмите «Продолжить без сохранения»:

->

<-

Процесс сборки может занять от нескольких секунд до нескольких минут в зависимости от вашей системы. Пока VPM работает над этим, вы увидите экраны сборки:

Как только это будет завершено, вы попадете в представление «Плагины проектов» VPM:

Если ваш браузер поддерживает уведомления на рабочем столе и они включены, вы получите уведомление, когда процесс сборки будет завершен.

Управление проектами с помощью Vue Project Manager

На экране «Плагины проектов» перечислены все плагины, которые были установлены в приложении. Это также позволяет вам добавлять больше плагинов. Наиболее популярные плагины предлагаются для установки в верхней части экрана. Обратите внимание, что у вас есть кнопки «Добавить vuex» и «Установить devtools». Вот почему я попросил вас не включать Vuex в процессе создания проекта. Вы можете сделать это сейчас, используя эту удобную функцию: нажмите «Добавить vuex».

В диалоговом окне появляется описание того, что такое Vuex и что он делает, ссылка для получения дополнительной информации о Vuex и возможность отменить или продолжить установку. Идите головой и нажмите «Продолжить». VPM начнет установку Vuex:

После завершения установки Vuex вы снова вернетесь на экран «Плагины проекта». Однако обратите внимание, что подключаемый модуль Vuex не указан в списке. Но если вы нажмете кнопку «Зависимости» на левой боковой панели, вы увидите Vuex в списке «Основные зависимости»:

В разделе «Зависимости проекта» вы также можете увидеть список «Зависимости разработки». Кнопка «Установить зависимость» в правом верхнем углу позволяет установить любую новую зависимость без использования диспетчера пакетов в CLI. Для практики нажмите на нее и установите lodash:

Как видно из изображения, VPM предлагает визуальную установку зависимостей. lodash уже был в предложенном списке зависимостей для установки. Кроме того, вы также можете найти пакет, который хотите установить, а затем выбрать его из списка результатов. Например, чтобы установить axios, вы вводите «axios» в поле ввода «Найти плагин» и нажимаете на первый результат:

Вы можете выбрать, установить ли его в качестве основной зависимости или зависимости разработки, щелкнув вкладки заголовка «Основные зависимости» и «Зависимости разработки».

Настройка проектов с помощью Vue Project Manager

Следующим параметром на левой боковой панели VPM для изучения является вкладка «Конфигурация проекта», значок которой выглядит как шестеренка. На этом экране вы можете настроить параметры Vue CLI, конфигурации ESLint и конфигурации Progressive Web App (PWA).

  • Vue CLI: здесь вы можете настроить параметры, используемые Vue CLI, такие как базовый URL-адрес, выходной каталог, каталог ресурсов и параллельная компиляция. Вы также можете включить компилятор времени выполнения и исходные карты. Узнайте больше о каждом варианте, нажав на ссылку «Подробнее». В этой области вы также можете настроить параметры CSS, такие как включение модулей CSS и исходных карт CSS, а также извлечение CSS.
  • ESLint: здесь вы можете изменить настройки ESLint для проверки ошибок и качества кода. Вы можете отключить «Lint on save», а также выбрать его конфигурацию. Лучшая часть этой области — возможность визуально настраивать правила ESLint.
  • PWA: здесь вы можете настроить параметры того, как Vue CLI создает для вас PWA. Вы можете выбрать подключаемый модуль веб-пакета, имя приложения, цвет темы, фон заставки, цвет заголовка приложения Windows и стиль строки состояния Apple для мобильных устройств. Удобная функция здесь также позволяет открыть манифест PWA, как показано на верхней панели.

Любые изменения, внесенные на экране конфигурации проекта, требуют «Сохранить изменения», чтобы они вступили в силу. Если изменения были внесены вне VPM, вам нужно нажать кнопку «Обновить», чтобы обновить VPM с учетом этих изменений.

«Вы можете настроить правила ESLint графически с помощью Vue Project Manager, доступного через интерфейс командной строки Vue. Больше никаких правил поиска в файле!»

ОТПРАВИТЬ ЭТО В Твиттер

Запуск задач с Vue Project Manager

Последняя опция на левой боковой панели — это вкладка «Задачи». На этой вкладке вы можете визуально выполнять команды для обслуживания, сборки, проверки и проверки вашего приложения проекта. Вместо того, чтобы запускать такие команды в командной строке, вы можете щелкнуть здесь нужную команду и запустить ее.

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

->

<-

Затем вы увидите экран подачи и его многочисленные параметры. Чтобы запустить эту задачу, нажмите кнопку «Выполнить задачу». VPM покажет вам информацию о статусе задачи, размере файла ресурсов, модуля и зависимостей. Вы также получите количество ошибок или предупреждений.

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

Нажав кнопку «Открыть приложение», вы попадете в браузер, где вы увидите свое приложение в реальном времени и в рабочем состоянии. Здесь VPM превосходен тем, что обеспечивает современный подход к запуску приложений, не выходя из браузера.

Отображение проектов с помощью Vue Project Manager

Вы узнали, как создать проект с помощью VPM. Любой проект, который вы создаете с помощью VPM, автоматически добавляется в ваши проекты на главном экране VPM. Чтобы перейти на главный экран, нажмите значок «дом/дом» в левом нижнем углу. Перейдите на вкладку «Проекты», и вы увидите в списке проект hello-vue:

Каждый перечисленный проект предлагает вам возможность пометить его как избранный или удалить из проектов VPM. Однако наиболее полезной функцией является возможность открыть его в редакторе, нажав кнопку слева от кнопки «Удалить».

Импорт проектов в Vue Project Manager

Помимо создания проекта через VPM, вы также можете импортировать существующий. Перейдите к терминалу и убедитесь, что каталог Vue, который вы создали ранее, является текущим рабочим каталогом. Затем создайте новый проект с помощью Vue CLI:

Глобальная установка:

vue create hello-world

npx:

npx @vue/cli create hello-world

Выберите любую конфигурацию проекта, которую хотите использовать. Цель состоит в том, чтобы просто создать дополнительный проект. Как только CLI завершит создание проекта, вы увидите, что новая папка проекта hello-world указана в вашем текущем рабочем каталоге или файловой системе, но не на вкладке «Проекты» на главном экране VPM. VPM не отображает автоматически проекты, созданные за его пределами, и не управляет ими; такие проекты придется импортировать.

Таким образом, нажмите на вкладку «Импорт» на главном экране. Оказавшись там, используйте инструмент навигации, чтобы сделать каталог Vue текущим рабочим каталогом, нажимая кнопки навигации по папкам. Там вы увидите hello-world в списке вместе с hello-vue. Нажмите на каталог hello-world, а затем нажмите «Импортировать эту папку»:

Как только проект будет импортирован, вы попадете в представление «Плагины проекта». Вам будут доступны все остальные варианты управления проектом.

Особые соображения при импорте проектов

В проектах, которые не были созданы с помощью Vue CLI 3.0, могут отсутствовать подключаемые модули, необходимые для того, чтобы VPM предлагал полный набор параметров конфигурации проекта. Откройте package.json либо hello-vue, либо hello-world и обратите внимание на @vue/cli-, указанный под devDependencies:

{ // ... "devDependencies": { "@vue/cli-plugin-babel": "^3.0.5", "@vue/cli-plugin-eslint": "^3.0.5", "@vue/cli-plugin-pwa": "^3.0.5", "@vue/cli-service": "^3.0.5", "@vue/eslint-config-prettier": "^3.0.5", "node-sass": "^4.9.0", "sass-loader": "^7.0.1", "vue-template-compiler": "^2.5.17" } // ... }

Это плагины для Vue CLI, которые позволяют использовать дополнительные конфигурации в VPM. Удобный способ узнать, какие плагины CLI доступны, — это посетить сайт реестра NPM и выполнить поиск по запросу @vue/cli-plugin. Добавьте любой из соответствующих плагинов в свой проект, установив их как обычные пакеты.

Резюме

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

Хотя многие из нас привыкли создавать и запускать проекты из CLI, стоит попробовать использовать этот графический интерфейс пользователя! Я надеюсь, что вы любите его так же сильно, как и я.

Auth0: Никогда не идите на компромисс с идентификацией

Итак, вы хотите создать приложение? Вам нужно будет настроить аутентификацию пользователя. Реализация с нуля может быть сложной и трудоемкой, но с Auth0 это можно сделать за считанные минуты. Для получения дополнительной информации посетите https://auth0.com, подпишитесь на @auth0 в Twitter или посмотрите видео ниже:

Первоначально опубликовано на auth0.com.