Vue 3: установка, настройка и запуск проекта (через Vite и Node.js)

Давайте разберём пошагово, как установить Node.js, управлять его версиями через nvm, и создать чистый проект Vue 3 с помощью Vite.

🧩 1. Что такое Node.js

Node.js — это среда выполнения JavaScript вне браузера.

С его помощью можно:

запускать JS-код на сервере;
управлять зависимостями через npm;
использовать сборщики и инструменты (Vite, Webpack, ESLint и т.д.).

Vue 3 использует Node.js для:

установки библиотек (npm install);
сборки и запуска проекта (npm run dev);
оптимизации кода для продакшена (npm run build).

⚙️ 2. Установка Node.js

Способ 1: установка с официального сайта

Перейдите на https://nodejs.org/ и скачайте LTS (Long-Term Support) версию.
Установите с настройками по умолчанию.

Проверьте установку:

node -v
npm -v

🔁 3. Управление версиями Node.js через NVM

NVM (Node Version Manager) — это инструмент, позволяющий устанавливать и переключать разные версии Node.js.
Очень удобно, если вы работаете над несколькими проектами, требующими разные версии Node.

Установка NVM

macOS / Linux:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash

После установки обновите терминал:

source ~/.bashrc

Windows:

Скачайте и установите nvm-windows.

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

nvm install 20          # Установить Node.js 20
nvm use 20              # Переключиться на Node.js 20
nvm ls                  # Посмотреть установленные версии
nvm uninstall 18        # Удалить Node.js 18

⚡ 4. Создание проекта Vue 3 с помощью Vite

Vite — это современный сборщик (бандлер) и сервер для разработки.
Он используется по умолчанию в Vue 3, обеспечивая мгновенную перезагрузку и быструю сборку.

Установка через npm

Создайте новый проект:

npm create vite@latest

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

имя-проекта

Выберите фреймворк:

✔ Select a framework: › Vue
✔ Select a variant: › JavaScript

Перейдите в каталог проекта:

cd имя-проекта

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

npm install

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

npm run dev

После запуска появится сообщение вроде:

  VITE v5.0.0  ready in 300 ms
  ➜  Local:   http://localhost:5173/

Откройте этот адрес в браузере — и вы увидите стартовую страницу Vue 3.

📁 5. Структура проекта

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

имя-проекта/
├─ public/             # Статические файлы (favicon, изображения)
├─ src/                # Исходный код приложения
│  ├─ assets/          # Стили и картинки
│  ├─ components/      # Компоненты Vue
│  ├─ App.vue          # Главный компонент
│  └─ main.js          # Точка входа в приложение
├─ index.html          # Основной HTML-файл
├─ package.json        # Зависимости и скрипты npm
└─ vite.config.js      # Конфигурация Vite

🚀 6. Полезные npm-команды

npm run dev       # Запуск проекта в режиме разработки
npm run build     # Сборка проекта для продакшена
npm run preview   # Просмотр собранного проекта

Установка, настройка и запуск проекта