Vue CLI - полный разбор инструмента для разработки проектов на Vue

05 марта 2026

Автор

Олег Марков

Введение

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

С его помощью вы можете:

за пару команд развернуть готовый к работе проект
выбрать шаблон под ваши задачи (SPA, PWA, TypeScript, Vuex, Router и т.д.)
запускать дев-сервер с горячей перезагрузкой
собирать оптимизированный продакшен-бандл
тонко настраивать конфигурацию сборки, когда это действительно нужно

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

Установка и базовые команды

Требования к окружению

Прежде чем устанавливать Vue CLI, убедитесь, что у вас установлены:

Node.js (обычно рекомендуется версия не ниже 14, но лучше смотреть актуальные требования в документации)
npm или Yarn

Проверьте версии:

node -v     # Проверяем установленную версию Node.js
npm -v      # Проверяем установленную версию npm

Если Node.js нет, скачайте установщик с официального сайта или установите через менеджер пакетов вашей ОС.

Установка Vue CLI

Установить Vue CLI можно глобально:

npm install -g @vue/cli
# или с помощью Yarn
yarn global add @vue/cli

После установки проверьте, что команда доступна:

vue --version   # Должна отобразиться версия Vue CLI

Если команда не находится, часто помогает:

перезапуск терминала
проверка переменной PATH
повторная установка с правами, разрешающими глобальные установки

Обновление Vue CLI

Чтобы обновить CLI до последней версии:

npm update -g @vue/cli
# или
yarn global upgrade @vue/cli

Обновление полезно, когда вы хотите использовать новые пресеты, плагины или исправления.

Основные команды Vue CLI

Смотрите, я перечислю основные команды, с которыми вы будете работать постоянно:

vue create — создание нового проекта
vue ui — графический интерфейс для управления проектами
vue add — добавление официальных плагинов к существующему проекту
vue invoke — повторный запуск генератора плагина
vue config — работа с конфигурацией CLI
vue serve / vue build (для однофайловых компонентов и lib‑режима)

Давайте разберем их по порядку на примерах.

Создание проекта через vue create

Базовое создание проекта

Начнем с самой частой операции — создания нового проекта:

vue create my-vue-app

Здесь:

my-vue-app — название директории проекта
команда запустит интерактивный мастер, который задаст вам ряд вопросов

Теперь давайте посмотрим, какие варианты выбора вам предложит CLI.

Выбор пресета (preset)

При создании проекта вам предложат:

Использовать готовый пресет по умолчанию (например, Vue 3 + Babel + ESLint)
Ручную настройку (Manually select features)

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

В ручном режиме вы сможете включить:

Babel — транспиляция современного JavaScript под более старые браузеры
TypeScript — поддержка TypeScript
Router — добавление vue-router
Vuex или Pinia — состояние приложения
CSS-препроцессоры (Sass, Less, Stylus)
Linter / Formatter — ESLint, Prettier
Unit Testing — Jest или другой тестовый раннер
E2E Testing — Cypress или другие

Vue CLI на основе этих ответов сгенерирует конфигурацию и зависимости.

Сохранение собственного пресета

Если вы часто создаете проекты с одинаковым набором опций, удобно сохранить пресет:

В конце создания проекта CLI спросит, хотите ли вы сохранить настройки как пресет. Если согласитесь:

пресет будет записан в конфигурацию пользователя
дальше вы сможете использовать его одной командой

Например:

vue create my-app --preset my-company-preset

Это особенно полезно для командной разработки, чтобы у всех разработчиков проекты создавались с одинаковой структурой и инструментами.

Пример структуры проекта

После создания проекта вы увидите примерно такую структуру (для типичного Vue 3 SPA):

my-vue-app/
  ├─ node_modules/           # Установленные зависимости проекта
  ├─ public/
  │   └─ index.html          # Основной HTML-шаблон
  ├─ src/
  │   ├─ assets/             # Статические ресурсы (изображения, стили)
  │   ├─ components/         # Компоненты Vue
  │   ├─ views/              # Страницы/экраны приложения (если используется Router)
  │   ├─ App.vue             # Корневой компонент приложения
  │   └─ main.js             # Точка входа приложения
  ├─ .eslintrc.js            # Настройки ESLint
  ├─ babel.config.js         # Настройки Babel
  ├─ package.json            # Список зависимостей и скриптов
  └─ README.md               # Документация проекта

