Как создать новый проект Vue
Первое, с чем сталкивается разработчик в начале работы — создание нового проекта на базе Vue или интеграция фреймворка в уже существующий проект.
Vue позволяет как построить всё приложение целиком, так и использовать отдельные компоненты, встраивая их в готовый проект.
Создать новый проект Vue можно несколькими способами:
- С помощью npm init vue@latest.
- С помощью vite.js.
- С помощью vue cli.
- Создав собственную конфигурацию.
В следующих демонстрациях мы покажем процесс создания нового проекта Vue, а также способ добавления отдельного компонента в существующий проект.
Демонстрации носят ознакомительный характер и показывают создание проекта с помощью различных инструментов. Рабочие проекты мы настроим далее в этом разделе.
Для работы потребуются node.js и npm. Убедитесь, что у вас установлена версия node.js >= 18.
Для проверки версии node.js выполните команду:
node --version
Если у вас актуальная версия node.js, можно переходить к следующей статье.
Установка и настройка Node.js
nvm
Для удобного управления версиями Node.js рекомендуем использовать Node Version Manager.
После установки nvm вы можете установить нужную версию Node.js командой nvm install {версия Node.js}
nvm install 16 — установит последнюю версию для Node.js 16
nvm install 16.15.0 — установит точную версию Node.js 16.15.0
Для переключения между версиями используйте команду nvm use {версия Node.js}
nvm use 16 — переключит на версию Node.js 16.x.x
nvm use 14 — переключит на версию Node.js 14.x.x
nvm use 16.15.0 — переключит на версию Node.js 16.15.0
Node.js
Также можно установить Node.js напрямую. Для этого перейдите на официальный сайт и следуйте инструкциям установщика для вашей операционной системы.
Установка Node Package Manager
После установки node.js устанавливать npm отдельно не требуется. Проверьте корректность установки npm:
npm --version