Что такое CLI Vue - гид по для новичка

  1. Статьи
  2. Веб-фреймворки
  3. Vue
0 ∞

Для нового приложения Vue лучше использовать Vue CLI.

Что такое CLI? Это утилита командной строки предоставляет доступ к множеству инструментов для сборки проекта.

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

Содержание

Установка и системные требования Vue CLI 3

Системные требования

Для работы с Vue CLI v3 потребуется Node.js 8.9+. Но рекомендуется использовать версию платформы v8.11.0+.

Ее можно установить:

  • Загрузив двоичные файлы для вашей операционной системы с официального сайта проекта.
  • Используя официальный менеджер пакетов.
  • С помощью менеджера версий.

Перед началом установки Vue CLI нужно удалить все предыдущие версии CLI. Для этого выполните следующую команду:

npm uninstall vue-cli -g

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

Чтобы установить Vue CLI v3, запустите следующую команду:

npm install -g @vue/cli

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

После установки CLI Vue 3 вы сможете вывести список всех доступных команд, выполнив команду vue:

vue

А также проверить установленную версию, выполнив:

vue --version
$ 3.2.1

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

С помощью Vue CLI вы можете создать новое приложение, выполнив следующую команду:

vue create example-vue-project

example-vue-project – это название проекта. Вы можете изменить его.

Затем нужно выбрать вариант установки проекта. Вариант по умолчанию установит два плагина: Babel и ESLint. Также вы можете вручную выбрать расширения, необходимые для вашего проекта из набора плагинов:

Теперь рассмотрим другие варианты обслуживания проекта, доступные в Vue CLI. Для этого перейдите в папку проекта:

cd example-vue-project
Что такое всплывающее окно и как его создать самостоятельно

Затем выполните следующую команду:

npm run serve

Она запустит локальный сервер разработки по адресу http://localhost:8080. Если вы перейдёте по этому адресу в своём браузере, то увидите следующую страницу:

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

Сервер разработки поддерживает оперативную перезагрузку кода. Поэтому не нужно останавливать и запускать сервер каждый раз, когда вы вносите изменения в код проекта. При этом сохранится даже состояние приложения!

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

npm run build

Эта команда сохранит собранный код в папку dist проекта. Об этой процедуре вы можете прочитать здесь.

Что такое служба CLI Vue?

Служба Vue CLI – это зависимость (@vue/cli-service), которая предоставляет конфигурации по умолчанию. Служба может быть обновлена, настроена и расширена с помощью плагинов. Она предоставляет несколько скриптов для работы с Vue-проектами. Например, serve, build и inspect.

Мы уже видели сценарии serve и build в действии. Скрипт inspect позволяет проверить конфигурацию веб-пакета в проекте с помощью vue-cli-service. Попробуйте выполнить его:

vue inspect

Анатомия проекта

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

Файлы и папки в проекте Vue:

  • public – папка содержит общедоступные файлы, такие как html и favicon.ico. Размещенные здесь статические ресурсы будут скопированы и не упакованы в веб-пакет.
  • src – папка содержит исходные файлы проекта.
  • src/assets – папка содержит ресурсы проекта, такие как png.
  • src/components – папка содержит компоненты Vue.
  • src/App.vue – основной компонент Vue-проекта.
  • src/main.js – основной файл проекта, который загружает Vue-приложение.
  • config.js – файл конфигурации для Babel.
  • json – файл содержит список зависимостей проекта, а также параметры конфигурации для ESLint, PostCSS и поддерживаемых браузеров.
  • node_modules– папка содержит установленные пакеты npm.

Следующий скриншот отображает структуру проекта:

Анатомия проекта
Создание приложений с помощью Vue CLI

Плагины 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:

  • Typescript;
  • PWA;
  • Vuex;
  • Vue Router;
  • ESLint;
  • Unit testing etc.

Как добавить плагин Vue

Плагины автоматически устанавливаются при создании проекта или инсталлируются разработчиком. Для этого используется команда vue add my-plugin.

Полезные плагины Vue

Существует много плагинов Vue CLI, которые могут оказаться полезными для ваших проектов. Например, библиотека Vuetify UI и Storybook. Вы также можете использовать плагин Electron Builder для быстрого создания Vue-проекта на основе Electron.

Я также создал несколько расширений:

  • vue-cli-plugin-nuxt: плагин Vue CLI для быстрого создания универсального приложения Vue с Nuxt.js.
  • vue-cli-plugin-bootstrap: плагин Vue CLI для добавления Bootstrap 4 в проект.

А что насчёт webpack?

Большая часть конфигурации проекта Vue CLI абстрагируется в плагины и объединяется с базовой конфигурацией во время выполнения. Но также можно вручную настроить конфигурацию webpack для своего проекта:

  • Создать файл config.js в корневом каталоге проекта, а затем выполнить настройку в параметре configureWebpack:
module.exports = {
    configureWebpack: {
      // custom config here
    }
  }
  • Изменить конфигурацию webpack

Больше о работе с Vue CLI и webpack.

Пользовательский интерфейс CLI Vue 3

Теперь рассмотрим пользовательский интерфейс Vue CLI. Третья версия утилиты предоставляет современный веб-интерфейс, который позволяет создавать проекты и управлять ими без использования командной строки. Чтобы запустить графический интерфейс, выполните следующую команду:

vue ui

После этого интерфейс будет доступен по адресу http://localhost:8000.

Пользовательский интерфейс CLI Vue 3

Создайте новый проект на вкладке «Create». Выберите место для его хранения, затем нажмите кнопку «+ Create a new project here».

Пользовательский интерфейс CLI Vue 3 - 2
Доступные сообщения валидации формы с помощью ARIA и Vue.js

После этого вы попадёте в интерфейс, в котором нужно указать информацию о вашем проекте.

Введите данные и нажмите кнопку «Next». Затем вы попадете на вкладку «Presets», где нужно задать варианты настройки проекта:

  • Default preset - для установки по умолчанию с плагинами Babel и ESLint.
  • Manual - для самостоятельного выбора плагинов.
  • Remote preset - для удаленной установки из репозитория Git.

Продолжим с установкой по умолчанию.

Далее нажмите на кнопку «Create Project». После этого вы попадете в новый интерфейс, который показывает прогресс создания проекта. Затем в панель управления проектом, где можно будет разместить виджеты, которые можно добавить с помощью кнопки «Customize».

Слева от панели настройки расположены ссылки на различные разделы:

  • Plugins - для добавления новых плагинов Vue CLI.
  • Dependencies - для управления пакетами.
  • Configuration - для настройки инструментов.
  • Tasks - для запуска скриптов.

Перейдите на страницу «Tasks».

Нажмите кнопку serve, а затем кнопку «Run task», чтобы запустить проект.

Остановить проект можно с помощью кнопки «Stop task».

Заключение

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

Сергей Бензенкоавтор-переводчик статьи «A Beginner’s Guide to Vue CLI»