Эта структура может немного отличаться в зависимости от выбранных опций (например, TypeScript, тесты и т.д.).

Работа с проектом Vue CLI: npm-скрипты

После генерации все управление сборкой и запуском идет через npm-скрипты в package.json.

Посмотрите пример:

{
  "scripts": {
    "serve": "vue-cli-service serve",   // Запуск дев-сервера
    "build": "vue-cli-service build",   // Сборка продакшен-бандла
    "lint": "vue-cli-service lint",     // Запуск линтера
    "test:unit": "vue-cli-service test:unit"  // Юнит-тесты (если выбраны)
  }
}

Теперь вы увидите, как это выглядит в терминале:

npm run serve   # Запуск проекта в режиме разработки
npm run build   # Сборка production версии
npm run lint    # Проверка кода линтером
npm run test:unit  # Запуск юнит-тестов

Смотрите, я покажу вам, как работает дев-сервер и что он делает.

Дев-сервер: vue-cli-service serve

При запуске serve:

npm run serve

CLI:

запускает локальный сервер (по умолчанию http://localhost:8080)
автоматически пересобирает проект при изменении файлов
обновляет страницу через HMR (горячая перезагрузка модулей)

Можно указать порт и хост:

vue-cli-service serve --port 3000 --host 0.0.0.0
# --port 3000   - слушать порт 3000
# --host 0.0.0.0 - принимать запросы со всех интерфейсов

Это удобно, например, если вы хотите открыть приложение с другого устройства в локальной сети.

Сборка production: vue-cli-service build

Когда вам нужно собрать проект для продакшена:

npm run build

Что происходит:

код минифицируется
CSS и JS разделяются на чанки
генерируются оптимизированные файлы в папке dist
автоматически подключаются хэши в названиях файлов для кэширования

Можно настроить дополнительные опции, например:

vue-cli-service build --report
# --report  - генерирует отчет по размерам бандлов

Это помогает понять, какие зависимости занимают больше всего места.

Конфигурация проекта через vue.config.js

По умолчанию Vue CLI скрывает большинство сложных настроек Webpack и Babel. Но вам часто захочется что-то изменить: путь деплоя, алиасы, прокси, оптимизацию и т.д.

Для этого служит файл vue.config.js в корне проекта.

Если его нет — просто создайте:

// vue.config.js
module.exports = {
  // Базовый путь деплоя приложения
  publicPath: '/',

  // Директория, куда будет собираться проект
  outputDir: 'dist',

  // Куда будут складываться статические ресурсы
  assetsDir: 'static',

  // Включение source map в продакшене (для отладки)
  productionSourceMap: false,

  // Настройка дев-сервера
  devServer: {
    port: 3000,              // Запускать дев-сервер на порту 3000
    open: true,              // Открывать браузер после запуска
    proxy: {                 // Прокси для API-запросов
      '/api': {
        target: 'http://localhost:5000', // Адрес вашего backend
        changeOrigin: true               // Подменять Origin-заголовок
      }
    }
  }
}

Обратите внимание, как этот фрагмент кода позволяет:

решить проблему CORS через прокси
изменить порт
выключить source map в продакшене для уменьшения размера бандла

Настройка Webpack (configureWebpack и chainWebpack)

Если вам нужно вмешаться в конфигурацию Webpack, Vue CLI предлагает два способа:

configureWebpack — простой объект или функция для «поверхностного» мерджа
chainWebpack — более тонкая настройка через цепочку API (на базе webpack-chain)

Смотрите, пример с configureWebpack:

// vue.config.js
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@components': require('path').resolve(__dirname, 'src/components')
        // Теперь вы можете импортировать компоненты так:
        // import MyComp from '@components/MyComp.vue'
      }
    }
  }
}

Здесь мы добавили алиас @components, чтобы не писать длинные относительные пути.

