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

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

Установка Vue CLI выполняется через npm:

npm install -g @vue/cli

Проверка успешной установки:

vue --version

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

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

Создание проекта осуществляется командой:

vue create my-project

После выполнения команды CLI предложит выбрать предустановленные конфигурации или настроить проект вручную:

  • Default ([Vue 3] babel, eslint) — стандартная настройка для большинства приложений.
  • Manually select features — позволяет самостоятельно выбрать инструменты: TypeScript, Router, Vuex, Linter, Unit Testing и др.

При выборе ручной настройки можно включить следующие ключевые возможности:

  • Babel — для трансформации современного JavaScript в совместимый с браузерами код.
  • TypeScript — поддержка статической типизации.
  • Router — управление навигацией между страницами.
  • Vuex — централизованное хранение состояния приложения.
  • CSS Pre-processors — поддержка SCSS, LESS, Stylus.
  • Linter/Formatter — автоматическая проверка и форматирование кода.
  • Unit / E2E Testing — тестирование компонентов и интеграции.

После выбора настроек CLI создаст структуру проекта, установит зависимости и подготовит конфигурационные файлы.

Структура проекта Vue

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

my-project/
├─ node_modules/          # установленные зависимости
├─ public/                # статические файлы (index.html)
├─ src/                   # исходный код приложения
│  ├─ assets/             # изображения, шрифты, стили
│  ├─ components/         # Vue-компоненты
│  ├─ views/              # страницы приложения
│  ├─ router/             # маршруты (если подключен Vue Router)
│  ├─ store/              # состояние приложения (если подключен Vuex)
│  ├─ App.vue             # корневой компонент
│  └─ main.js             # точка входа приложения
├─ package.json           # описание проекта и зависимостей
├─ babel.config.js        # конфигурация Babel
└─ vue.config.js          # конфигурация Vue CLI (опционально)

Ключевые моменты структуры:

  • src/main.js — точка входа, где создается экземпляр приложения Vue и подключаются маршруты, store и плагины.
  • App.vue — корневой компонент, содержащий шаблон, логику и стили.
  • components/ — переиспользуемые компоненты, которые можно вставлять в другие компоненты или страницы.
  • views/ — крупные компоненты страниц для маршрутизации через Vue Router.

Настройка проекта

Vue CLI предоставляет файл конфигурации vue.config.js, где можно изменить поведение сборки, настроить прокси для API, изменить пути к ресурсам, подключить дополнительные плагины Webpack:

module.exports = {
  devServer: {
    proxy: 'http://localhost:3000'
  },
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "@/assets/styles/variables.scss";`
      }
    }
  }
}

Запуск проекта

Для локальной разработки используется команда:

npm run serve

CLI запустит локальный сервер, обычно доступный по адресу http://localhost:8080/. При внесении изменений страница обновляется автоматически благодаря встроенному hot-reload.

Сборка проекта для продакшн осуществляется командой:

npm run build

В результате создается папка dist/ с оптимизированными файлами для деплоя на сервер.

Работа с Vue CLI UI

Vue CLI включает графический интерфейс для управления проектом:

vue ui

Он позволяет:

  • Создавать и настраивать проекты через браузер.
  • Управлять зависимостями и плагинами.
  • Запускать задачи сборки и тестирования.
  • Просматривать конфигурацию Webpack и настройки проекта.

Подключение плагинов

Vue CLI поддерживает расширения через плагины. Например, для добавления Vue Router:

vue add router

Аналогично можно подключить Vuex, PWA или тестовые фреймворки. Плагины автоматически обновляют конфигурацию проекта и устанавливают необходимые зависимости.

Итоговая структура рабочего процесса

Работа с Vue CLI строится вокруг трёх этапов:

  1. Создание проекта — быстрая настройка шаблона с нужными инструментами.
  2. Разработка компонентов и маршрутов — построение интерфейса с использованием Vue-компонентов, Router и Vuex.
  3. Сборка и деплой — подготовка проекта для продакшн с оптимизированными ресурсами.

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

Оглавление