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

Введение

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

Установка Vue CLI

Прежде чем приступить к созданию Vue-проекта, потребуется установить сам инструмент.

Глобальная установка

Vue CLI распространяется как npm-пакет. Убедитесь, что у вас установлен Node.js версии 8.9 или выше. Затем выполните команду:

npm install -g @vue/cli
# Если нужен доступ к GUI:
# npm install -g @vue/cli-service-global

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

vue --version
# Выведет, например: 5.0.8

Если команда vue недоступна — перезапустите терминал или добавьте папку npm глобальных модулей в PATH.

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

Теперь рассмотрим, как быстро развернуть новый проект.

Создание с помощью командной строки

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

vue create my-vue-app  # my-vue-app — имя каталога нового проекта

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

• Использовать "Default preset" (Babel + ESLint) или "Manually select features"

Если хотите полный контроль вы, как правило, выбираете ручной режим (Manually select features):

• Babel
• TypeScript
• Progressive Web App (PWA) Support
• Router
• Vuex
• CSS Pre-processors (Sass, Less, Stylus)
• Linter / Formatter
• Unit Testing
• E2E Testing

Вот пример, как выглядит выбор в терминале:

? Please pick a preset:
  Default ([Vue 3] babel, eslint)
❯ Manually select features

Затем CLI предложит выбрать конкретные опции. Вы можете определять структуру будущего проекта и даже сохранить выбранный пресет для будущего использования.

Настройки хранения конфигурации

Во время создания проекта Vue предложит сохранить настройки:

• В отдельных файлах (например, babel.config.js, eslint.config.js)
• В package.json

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

Кратко о структуре сгенерированного проекта

После создания вы увидите структуру примерно следующего вида:

my-vue-app/
├─ node_modules/       # зависимости npm
├─ public/             # статичные ресурсы (index.html и пр.)
├─ src/                # исходный код приложения
│  ├─ assets/
│  ├─ components/
│  ├─ App.vue
│  └─ main.js
├─ .gitignore
├─ babel.config.js     # опционально
├─ package.json
└─ README.md

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

• src/ — здесь основной код приложения
• public/ — статические файлы, favicon, основной HTML-шаблон
• package.json — зависимости, скрипты запуска
• babel.config.js, .eslintrc.js и другие — дополнительные настройки

Управляющие команды Vue CLI

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

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

В package.json уже имеются необходимые скрипты:

"scripts": {
  "serve": "vue-cli-service serve",     // запуск сервера разработки
  "build": "vue-cli-service build",     // сборка на прод
  "lint": "vue-cli-service lint"        // проверка кода
}

Запуск сервера разработки

npm run serve
# или
yarn serve

• Сервер обычно поднимается на http://localhost:8080/
• Изменения в исходниках отображаются мгновенно, благодаря hot reload

Сборка проекта

npm run build

После выполнения этой команды будет создан каталог dist/ со всеми собранными и оптимизированными файлами для деплоя.

Линтинг и автокоррекция кода

npm run lint
# Автоматическая фиксация:
npm run lint -- --fix

Добавление функциональности через плагин Vue CLI

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

Добавление роутера и Vuex

vue add router    # добавит vue-router и создаст файл конфигурации
vue add vuex      # добавит Vuex для управления состоянием приложения

• CLI задаст вам вопросы: нужна ли история, требуется ли создать демо-страницы и т. д.

Добавление других популярных плагинов

Примеры команд:

vue add eslint         # добавить или переустановить поддержку ESLint
vue add unit-jest      # подключить unit-тесты
vue add typescript     # перейти на TypeScript (будет произведена миграция файлов)
vue add pwa            # активировать поддержку PWA

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

Работа с графическим интерфейсом (Vue UI)

Для тех, кто не любит работать в консоли, в Vue CLI есть графический интерфейс.

Запуск Vue UI

vue ui

• Откроется окно в браузере (обычно http://localhost:8000/)
• Можно создавать, настраивать, запускать проекты и управлять зависимостями с помощью удобного интерфейса
• Включены визуальные инструменты мониторинга, настройки плагинов и анализ сборки

Конфигурирование и кастомизация проекта

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

Конфигурационный файл vue.config.js

Если проекту требуются дополнительные настройки, создайте в корне проекта файл vue.config.js.

Пример базовой конфигурации

// vue.config.js
module.exports = {
  publicPath: '/',            // Базовый URL для деплоя приложения
  outputDir: 'dist',          // Каталог сборки
  assetsDir: 'static',        // Каталог для статичных ресурсов (js, css, img)
  devServer: {
    port: 3000,               // Порт для сервера разработки
    proxy: 'http://localhost:8000' // Прокси для API-запросов
  },
  lintOnSave: false           // Отключение проверки ESLint при сохранении
};

Показываю вам, как с помощью vue.config.js можно быстро настраивать окружение под разные условия.

Расширение конфигурации webpack

Для особых случаев (например, подключение нестандартных лоадеров или алиасов) CLI поддерживает функцию configureWebpack или chainWebpack в файле vue.config.js.

Пример: Добавление alias

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@components': require('path').resolve(__dirname, 'src/components')
      }
    }
  }
};