Теперь давайте посмотрим пример с chainWebpack:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // Включаем отображение размеров чанков в консоли сборки
    config.performance
      .maxEntrypointSize(400000) // Лимит размера точки входа
      .maxAssetSize(400000)      // Лимит размера отдельного ассета

    // Пример удаления предустановленного плагина
    config.plugins.delete('prefetch') // Отключаем prefetch-плагин Webpack

    // Пример добавления собственного правила (условный пример)
    config.module
      .rule('txt')
      .test(/\.txt$/)              // Обрабатываем файлы .txt
      .use('raw-loader')
      .loader('raw-loader')        // Загружаем содержимое как строку
  }
}

Этот способ дает полный контроль над конфигурацией, когда стандартных настроек уже не хватает.

Работа с окружениями и переменными

Файлы .env

Vue CLI поддерживает разные файлы окружения, которые автоматически подхватываются в зависимости от режима.

Типичные файлы:

.env — общие переменные для всех режимов
.env.development — переменные только для режима разработки
.env.production — переменные только для продакшена
.env.test — для режима тестирования

Теперь вы увидите, как это выглядит в файле:

# .env.development
VUE_APP_API_URL=http://localhost:5000/api
VUE_APP_FEATURE_FLAG=true

Важный момент: переменные, которые должны быть доступны в коде фронтенда, должны начинаться с префикса VUEAPP.

Пример использования в коде:

// src/services/api.js

// Здесь мы читаем переменную окружения, заданную в .env.* файлах
const API_URL = process.env.VUE_APP_API_URL

export function fetchUsers() {
  // Обратите внимание - BASE URL берется из окружения
  return fetch(`${API_URL}/users`)
}

Таким образом вы легко переключаете бэкенд или другие параметры между dev, test и production, не меняя исходный код.

Смена режима сборки

По умолчанию:

npm run serve использует режим development
npm run build — режим production

Вы можете явно указать режим:

NODE_ENV=test npm run build
# или
vue-cli-service build --mode staging

Тогда CLI будет искать файл .env.staging и использовать его переменные.

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

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

Добавление плагинов через vue add

Команда vue add устанавливает официальный или совместимый плагин и запускает его генератор.

Например, добавим TypeScript в существующий проект:

vue add typescript

Теперь давайте разберемся, что делает эта команда:

устанавливает зависимости для TypeScript
добавляет или обновляет конфигурацию tsconfig.json
переименовывает некоторые файлы в .ts
правит main.js / main.ts, чтобы корректно работать с TS

Другие примеры:

vue add router       # Добавляет vue-router в проект
vue add vuex         # Добавляет Vuex (для Vue 2 проектов)
vue add eslint       # Настраивает ESLint
vue add unit-jest    # Добавляет поддержку Jest
vue add pwa          # Настраивает PWA (Service Worker и манифест)

Здесь я размещаю пример, чтобы вам было проще понять:

vue add router
# CLI задаст вопросы о режиме history, структуре и т.д.
# После этого появится src/router/index.js
# и в main.js приложение будет подключено к router

Повторный запуск генератора: vue invoke

Иногда вы хотите заново настроить уже установленный плагин. Для этого есть команда:

vue invoke eslint

Она:

повторно запустит вопросы генератора плагина eslint
обновит конфигурацию в соответствии с вашими новыми ответами

Это удобно, когда вы, например, хотите сменить стиль линтинга или добавить Prettier позже.

Создание собственных плагинов (кратко)

Для продвинутого использования команды могут создавать свои плагины Vue CLI, которые:

добавляют зависимости
модифицируют файлы проекта
вставляют собственные шаблоны

Это немного выходит за рамки базового знакомства, но вы можете иметь в виду: если в компании есть типовой стек, его можно упаковать в плагин и раздавать всей команде.

Шаблоны и пресеты для командной разработки

Если у вас в команде есть стандартные требования к проектам (например, всегда Vue 3 + TypeScript + ESLint + Prettier + Jest + Cypress), удобно использовать:

локальные пресеты
удаленные пресеты (например, в Git-репозитории)

Команда вида:

vue create my-app --preset username/my-vue-preset

позволяет:

подтянуть пресет с GitHub (username/my-vue-preset)
автоматически применить вашу типовую конфигурацию

Так вы экономите время на согласование настроек и избегаете расхождений между проектами.

Настройка прокси и работа с API

Частая проблема при локальной разработке — CORS-ошибки при запросах к бэкенду на другом домене или порту.

Vue CLI-dev-сервер умеет проксировать запросы, чтобы обойти эту проблему.

