Справочник по IT

Русский

Українська
English

Русский

Українська
English

Appearance

Основы Vue.js: Vue CLI ​

Vue CLI — это стандартный инструментарий для разработки на Vue.js. Он предоставляет:

  • Быструю настройку проекта: Генерация каркаса нового проекта с базовой конфигурацией.
  • Готовую систему сборки: Преднастроенный Webpack с разумными дефолтными настройками.
  • Возможность расширения: Система плагинов для добавления дополнительных функций (Babel, TypeScript, ESLint, Vue Router, Vuex и др.).
  • Графический интерфейс (Vue UI): Визуальный инструмент для управления проектами.
  • Мгновенную прототипизацию: Возможность быстро создавать прототипы однофайловых компонентов (.vue) без полной настройки проекта.

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

Для использования Vue CLI необходимо установить его глобально с помощью npm или yarn:

bash
npm install -g @vue/cli
# или
yarn global add @vue/cli

После установки вы сможете использовать команду vue в вашей командной строке. Чтобы проверить установленную версию, выполните:

bash
vue --version

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

Для создания нового проекта Vue.js используйте команду vue create <project-name>, где <project-name> — это имя вашего проекта.

bash
vue create my-vue-app

При выполнении этой команды Vue CLI предложит вам выбрать предустановленный шаблон (preset) или вручную выбрать необходимые функции.

Предустановленные шаблоны (Presets) ​

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

  • default (babel, eslint): Базовая настройка с Babel (для поддержки современного JavaScript в старых браузерах) и ESLint (для линтинга кода).
  • default (babel, eslint) - In history mode?: То же, что и default, но с запросом, следует ли использовать режим истории браузера для Vue Router (требует настройки сервера для SPA).

Ручная настройка (Manually select features) ​

Если вы выберете "Manually select features", Vue CLI предложит вам список функций, которые вы можете добавить в свой проект:

  • Babel: Транспиляция JavaScript.
  • TypeScript: Поддержка строго типизированного JavaScript.
  • Progressive Web App (PWA) Support: Добавление возможностей PWA.
  • Vue Router: Официальная библиотека маршрутизации для Vue.js.
  • Vuex: Официальная библиотека управления состоянием для Vue.js.
  • CSS Pre-processors: Поддержка CSS-препроцессоров (Sass/SCSS, Less, Stylus).
  • Linter / Formatter: Инструменты для линтинга и форматирования кода (ESLint, Prettier).
  • Unit Testing: Поддержка модульного тестирования (Jest, Mocha).
  • E2E Testing: Поддержка сквозного тестирования (Cypress, Nightwatch).

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

Структура проекта Vue CLI (по умолчанию) ​

После успешного создания проекта вы увидите следующую структуру каталогов (может немного отличаться в зависимости от выбранных функций):

my-vue-app/
├── public/
│   └── index.html
│   └── favicon.ico
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   └── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── yarn.lock (или package-lock.json)
  • public/: Содержит статические ресурсы, которые копируются непосредственно в финальную сборку (например, index.html, favicon.ico).
  • src/: Основная директория с исходным кодом вашего приложения.
    • assets/: Ресурсы, которые обрабатываются Webpack (например, изображения).
    • components/: Каталог для ваших многократно используемых Vue-компонентов.
    • App.vue: Корневой компонент вашего приложения.
    • main.js: Точка входа приложения, где создается экземпляр Vue и подключаются плагины.
  • .gitignore: Файл, указывающий файлы и директории, которые Git должен игнорировать.
  • babel.config.js: Конфигурация Babel.
  • package.json: Файл с информацией о проекте и его зависимостях (npm или yarn).
  • README.md: Файл с описанием проекта.
  • yarn.lock / package-lock.json: Файлы блокировки версий зависимостей.

Если вы добавили Vue Router или Vuex, вы также увидите директории router/ и store/ внутри src/.

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

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

  • vue serve: Запускает локальный сервер разработки с горячей перезагрузкой (hot-reloading). Это означает, что при изменении файлов в src/ браузер автоматически обновится без полной перезагрузки страницы.

    bash
    cd my-vue-app
vue serve

    Обычно приложение будет доступно по адресу http://localhost:8080/.

  • vue build: Собирает ваше приложение для production. Результат сборки помещается в директорию dist/.

    bash
    vue build

    Вы можете использовать различные флаги для настройки сборки (например, --mode production, --dest my-output-dir).

  • vue inspect: Позволяет просмотреть финальную конфигурацию Webpack вашего проекта. Это полезно для понимания того, как Vue CLI настроил сборку, и для отладки проблем.

    bash
    vue inspect
vue inspect --plugins # Показать список плагинов Webpack
vue inspect --rule vue # Показать конфигурацию для обработки .vue файлов

  • vue add <plugin>: Устанавливает и добавляет плагин Vue CLI в ваш проект. Плагины могут предоставлять новые функции, добавлять зависимости и изменять конфигурацию проекта.

    bash
    vue add router # Добавить Vue Router
vue add vuex # Добавить Vuex
vue add @vue/cli-plugin-eslint # Добавить плагин ESLint

  • vue invoke <plugin> [options]: Вызывает установленный плагин для выполнения определенных действий или настройки.

    bash
    vue invoke eslint --config airbnb # Настроить ESLint с конфигурацией Airbnb

  • vue ui: Запускает графический интерфейс Vue CLI в вашем браузере. Vue UI предоставляет визуальный способ управления вашими проектами, установки плагинов, выполнения задач (serve, build, inspect) и многого другого.

    bash
    vue ui

    Обычно Vue UI будет доступен по адресу http://localhost:8000/.

Использование Vue UI ​

Vue UI предоставляет интуитивно понятный интерфейс для выполнения большинства задач Vue CLI без использования командной строки. Вы можете:

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

Расширение возможностей с помощью плагинов ​

Система плагинов Vue CLI позволяет легко расширять функциональность вашего проекта. Существует множество официальных и сторонних плагинов, которые могут добавить поддержку TypeScript, PWA, различных CSS-препроцессоров, инструментов тестирования и многого другого.

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

Мгновенная прототипизация ​

Vue CLI также предоставляет возможность быстро создавать прототипы однофайловых компонентов (.vue) без необходимости создавать полноценный проект. Для этого установите глобальный сервис прототипирования:

bash
npm install -g @vue/cli-service-global
# или
yarn global add @vue/cli-service-global

Затем вы можете перейти в директорию, содержащую ваш .vue файл, и запустить прототип с помощью команды vue serve <YourComponent.vue>.

bash
vue serve MyComponent.vue

Это запустит локальный сервер и отобразит ваш компонент.

Заключение ​

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