# Сервис 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, позволяют настраивать практически все аспекты без необходимости извлечения конфигурации. Подробную информацию можно найти в разделе Конфигурация.
# Введение
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 проекта.
Плагины могут добавляться как часть проекта на этапе его создания или их можно добавить в проект позднее. Они могут быть также сгруппированы в переиспользуемые пресеты настроек. Мы обсудим их подробнее в разделе плагины и пресеты.
Что такое 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 cli, рассмотрим как установить Vue cli и какие задачи решает этот инструмент.
Для чего нужен Vue cli?
Vue cli представляет собой инструмент, который позволяет удобно и быстро создать приложение или прототип приложения на Vue.js. Vue cli хорош тем, что для приложения не требуется писать конфигурацию webpack — дефолтная конфигурация уже встроена во Vue cli. Само собой вы можете дописывать и изменять конфиг webpack. Об этом мы еще поговорим в статье. Vue cli состоит из трех компонентов:
Vue cli установка
Установить Vue cli можно следующими командами:
Если команда выполнилась без ошибок, то в терминале должен появиться доступ к команде vue. Проверку можно произвести командой
Команда выведет в консоль версию установленного пакета Vue cli. На момент написания статьи актуальная версию пакета 4.5.13.
Создаем проект с помощью Vue cli
project-name — это папка, в которой и будет создан проект.
Vue cli создание проекта
Вы можете выбрать дефолтные настройки с Vue 2/3 или настроить все индивидуально выбрав Manually select features.
При настройке вручную вам можно будет выбрать следующие опции:
Vue cli установка — выбор опций при ручной настройке проекта
После успешной установки и скачивания пакетов сообщение в консоли предлагает нам перейти в папку проекта следующей командой в терминале:
Теперь мы находимся в корневой директории нашего только что созданного проекта и можем запустить локальный сервер для разработки и кодить:
После выполнения команды у нас поднимется сервер, который будет доступен по адресу http://localhost:8080/. Если перейти по адресу, то вы увидите следующее:
Vue cli установка — тестовый сервер для разработки
Структура проекта
На скриншоте ниже можно ознакомиться со структурой проекта, которую предлагает Vue cli.
Vue cli установка — структура проекта
Рассмотрим поподробнее структуру проекта
Как изменить конфигурацию webpack во vue-cli?
Пример файла vue.config.js
Заключение
Таким образом, мы познакомились с инструментов Vue-cli, который значительно упрощает жизнь разработчиков, научились создавать проекты и менять конфигурацию webpack. Если же вы хотите вручную настроить webpack для проекта vue, то советуем почитать статью — Webpack Vue js — простая сборка приложения
Президент США Джо Байден ужесточает ограничения в отношении Huawei и ZTE
Samsung заявляет, что Android 12 и One UI 4 готовы для Galaxy S21
Опрос в Twitter призывает Элона Маска продать 10% акций Tesla
800 000 человек играют в Forza Horizon 5, а она еще даже не вышла
Исследователи Массачусетского технологического института создали ИИ, который может сделать роботов лучше
Instagram @web.dev.setups
Так называемый принцип Парето был сформулирован в 19 веке. Он говорит, что 20% усилий принесут 80% результата, и наоборот, 80% усилий принесут только 20% результата. Этот закон Парето можно применить в любой сфере жизни. Взглянем на примеры: 20% книг дают 80% знаний, 20% злоумышленников совершают 80% преступлений, 20% всех людей на планете владеют 80% всех денег в мире.
Проанализируйте, какие именно действия принесут вам большую отдачу и отдайте предпочтение именно им. Сконцентрируйтесь на 20% вещах, которые обеспечат вам максимальную отдачу.
⚡Нездоровый перфекционизм это зло
Самокритика хороша только до того момента когда вы перестаете здраво оценивать свои возможности, и стараетесь перейти поставленную планку. В такой момент лучше отставить в сторону черезмерные претензии к самому себе – наша жизнь сама по себе неидеальна. Перестаньте копаться в мелких деталях – этим вы себе только навредите, особенно учитывая тот факт, что копаться в себе можно до бесконечности.
⚡Разрешайте себе отдыхать
⚡Сложно сохранить ровную осанку когда ты сидишь за столом 4, 6 или 8 часов. Спина постоянно ищет удобное положение и интуитивно мы начинаем сползать с кресел вниз. Чтобы этого не произошло нужно использовать подставку для ног.
⚡Подставка для ног позволяет телу испытывать минимальные напряжения и позволяет спине полностью откинуться на стул. Таким образом заняв правильное положение на рабочем месте, можно избавиться от усталости мышц спины и затекания ног.
Ускорение рабочего процесса при работе Vue.js с помощью Vue CLI 3
Мы вряд ли можем себе представить современную веб-разработку, не используя инструментов командной строки (CLI). Они значительно облегчают и ускоряют процесс разработки путем сокращения количества выполняемых повторяющихся и трудоемких задач. Настройка проекта вручную, включая проверку, сборку, тестирование, предварительную обработку и оптимизацию кода с возможностью отслеживания зависимостей, не похоже на увлекательную работу, не так ли?
Вот почему все современные фронтенд-фреймворки (например, Angular, React и т.д.) предлагают собственные инструменты для работы в командной строке, и Vue.js здесь не исключение. Но с выходом последней третьей версии, Vue CLI сделал один шаг вперед, чтобы быть впереди остальных. Теперь он не только очень мощный и гибкий, но также поставляется с полноценным GUI. Да, вы всё правильно поняли: Vue CLI 3 предлагает настоящий графический интерфейс из коробки.
Создание новых проектов на Vue.js теперь проще, чем когда-либо с новой версией Vue CLI и его пользовательским интерфейсом (Vue UI GUI). Эта обучающая статья покажет вам, как вы установить Vue CLI и как Vue UI может ускорить рабочий процесс еще больше. Давайте начнем!
Что такое Vue CLI?
Vue CLI представляет собой набор инструментов для быстрого прототипирования, легкого создания новых приложений и эффективного управления проектами на Vue.js. Он состоит из трех основных инструментов:
В следующих разделах мы будем исследовать первоначальные азы вышеуказанных инструментов и утилит, но для начала давайте посмотрим на практические аспекты, которые делают Vue CLI таким мощным и гибким.
Vue CLI — полнофункциональная система для ускорения нашего процесса разработки приложений на Vue.js
Vue CLI ускоряет и облегчает разработку проекта на Vue.js благодаря внушительному набору функциональных возможностей. Давайте посмотрим, что это за возможности:
Начало работы с Vue CLI
После того, как мы узнали о магии Vue CLI, пришло время, чтобы увидеть её на практике. Для начала нам нужно установить Vue CLI 3. Это потребует Node.js 8.9+ (рекомендуется версия 8.11.0 или новее), поэтому мы должны убедиться, что на наших машинах установлена правильная версия. Затем мы открываем терминал или командную строку и выполняем следующую команду:
Мгновенное создание прототипов
Даже несмотря на то, что Vue CLI предназначен главным образом для работы со сложными проектами, этот инструмент всё равно позволяет нам попробовать наши первые идеи, быстро и без особых усилий. Возможность мгновенного прототипов может быть активирована, если установлен глобальный пакет Vue CLI Service:
Затем в той же директории выполняем:
Создание нового проекта
Предыдущий раздел был только разминкой. Теперь давайте сделаем что-то более сложное.
Команда vue create использует интерактивный процесс для выбора вариантов, чтобы создать новый проект. Давайте выполним её и пройдем через весь процесс создания.
Создание нового проекта с Vue CLI
В первом окне нам предлагается выбрать пресет. Существует только один пресет из коробки, под названием default. Мы выберем второй вариант, с помощью которого мы сможем вручную выбрать компоненты, необходимые для нашего проекта, далее нажмите клавишу Enter, чтобы продолжить.
В следующем окне мы используем клавиши со стрелками для перемещения вверх и вниз по списку возможностей, а также пробел, чтобы выбрать то, что мы хотим. Прямо сейчас наряду с уже выбранным Babel и Linter/Formatter, я также выбрал Router и Vuex. После того как вы выбрали необходимые возможности, нажмите Enter, чтобы перейти к следующему шагу.
В следующем окне нас спрашивают, следует ли использовать режим истории в маршрутизаторе. Я просто нажал Enter, чтобы выбрать значение по умолчанию Yes.
В следующем окне, нам нужно выбрать, как мы хотим настроить Linter. Я выбрал ESLint + Prettier.
В следующем окне мы выбираем, когда используется Linter для проверки проекта. Я выбрал Lint on save, что означает, что проверка применяется каждый раз, когда сохраняется файл.
В следующем окне мы должны решить, как мы хотим настроить наш проект. Выберите, хотите ли вы использовать собственные конфигурационные файлы для каждой из возможности, или включить все параметры конфигурации в файл package.json. Я предпочитаю хранить всё в одном файле, поэтому выбираю вариант с package.json.
В последнем окне у нас есть возможность сохранить всю конфигурацию в виде простого в использовании пресета для создания будущих проектов. Я сохранил свою как spa-simple. Пресеты сохраняются в директории пользователя внутри файла .vuerc.
При завершении процесса создания будет создан и настроен проект, а запрошенные пакеты будут загружены и установлены.
Изучение структуры проекта
В этом разделе мы рассмотрим, что Vue CLI создал для нас.
В директории проекта выше показано, что у нас есть следующие файлы и директории:
Недавно созданная директория src
Давайте теперь взглянем на директорию src:
В директории src, которая показана выше, есть следующие файлы и директории:
Изменение конфигурации проекта
Конфигурация проекта по умолчанию содержит разумные значения параметров, которые, если нужно, доступны для изменения, путем создания файла vue.config.js в директории проекта, или путем добавления секции vue в файле package.json. Давайте попробуем первый вариант: создадим файл vue.config.js и добавим следующий код:
Это позволит компонентам определять свои шаблоны как строки, а не использовать элементы template. Получить сведения о полном наборе параметров конфигурации, доступные для использования, можно на странице Vue CLI Config.
Разработка проекта
Когда мы открываем приложение в браузере, мы увидем следующую страницу:
Это страница Home.vue, которая использует компонент HelloWorld.vue.
Команда serve запускает сервер разработки, работающий от пакета webpack-dev-server, с функцией горячей перезагрузкой модулей (HMR). Это означает, что когда мы внесем изменения в файлы компонентов и сохраним их, изменения немедленно будут показаны, т.е. страница будет обновлена в браузере.
Добавление нового функционала в проект при помощи плагинов Vue CLI
Давайте предположим, что мы хотим использовать компоненты Bootstrap для нашего проекта. К счастью, есть плагин bootstrap-vue, который может предоставить их. Чтобы установить его, выполняем следующую команду:
После установки плагина в директории src, мы найдем новую директорию plugins, в которой будет размещен новый плагин.
Теперь, чтобы проверить работу плагина, изменим файл About.vue:
И когда мы указываем страницу About в браузере, мы увидим, что страница обновилась и стилизована с помощью Bootstrap:
Создание проекта для продакшена
Когда приложение готово к деплою, необходимо создать набор бандлов, содержащие только код приложения и содержимое, а также модули, от которых они зависят, чтобы эти файлы можно было развернуть на рабочем HTTP-сервере.
Сборка приложения
Для сборки приложения выполняем следующую команду:
Изучение директории dist
После завершения процесса сборки, в корневой директории проекта создается директория dist. Давайте посмотрим на её содержимое:
Так что теперь мы готовы для деплоя приложения на продакшен-сервере. Есть много вариантов на выбор. Вы можете узнать о многих из них, посетив страницу Deployment.
Давайте сделаем GUI-версию нашего проекта при помощи Vue UI
Vue CLI 3 — очень мощный, но имеет свою цену. Есть слишком много вариантов, команд и параметры для настройки, чтобы запомнить все их. Это делает его более сложным и трудным для работы. Чтобы прийти в состояние «просто и легко» Гийом Чау (Guillaume Chau) создал Vue UI, который значительно упрощает процесс разработки и делает его более доступным. Сначала он может показаться немного странным, чтобы объединить CLI-инструмент с графическим интерфейсом, но как вы увидите позже, этот необычный симбиоз является довольно мощный и эффективный.
Воссоздание нашего проекта с помощью Vue UI
В этом разделе мы рассмотрим создание одного и то же проекта, который мы создали раньше, но на этот раз мы будем использовать Vue UI.
Менеджер проектов Vue (Vue Project Manager) запускается с выбранной вкладкой Projects. Там еще нет существующих проектов. Чтобы перечислить некоторые нам нужно создавать их через пользовательский интерфейс или импортировать проекты, созданные с CLI. Давайте посмотрим, как мы можем создать новый проект.
Мы переключаеися на вкладку Create, переходим в нужную директорию для нашего приложения и нажимаем кнопку Create a new project here.
На следующем экране мы указываем имя директории проекта и выбираем нужный менеджер пакетов.
На следующем экране мы можем пресет для проекта. Это может быть пресет по умолчанию, manual, remote, либо пользовательский пресет, который мы создали раньше. Пресет spa-simple является примером пользовательского пресета. Здесь мы выбираем Manual.
На следующем экране мы выбираем плагины, которые мы хотим установить.
Наконец мы устанавливаем параметры конфигурации для плагинов, которые мы выбрали для установки. Когда мы готовы, нажимаем на кнопку Create Project.
Теперь будет создан проект, и мы будет перенаправлены на панель управления проектом.
Использование панели управления проекта Vue UI
В разделе Plugins перечислены все установленные плагины. Чтобы установить новый плагин нажимаем кнопку Add plugin.
Здесь мы можем найти плагин, который нам нужен, и когда мы его найдем, кликаем на кнопку Install. В нашем случае мы ищем и устанавливаем плагин bootstrap-vue.
Когда плагин установлен, на вкладке Configuration, мы можем установить предоставленные параметры.
На вкладке Files changed можно проверить, какие файлы изменяются и каким образом. Здесь я не хочу вносить каких-либо изменения, поэтому я нажимаю на кнопку Skip.
В разделе Dependencies мы перечислили все основные зависимости, а также те, которые предназначенные для разработки. Чтобы добавить зависимости нажимаем кнопку Install dependency.
В модальном окне мы можем найти основные зависимости или зависимости разработки, и установить их.
В разделе Configuration мы можем настроить параметры, предоставленные для добавленных плагинов. Здесь у нас есть параметры для плагина Vue CLI, а также для плагина ESLint.
В модальном окне мы выбираем параметры, с которым мы хотим выполнить задачу.
Когда мы перейдем на вкладку Output, мы получим логи задачи.
Когда мы перейдем на вкладку Analyzer, мы получаем красивый график, который обощает информацию для всего проекта.
Задача build почти похожа на задачу serve за исключением того, что первая создает бандл для продакшена, который может использоваться для деплоя приложения.
Поле Output задачи inspect даёт нам информацию о полученной конфигурации webpack.
И это всё. Мы успешно воссоздали наш проект с помощью Vue UI. Но, как мы видели, процессы создания и настройки проще и гораздо боле приятные, когда мы используем GUI.