Давайте разберемся на примере.

Пример настройки прокси в devServer

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000', // Адрес backend-сервера
        changeOrigin: true,              // Подменять Origin-заголовок
        pathRewrite: { '^/api': '' }     // Удалять префикс /api при проксировании
      }
    }
  }
}

Теперь вы увидите, как это выглядит в коде фронтенда:

// src/services/api.js

// Здесь мы отправляем запрос на относительный путь /api
export function fetchUsers() {
  return fetch('/api/users')  // На дев-сервере это уйдет на http://localhost:5000/users
    .then(response => response.json())
}

Преимущества:

нет CORS-проблем на локальной разработке
вы не хардкодите полный URL бэкенда в фронтенд-код
легко поменять target в vue.config.js при смене backend-сервера

Работа с ассетами и статическими файлами

Vue CLI предлагает удобный подход к работе с изображениями, шрифтами и другими ресурсами.

Папка public

Все, что лежит в папке public, будет скопировано «как есть» в корень итоговой сборки.

Например:

public/favicon.ico
public/robots.txt

Вы можете обращаться к файлам из public напрямую, начиная с /.

Пример:

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Здесь favicon берется из public/favicon.ico -->
    <link rel="icon" href="/favicon.ico">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Папка src/assets

Файлы в src/assets проходят через сборщик (Webpack). Это значит, что:

они могут оптимизироваться (минификация, сжатие)
им добавляются хэши в названия для кэширования
их можно импортировать прямо из кода

Пример в компоненте:

<!-- src/components/UserAvatar.vue -->
<template>
  <div class="avatar">
    <!-- Здесь мы используем импортированную картинку -->
    <img :src="avatar" alt="User avatar">
  </div>
</template>

<script>
// Здесь мы импортируем картинку как модуль
import avatarImg from '@/assets/avatar.png'

export default {
  name: 'UserAvatar',
  data() {
    return {
      avatar: avatarImg  // Путь к сгенерированному файлу
    }
  }
}
</script>

<style scoped>
.avatar img {
  border-radius: 50%;   /* Делаем аватар круглым */
  width: 80px;          /* Фиксируем размер */
  height: 80px;
}
</style>

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

Линтинг и форматирование кода

Vue CLI умеет сразу подключить ESLint (и при желании Prettier). Это помогает поддерживать единый стиль кода в команде.

Пример запуска линтера

npm run lint

В зависимости от выбранной конфигурации команда:

проверит .js, .vue, .ts файлы
покажет предупреждения и ошибки
при включенном автоисправлении попробует поправить мелкие стилистические проблемы

Файл .eslintrc.js может выглядеть, например, так:

// .eslintrc.js
module.exports = {
  root: true,                // Указываем, что это корень ESLint-конфигурации
  env: {
    node: true,              // Включаем переменные окружения Node.js
    browser: true            // Включаем переменные окружения браузера
  },
  extends: [
    'plugin:vue/vue3-essential', // Базовые правила для Vue 3
    'eslint:recommended'         // Рекомендуемые правила ESLint
  ],
  parserOptions: {
    ecmaVersion: 2020,       // Поддерживаем синтаксис ES2020
    sourceType: 'module'
  },
  rules: {
    'no-console': 'off',     // Разрешаем console.log
    'no-debugger': 'warn'    // Предупреждаем о debugger
  }
}

Если вы включаете Prettier, он часто добавляется через специальный пресет и плагин, чтобы ESLint и Prettier не конфликтовали друг с другом.

Тестирование: unit и e2e

Vue CLI может сразу подготовить окружение для тестирования:

unit-тесты (например, Jest)
e2e-тесты (например, Cypress)

Юнит-тесты с Jest

При выборе Jest в мастере создается команда:

npm run test:unit

Пример простого юнит-теста компонента:

// tests/unit/HelloWorld.spec.js

// Здесь мы импортируем функции тестового раннера и компонент
import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('рендерит переданный props msg', () => {
    const msg = 'Привет Vue'
    // Монтируем компонент с тестовым пропсом
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    })
    // Проверяем, что текст компонента содержит переданное сообщение
    expect(wrapper.text()).toMatch(msg)
  })
})

Как видите, этот код проверяет, что компонент правильно отображает значение пропса msg.

