Что такое vue cli
Что такое CLI? Это утилита командной строки предоставляет доступ к множеству инструментов для сборки проекта.
Установка и системные требования Vue CLI 3
Системные требования
Для работы с Vue CLI v3 потребуется Node.js 8.9+. Но рекомендуется использовать версию платформы v8.11.0+.
Ее можно установить:
Перед началом установки Vue CLI нужно удалить все предыдущие версии CLI. Для этого выполните следующую команду:
Установка CLI Vue 3
Чтобы установить Vue CLI v3, запустите следующую команду:
После установки CLI Vue 3 вы сможете вывести список всех доступных команд, выполнив команду vue:
А также проверить установленную версию, выполнив:
Создание проекта Vue
С помощью Vue CLI вы можете создать новое приложение, выполнив следующую команду:
example-vue-project – это название проекта. Вы можете изменить его.
Затем нужно выбрать вариант установки проекта. Вариант по умолчанию установит два плагина: Babel и ESLint. Также вы можете вручную выбрать расширения, необходимые для вашего проекта из набора плагинов:
Теперь рассмотрим другие варианты обслуживания проекта, доступные в Vue CLI. Для этого перейдите в папку проекта:
Затем выполните следующую команду:
Сервер разработки поддерживает оперативную перезагрузку кода. Поэтому не нужно останавливать и запускать сервер каждый раз, когда вы вносите изменения в код проекта. При этом сохранится даже состояние приложения!
И когда вы закончите разработку своего проекта, то можете использовать следующую команду для создания сборки:
Что такое служба CLI Vue?
Служба Vue CLI – это зависимость (@vue/cli-service), которая предоставляет конфигурации по умолчанию. Служба может быть обновлена, настроена и расширена с помощью плагинов. Она предоставляет несколько скриптов для работы с Vue-проектами. Например, serve, build и inspect.
Мы уже видели сценарии serve и build в действии. Скрипт inspect позволяет проверить конфигурацию веб-пакета в проекте с помощью vue-cli-service. Попробуйте выполнить его:
Анатомия проекта
Проект Vue, созданный с помощью CLI, имеет предопределенную структуру. Если вы решите установить дополнительные плагины (например, маршрутизатор Vue), CLI также создаст файлы, необходимые для использования и настройки этих библиотек.
Файлы и папки в проекте Vue:
Следующий скриншот отображает структуру проекта:
Плагины CLI Vue
Плагины CLI – это пакеты npm, которые реализуют дополнительные функции для Vue-проекта. Бинарный файл vue-cli-service автоматически распознает и загружает плагины, перечисленные в файле package.json.
Базовая конфигурация для проекта Vue CLI 3 – это webpack и Babel. Все остальные расширения могут быть добавлены через плагины.
Есть официальные плагины, созданные командой разработчиков Vue. А также плагины, написанные сторонними программистами. Имена официальных плагинов начинаются с @vue/cli-plugin-, а названия плагинов, разработанных сообществом, начинаются с vue-cli-plugin-.
Официальные плагины Vue CLI 3:
Как добавить плагин Vue
Плагины автоматически устанавливаются при создании проекта или инсталлируются разработчиком. Для этого используется команда vue add my-plugin.
Полезные плагины Vue
Я также создал несколько расширений:
А что насчёт webpack?
Большая часть конфигурации проекта Vue CLI абстрагируется в плагины и объединяется с базовой конфигурацией во время выполнения. Но также можно вручную настроить конфигурацию webpack для своего проекта:
Пользовательский интерфейс CLI Vue 3
Создайте новый проект на вкладке «Create». Выберите место для его хранения, затем нажмите кнопку «+ Create a new project here».
После этого вы попадёте в интерфейс, в котором нужно указать информацию о вашем проекте.
Введите данные и нажмите кнопку «Next». Затем вы попадете на вкладку «Presets», где нужно задать варианты настройки проекта:
Продолжим с установкой по умолчанию.
Далее нажмите на кнопку «Create Project». После этого вы попадете в новый интерфейс, который показывает прогресс создания проекта. Затем в панель управления проектом, где можно будет разместить виджеты, которые можно добавить с помощью кнопки «Customize».
Слева от панели настройки расположены ссылки на различные разделы:
Перейдите на страницу «Tasks».
Остановить проект можно с помощью кнопки « Stop task ».
Заключение
В этой статье мы рассмотрели новую версию Vue CLI, которая предоставляет целый ряд удобных функций: интерактивная разработка проектов, обширная коллекция официальных плагинов и полноценный графический интерфейс для создания и управления проектами на основе Vue.js.
Пожалуйста, оставьте ваши мнения по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, подписки, отклики, дизлайки, лайки!
Дайте знать, что вы думаете по данной теме в комментариях. Мы очень благодарим вас за ваши комментарии, дизлайки, подписки, лайки, отклики!
# Введение
Vue CLI — полноценная система для быстрой разработки на Vue.js, предоставляющая:
Vue CLI стремится стать стандартным инструментарием для экосистемы Vue. Он обеспечивает бесперебойную работу различных инструментов сборки, устанавливает разумные значения по умолчанию, поэтому вы сможете сосредоточиться на разработке приложения, а не проводить дни за его настройкой. В то же время, остаётся гибкость настройки конфигурации каждого инструмента без необходимости извлечения конфигурации в отдельный файл.
# Компоненты системы
Vue CLI состоит из нескольких составных частей — если вы посмотрите на исходный код
, то обнаружите, что это монорепозиторий, в котором несколько отдельно опубликованных пакетов.
# Сервис CLI
Сервис CLI построен на основе webpack
В разделе Сервис CLI всё это разбирается подробнее.
# Плагины для CLI
Плагины для CLI — это npm-пакеты, которые предоставляют дополнительные возможности для ваших проектов, создаваемых через Vue CLI, такие как транспиляция Babel / TypeScript, интеграция ESLint, модульное тестирование, и E2E-тестирование. Легко определять плагины для Vue CLI, поскольку их имена начинаются с @vue/cli-plugin- (для встроенных плагинов) или vue-cli-plugin- (для плагинов сообщества).
Когда вы запускаете бинарный файл vue-cli-service внутри проекта, он автоматически определяет и загружает все плагины CLI, указанные в файле package.json проекта.
Плагины могут добавляться как часть проекта на этапе его создания или их можно добавить в проект позднее. Они могут быть также сгруппированы в переиспользуемые пресеты настроек. Мы обсудим их подробнее в разделе плагины и пресеты.
Что такое Vue CLI
Что такое Vue CLI и зачем это нужно? Давайте рассмотрим базовые теоретические понятия, которые нужно понимать, прежде чем приступать к знакомству с этим инструментом.
Это название состоит из двух слов: vue и cli. Со словом vue все понятно, оно означает, что этот инструмент относится к фреймворку Vue.
command line interface (интерфейс командной строки)
В операционных системах есть специальная программа, которая называется командная строка, запуская которую, вы можете взаимодействовать с операционной системой. Принято программы, которые имеют интерфейс командной строки, могут через нее работать, добавлять к ним слово cli.
Если вы ранее уже работали с фреймворком Vue, то, наверно, представляете насколько много времени может уйти на разворачивание проекта. Нужно установить кучу модулей и дополнительных библиотек с помощью менеджеров пактов npm или yarn. Все эти библиотеки нужно настроить, прописать дополнительные опции, настройки, наладить связь между разными модулями. Чтобы все это настроить, даже если у вас есть какие-то наработки, на это может уйти пару часов. Для опытных программистов это быстрее, но в любом случае на это уходит достаточно много времени.
Vue cli позволяет автоматизировать это автоматическое разворачивание проекта, но не только разворачивание проекта. Есть и другие команды Vue cli, которые позволяют этим проектом быстро управлять и решать какие-то рутинные задачи.
Когда мы разворачиваем проект с помощью Vue cli, у нас разворачивается проект на Vue, где будет связь со сборщиком модулей webpack и связь с пакетом webpack-dev-server. Это специальный пакет, который позволяет разрабатывать наш проект без установки реального production сервера.
Мы можем на лету, в памяти компьютера, развернуть мини-сервер для разработки, где мы сможем быстро тестировать, разворачивать простые проекты на Vue с автоматическим обновлением страницы без перезагрузки страницы.
С помощью vue cli мы можем сделать все это очень быстро, буквально с помощью одной команды.
# Сервис CLI
# Использование Binary
Это то, что вы увидите в package.json проекта с пресетом настроек по умолчанию:
Вы можете вызвать эти команды с помощью npm или Yarn:
Если у вас установлен npx
(должен поставляться в комплекте с последней версией npm), то вы также можете запустить бинарник напрямую:
Пример работы Webpack Analyzer запущенного из графического интерфейса:
# vue-cli-service serve
Команда vue-cli-service serve запускает сервер для разработки (основанный на webpack-dev-server
), предоставляющий из коробки функцию горячей замены модулей.
В команде CLI [entry] означает входной файл (по умолчанию: src/main.js или src/main.ts в проектах с TypeScript), а не дополнительный входной файл. Если вы перезапишете запись в CLI, тогда записи из config.pages больше не будут учитываться, что может привести к ошибке.
# vue-cli-service build
Команда vue-cli-service build создаёт готовую для production сборку в каталоге dist/ с минификацией для JS / CSS / HTML и автоматическим разделением вендорного кода в отдельный фрагмент для лучшего кэширования. Манифест фрагмента вставляется инлайн в HTML.
Есть несколько полезных флагов:
—modern собирает ваше приложение, используя Современный режим, поставляет нативный код ES2015 в современные браузеры, которые поддерживают его, а также автоматический fallback на сборку для старых браузеров.
—target позволяет вам создавать любые компоненты внутри вашего проекта в виде библиотек или веб-компонентов. Подробнее в разделе Цели сборки.
# vue-cli-service inspect
Вы можете использовать vue-cli-service inspect для проверки конфигурации webpack внутри проекта Vue CLI. Подробнее в разделе просмотр конфигурации Webpack проекта.
# Список всех доступных команд
Вы также можете узнать о доступных параметрах каждой команды с помощью:
# Исключение плагинов при запуске
Можно пропустить несколько подключаемых плагинов, передав их имена через запятую:
Имена плагинов разрешаются также, как и при установке, что подробнее описано здесь
# Кэширование и параллелизация
cache-loader используется для компиляции Vue / Babel / TypeScript по умолчанию. Файлы кэшируются внутри node_modules/.cache — если при запуске будут возникать проблемы с компиляцией, сначала попробуйте удалить каталог кэша.
thread-loader будет использоваться для транспиляции Babel / TypeScript, когда в системе доступно более 1 процессорного ядра.
# Git хуки
После установки @vue/cli-service также добавляется yorkie
, который позволяет легко указывать Git хуки, используя поле gitHooks в файле package.json :
без обратной совместимости с ним.
# Конфигурация без извлечения
Проекты, созданные с помощью vue create уже готовы к работе без необходимости дополнительной настройки. Плагины предназначены для работы друг с другом, поэтому в большинстве случаев всё что вам нужно сделать — это выбрать необходимые возможности во время интерактивных запросов выбора.
Однако мы также понимаем, что невозможно удовлетворить все возможные потребности, как и потребности проекта могут изменяться с течением времени. Поэтому проекты, созданные Vue CLI, позволяют настраивать практически все аспекты без необходимости извлечения конфигурации. Подробную информацию можно найти в разделе Конфигурация.