Теперь вместо длинного относительного пути можно использовать короткое "@components/MyComponent".

Пример: Использование chainWebpack

module.exports = {
  chainWebpack: config => {
    // Добавляем новый loader для markdown
    config.module
      .rule('md')
      .test(/\.md$/)
      .use('raw-loader')
      .loader('raw-loader')
      .end();
  }
};

Этот подход особенно гибкий для сложных проектов.

Установка зависимостей и настройка CSS препроцессоров

Когда вы создаете новый проект, Vue CLI может автоматически добавить поддержку препроцессоров (Sass, Less, Stylus).

Как добавить препроцессор в существующий проект

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

Пример для Sass

npm install -D sass sass-loader

Пример для Less

npm install -D less less-loader

Теперь используйте расширения .scss или .less в ваших компонентах Vue:

<style lang="scss">
// Теперь можно использовать синтаксис Sass внутри <style>
$color: red;
body { color: $color; }
</style>

Управление зависимостями и добавление библиотек

Работа с зависимостями не отличается от других проектов на Node.js:

Установка новых библиотек

npm install axios   # пример — подключаем axios для HTTP-запросов
npm install lodash  # другая популярная библиотека
npm install moment  # библиотека для работы с датами

Подключайте новую библиотеку в компоненте:

import axios from 'axios';

// Пример запроса внутри метода компонента
methods: {
  fetchData() {
    axios.get('https://api.example.com/data')
      .then(response => {
        this.data = response.data;
      });
  }
}

Настройка окружений (development, production и пр.)

Vue CLI поддерживает разные конфигурации для окружения:

• .env — глобальные переменные окружения
• .env.development — переменные для dev-режима
• .env.production — для production

Пример переменных окружения

# .env.production
VUE_APP_API_URL=https://api.prod.example.com

В коде используйте:

const baseUrl = process.env.VUE_APP_API_URL; // Получаем адрес API из переменной

CLI по умолчанию пропускает только переменные, начинающиеся с VUEAPP (остальные проигнорируются для безопасности).

Сборка и деплой

Когда проект готов — остается собрать и опубликовать результат.

Сборка на продакшн

npm run build
# Создает папку dist/ с итоговыми файлами

Деплой на сервер

• Содержимое папки dist/ скопируйте на сервер (Apache, nginx, Netlify, Vercel и т.д.)
• Для SPA можно настроить redirect всех запросов на index.html

Пример для nginx:

location / {
  try_files $uri $uri/ /index.html;
}

Работа с Typescript в Vue CLI

Vue CLI позволяет прямо из мастера создания подключить поддержку TypeScript, либо добавить ее позже командой:

vue add typescript

После этого файлы *.vue и скриптов можно писать на TS. CLI добавит tsconfig.json и пересоберет имеющиеся JS-файлы в TS-шаблоны.

Кастомные шаблоны проектов

Vue CLI поддерживает создание собственных шаблонов проектов.

Как использовать сторонний шаблон

vue create --preset username/repo#branch my-app
# или
vue create --preset ./local-preset my-app

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

Заключение

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

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

Как добавить поддержку SCSS/Sass в уже созданный проект, если изначально не выбрал?

Установите нужные пакеты:

npm install -D sass sass-loader

Перезапустите сервер разработки. После этого используйте <style lang="scss"> или <style lang="sass"> внутри файлов *.vue.

Как сбросить кэш vue-cli или решить проблемы странных зависимостей?

Иногда помогает удаление node_modules и package-lock.json/yarn.lock:

rm -rf node_modules
rm package-lock.json    # или yarn.lock
npm install

Если баги воспроизводятся при работе с vue-cli глобально — обновите cli:

npm uninstall -g @vue/cli
npm install -g @vue/cli

Где и как хранить секретные ключи или переменные окружения в проекте Vue?

В открытых репозиториях не используйте .env прямо с секретами. Задавайте переменные без чувствительных данных или используйте отдельные файлы .env.local, которых нет в VCS. Все переменные должны начинаться с VUEAPP, чтобы попасть в сборку.

Как изменить порт разработки по умолчанию с 8080 на другой?

Создайте или измените vue.config.js:

module.exports = {
  devServer: {
    port: 3001 // Здесь укажите нужный порт
  }
}

Перезапустите сервер разработки.

Как включить поддержку многословных алиасов (например, @utils/helper) в проекте?

В vue.config.js добавьте свой алиас через configureWebpack или chainWebpack:

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@utils': path.resolve(__dirname, 'src/utils/')
      }
    }
  }
}

Не забудьте импортировать path: const path = require('path');