E2E-тесты с Cypress

Если вы выбрали Cypress:

npm run test:e2e

Cypress откроет специальное окно, где вы сможете запускать интеграционные тесты, которые взаимодействуют с реальным браузерным окружением.

Режим библиотеки и сборка отдельных компонентов

Vue CLI позволяет не только собирать SPA-приложения, но и создавать библиотеки компонентов.

Например, у вас есть компонент, который вы хотите распространять как npm-пакет.

Давайте посмотрим, как это выглядит на практике.

Пример сборки библиотеки

Предположим, у вас есть src/components/MyButton.vue. Вы можете настроить в package.json отдельный скрипт:

{
  "scripts": {
    "build:lib": "vue-cli-service build --target lib --name my-lib src/components/MyButton.vue"
  }
}

Комментарии:

--target lib — говорит Vue CLI, что мы собираем библиотеку
--name my-lib — имя выходной библиотеки
src/components/MyButton.vue — точка входа (может быть и index.js, который экспортирует несколько компонентов)

Запуск:

npm run build:lib

Результат:

в dist появятся файлы, которые можно публиковать в npm
эти файлы можно будет подключать как обычную Vue-библиотеку

Графический интерфейс vue ui

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

Запустить его очень просто:

vue ui

После запуска:

откроется браузер на локальном адресе (обычно http://localhost:8000)
вы увидите список проектов
сможете создавать новые проекты, настраивать плагины, скрипты, окружения

Через GUI удобно:

добавлять плагины без запоминания команд
смотреть логи сборки
управлять параметрами конфигурации
следить за зависимостями и обновлениями

Этот инструмент особенно полезен, если вы только начинаете и хотите визуально видеть, что происходит с проектом.

Заключение

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

Вы можете:

за минуты поднять новый проект с нужной архитектурой
гибко настраивать Webpack и дев-сервер при необходимости
использовать плагины для подключения TypeScript, Router, PWA, тестов и других возможностей
управлять переменными окружения и конфигурацией для разных режимов (dev, test, prod)
собирать как полноценные SPA-приложения, так и библиотеки компонентов

Далее вы можете углубляться в конкретные аспекты: оптимизацию сборки, написание собственных плагинов, продвинутую работу с пресетами и интеграцию с CI/CD. Но даже базовый набор возможностей Vue CLI уже значительно упрощает жизнь разработчику и позволяет сосредоточиться на логике приложения, а не на настройке инфраструктуры.

Частозадаваемые технические вопросы по Vue CLI

Как изменить порт дев-сервера, не редактируя vue.config.js?

Можно передать переменную окружения при запуске:

PORT=8081 npm run serve
# Дев-сервер запустится на порту 8081

Если вы используете Windows без WSL, удобнее прописать порт в package.json:

{
  "scripts": {
    "serve": "vue-cli-service serve --port 8081"
  }
}

Как запустить дев-сервер по HTTPS?

Создайте или получите сертификаты (key.pem и cert.pem), затем добавьте в vue.config.js:

module.exports = {
  devServer: {
    https: {
      key: fs.readFileSync('./certs/key.pem'),
      cert: fs.readFileSync('./certs/cert.pem')
    }
  }
}

Или проще:

module.exports = {
  devServer: {
    https: true
  }
}

Во втором случае CLI сам сгенерирует самоподписанный сертификат.

Как использовать алиас @ для тестов (Jest), чтобы пути совпадали с приложением?

В jest.config.js добавьте:

module.exports = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  }
}

Теперь импорт вида import Comp from '@/components/Comp.vue' будет корректно работать в тестах.

Как добавить поддержку SCSS, если я не выбрал препроцессор при создании проекта?

Установите зависимости:

npm install -D sass sass-loader

После этого можно использовать в .vue файлах без дополнительной конфигурации, Vue CLI сам подхватит лоадер.

Как ограничить размер бандла и получать предупреждения при его превышении?

Используйте chainWebpack в vue.config.js:

module.exports = {
  chainWebpack: config => {
    config.performance
      .maxEntrypointSize(300000) // лимит для точки входа
      .maxAssetSize(300000)      // лимит для файла-ассета
  }
}

При сборке вы получите предупреждения, если размер будет превышен, и сможете оптимизировать зависимости или код.