Vue CLI

Плагины и пресеты настроек

Плагины

Vue CLI использует архитектуру на основе плагинов. Если изучить package.json в только что созданном проекте, можно обнаружить зависимости, которые начинаются с @vue/cli-plugin-. Плагины могут модифицировать внутреннюю конфигурацию webpack и внедрять команды в vue-cli-service. Большинство возможностей, перечисленных в процессе создания проекта, реализованы в виде плагинов.

Основанная на плагинах архитектура позволяет Vue CLI оставаться гибкой и расширяемой. Если вы хотите создать собственный плагин — изучите руководство по созданию плагинов.

Совет

Устанавливать и управлять плагинами можно в GUI с помощью команды vue ui.

Установка плагинов в существующий проект

Каждый плагин для CLI поставляется с генератором (который создаёт файлы) и плагином для runtime (который меняет конфигурацию webpack и внедряет команды). Когда вы используете vue create для создания нового проекта, некоторые плагины будут уже предустановлены, в зависимости от вашего выбора необходимых возможностей. В случае, когда необходимо установить плагин в уже существующий проект, вы должны сделать это командой vue add:

vue add eslint

Совет

Команда vue add специально разработана для установки и запуска плагинов Vue CLI. Это не означает, что она заменяет обычные npm-пакеты. Для установки обычных npm-пакетов по-прежнему используйте менеджер пакетов, который выбрали.

Предупреждение

Рекомендуется закоммитить все текущие изменения в вашем проекте перед запуском vue add, поскольку команда запустит генератор файлов плагина и, возможно, внесёт изменения в уже существующие файлы.

Команда @vue/eslint трансформируется в полное название пакета @vue/cli-plugin-eslint, устанавливает его из npm, и запускает его генератор.

# это аналогично предыдущей команде
vue add cli-plugin-eslint

Без префикса @vue команда будет трансформировать название к публичному пакету. Например, чтобы установить сторонний плагин vue-cli-plugin-apollo:

# устанавливает и запускает vue-cli-plugin-apollo
vue add apollo

Вы можете также использовать сторонние плагины со специфичным scope. Например, если плагин назван @foo/vue-cli-plugin-bar, то его можно добавить командой:

vue add @foo/bar

Можно передавать опции генерации в установленный плагин (для пропуска интерактивного выбора):

vue add eslint --config airbnb --lintOn save

Если плагин уже установлен, вы можете пропустить установку и только вызвать его генератор с помощью команды vue invoke. Команда принимает такие же аргументы, как и vue add.

Совет

Если, по какой-либо причине, ваши плагины перечисляются в файле package.json, отличном от расположенного в проекте, то укажите путь к каталогу с другим файлом package.json в опции vuePlugins.resolveFrom в файле package.json проекта.

Например, если у вас есть файл .config/package.json:

{
  "vuePlugins": {
    "resolveFrom": ".config"
  }
}

Локальный плагин проекта

Если требуется доступ к API плагина в вашем проекте и вы не хотите создавать полноценный плагин для этого, можно использовать опцию vuePlugins.service в файле package.json:

{
  "vuePlugins": {
    "service": ["my-commands.js"]
  }
}

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

Вы можете добавить файлы, которые будут вести себя как плагины UI опцией vuePlugins.ui:

{
  "vuePlugins": {
    "ui": ["my-ui.js"]
  }
}

Для получения дополнительной информации ознакомьтесь с API плагина для UI.

Пресеты настроек

Пресет настроек для Vue CLI — JSON-объект, который содержит предустановленные опции и плагины для создания нового проекта, чтобы пользователю не приходилось проходить через цепочку вопросов для их выбора.

Пресеты, сохраняемые во время vue create, создаются в конфигурационном файле в домашнем каталоге пользователя (~/.vuerc). Вы можете напрямую изменять этот файл для внесения правок / добавления / удаления сохранённых пресетов.

Вот пример пресета настроек:

{
  "useConfigFiles": true,
  "cssPreprocessor": "sass",
  "plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-eslint": {
      "config": "airbnb",
      "lintOn": ["save", "commit"]
    },
    "@vue/cli-plugin-router": {},
    "@vue/cli-plugin-vuex": {}
  }
}

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

{
  "useConfigFiles": true,
  "plugins": {...},
  "configs": {
    "vue": {...},
    "postcss": {...},
    "eslintConfig": {...},
    "jest": {...}
  }
}

Эти дополнительные конфигурации будут объединены в package.json или соответствующие файлы конфигураций, основываясь на значении useConfigFiles. Например, при указании "useConfigFiles": true, значение configs.vue будет объединено в файл vue.config.js.

Версии плагинов в пресете

Вы можете явно указать версии используемых плагинов:

{
  "plugins": {
    "@vue/cli-plugin-eslint": {
      "version": "^3.0.0",
      // ... другие настройки для этого плагина
    }
  }
}

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

Предоставление интерактивного выбора пользователю

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

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

Для таких случаев можно указать "prompts": true в настройках плагина, чтобы позволить пользователю сделать свой выбор:

{
  "plugins": {
    "@vue/cli-plugin-eslint": {
      // разрешаем пользователю выбрать свою конфигурацию ESLint
      "prompts": true
    }
  }
}

Пресет из удалённого репозитория

Вы можете поделиться пресетом с другими разработчиками, опубликовав его в git репозитории. Репозиторий должен содержать следующие файлы:

  • preset.json: основной файл, содержащий настройки пресета (обязателен).
  • generator.js: генератор, который внедряет или модифицирует файлы в проекте.
  • prompts.js: файл подсказок, который может собирать настройки для генератора.

После публикации репозитория, при создании проекта теперь можно указать опцию --preset для использования пресета из удалённого репозитория:

# использование пресета из репозитория GitHub
vue create --preset username/repo my-project

GitLab и BitBucket также поддерживаются. Убедитесь, что используете опцию --clone при загрузке из стороннего репозитория:

vue create --preset gitlab:username/repo --clone my-project
vue create --preset bitbucket:username/repo --clone my-project

# репозитории на собственном хостинге
vue create --preset gitlab:my-gitlab-server.com:group/projectname --clone my-project
vue create --preset direct:ssh://git@my-gitlab-server.com/group/projectname.git --clone my-project

Пресет из локального файла

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

# ./my-preset должен быть каталогом, содержащим preset.json
vue create --preset ./my-preset my-project

# или напрямую использовать json-файл в cwd:
vue create --preset my-preset.json my-project