Введение #

Vue CLI — полноценная система для быстрой разработки на Vue.js, предоставляющая:

• Интерактивное создание проекта через @vue/cli.
• Быстрое прототипирование через @vue/cli + @vue/cli-service-global без конфигурации.
• Runtime-зависимость (@vue/cli-service) предоставляющая:
  • Возможность обновления;
  • Создана поверх webpack, с оптимальными настройками по умолчанию;
  • Настройка с помощью конфигурационного файла в проекте;
  • Расширяемость плагинами
• Большая коллекция официальных плагинов, интегрирующих лучшие инструменты экосистемы фронтенда.
• Полноценный графический пользовательский интерфейс для создания и управления проектами Vue.js.

Vue CLI стремится стать стандартным инструментарием для экосистемы Vue. Он обеспечивает бесперебойную работу различных инструментов сборки, устанавливает разумные значения по умолчанию, поэтому вы сможете сосредоточиться на разработке приложения, а не проводить дни за его настройкой. В то же время, остаётся гибкость настройки конфигурации каждого инструмента без необходимости извлечения конфигурации в отдельный файл.

Компоненты системы #

Vue CLI состоит из нескольких составных частей — если вы посмотрите на исходный код, то обнаружите, что это монорепозиторий, в котором несколько отдельно опубликованных пакетов.

CLI #

CLI (@vue/cli) — это npm-пакет, устанавливаемый глобально и предоставляющий команду vue в терминале. Он позволяет быстро создать новый проект командой vue create, или мгновенно прототипировать ваши новые идеи через vue serve. Также можно управлять проектами в графическом интерфейсе через vue ui. Мы рассмотрим, что он может делать, в следующих разделах руководства.

Сервис CLI #

Сервис CLI (@vue/cli-service) — это зависимость для разработки. Это npm-пакет, устанавливаемый локально в каждый проект, создаваемый с помощью @vue/cli.

Сервис CLI построен на основе webpack и webpack-dev-server. Он содержит:

• Ядро сервиса, которое загружает другие плагины для CLI;
• Внутреннюю конфигурацию webpack, оптимизированную для большинства приложений;
• Бинарный файл vue-cli-service внутри проекта, который позволяет использовать команды serve, build и inspect.

Если вы знакомы с create-react-app, то @vue/cli-service похож на react-scripts, хотя набор возможностей и отличается.

В разделе Сервис CLI всё это разбирается подробнее.

Плагины для CLI #

Плагины для CLI — это npm-пакеты, которые предоставляют дополнительные возможности для ваших проектов, создаваемых через Vue CLI, такие как транспиляция Babel / TypeScript, интеграция ESLint, модульное тестирование, и E2E-тестирование. Легко определять плагины для Vue CLI, поскольку их имена начинаются с @vue/cli-plugin- (для встроенных плагинов) или vue-cli-plugin- (для плагинов сообщества).

Когда вы запускаете бинарный файл vue-cli-service внутри проекта, он автоматически определяет и загружает все плагины CLI, указанные в файле package.json проекта.

Плагины могут добавляться как часть проекта на этапе его создания или их можно добавить в проект позднее. Они могут быть также сгруппированы в переиспользуемые пресеты настроек. Мы обсудим их подробнее в разделе плагины и пресеты.