Vue.js для начинающих: что это за фреймворк и как создать первый проект

Vue.js (читается «вью») — бесплатный JavaScript-фреймворк для создания интерфейсов сайтов и веб-приложений. Вы описываете в шаблоне, как должна выглядеть страница, а Vue сам перерисовывает её, когда меняются данные.

Начать можно двумя путями. Для пробы хватит одной строки <script> с CDN в обычном HTML-файле. Для настоящего проекта нужен Node.js и команда npm create vue@latest: через пару минут у вас будет рабочее приложение на Vue 3 с настроенной сборкой.

Ниже оба способа по шагам, основы синтаксиса, первое приложение со списком задач и ошибки, на которых новички теряют больше всего времени. Если вы пока не уверены в самом языке, сначала посмотрите, зачем новичку учить JavaScript и что на нём пишут.

CheckroiПодборка курсов по Vue.js29 курсов • 11 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Что такое Vue.js простыми словами

Представьте страницу интернет-магазина. Покупатель кладёт товар в корзину, и в шапке должен поменяться счётчик, в боковой панели сумма, а на кнопке надпись «В корзине». На чистом JavaScript каждое такое место вы ищете в DOM-дереве и правите руками.

Во Vue вы меняете одну переменную, а все места, где она выведена, обновятся сами. Это и есть реактивность, главная идея фреймворка.

Ещё три свойства, которые отличают Vue:

• Декларативный шаблон. Разметка пишется почти обычным HTML, а данные подставляются в двойные фигурные скобки: {{ price }}.
• Прогрессивность. Vue можно подключить к одной странице готового сайта и оживить, например, форму. А можно собрать на нём целое одностраничное приложение (SPA) с роутингом и хранилищем данных.
• Однофайловые компоненты. Шаблон, логика и стили одного блока интерфейса лежат в одном файле с расширением .vue.

Фреймворк создал Эван Ю (Evan You). Раньше он работал в Google с AngularJS и захотел взять из него только самое удобное, без лишней тяжести. Первая версия вышла в феврале 2014 года, это зафиксировано в английской «Википедии».

Какую версию учить. Только Vue 3. Он вышел 18 сентября 2020 года, актуальная стабильная версия на 15 октября 2026 года 3.5.44 (страница пакета в npm), версия 3.6 пока в статусе release candidate. У Vue 2 поддержка закончилась 31 декабря 2023 года: обновлений и исправлений больше не будет.

Официальная документация есть на русском: ru.vuejs.org. Её стоит держать открытой с первого дня, примеры там короткие и рабочие. Из России русская версия иногда открывается не с первого раза: если страница не загрузилась, обновите её или откройте тот же раздел на английском сайте vuejs.org, адреса страниц там совпадают.

Чем Vue отличается от React и Angular

Все три инструмента решают одну задачу: собирают интерфейс из компонентов и следят за данными. Разница в подходе и в том, сколько готовых решений идёт «в коробке».

Если вы уже знаете HTML и немного JavaScript, Vue обычно даётся быстрее остальных. Про второй популярный путь подробно рассказали в статье о React-разработчике.

Что нужно знать и установить до начала

Фреймворк не заменяет основы, он стоит поверх них. Перед первым проектом проверьте три вещи:

1. Базовый HTML и CSS. Теги, классы, подключение стилей. Шаблон Vue и есть HTML с добавками.
2. JavaScript на уровне переменных, функций, массивов и объектов. Методы filter, map, push встретятся в первом же примере. Если добавить объект в массив пока сложно, начните с этого или подтяните язык на курсах JavaScript.
3. Node.js нужной версии. Для проекта через create-vue официальное руководство требует Node.js ^22.18.0 || >=24.12.0 («Быстрый старт» Vue). Скачать его можно на nodejs.org, вместе с ним ставится npm.

Проверить, что Node.js установлен, можно в терминале:

node -v
npm -v

Если в ответ пришли номера версий, всё готово. В качестве редактора подойдёт Visual Studio Code с расширением Vue — Official: эту связку команда Vue называет рекомендуемой в «Быстром старте». Другие варианты мы сравнили в обзоре редакторов кода для веб-разработки.

Способ 1: подключить Vue через CDN

Этот вариант не требует Node.js и сборки. Он подходит, чтобы попробовать Vue за пять минут или добавить немного интерактива на готовую страницу.

1. Создайте файл index.html в любой папке. Как это сделать в разных системах, есть в инструкции о создании HTML-файла.
2. Вставьте в него код ниже.
3. Откройте файл в браузере двойным щелчком и нажмите кнопку.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Первое приложение на Vue</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ title }}</h1>
    <p>Нажатий: {{ count }}</p>
    <button @click="count++">Нажми меня</button>
  </div>

  <script>
    const { createApp, ref } = Vue

    createApp({
      setup() {
        const title = ref('Привет, Vue!')
        const count = ref(0)
        return { title, count }
      }
    }).mount('#app')
  </script>
</body>
</html>

Что здесь происходит. Строка <script src="…vue.global.js"> загружает Vue с CDN unpkg, именно этот адрес приводит официальная документация. Функция createApp создаёт приложение, а mount('#app') отдаёт ему блок с id="app".

Функция ref(0) заводит реактивную переменную. Директива @click="count++" увеличивает её по щелчку, и Vue сам обновляет текст «Нажатий» на странице.

Минус способа: однофайловые компоненты .vue так не работают, им нужна сборка. Для учебного проекта переходите ко второму способу.

Способ 2: создать проект через create-vue

Так создают настоящие приложения. Официальный инструмент create-vue разворачивает проект на сборщике Vite с готовой структурой папок.

1. Откройте терминал в папке, где будут лежать ваши проекты, и выполните:

   npm create vue@latest

2. Ответьте на вопросы мастера. Они на английском, русского перевода у create-vue нет. Разбор вопросов сразу под списком.
3. Перейдите в папку проекта, установите зависимости и запустите сервер разработки:

   cd vue-start
   npm install
   npm run dev

4. Откройте в браузере адрес из терминала, по умолчанию это http://localhost:5173/.

Вот что спрашивает актуальная версия create-vue и что отвечать на старте:

В списке функций курсор двигают стрелками, пункт отмечают пробелом, выбор подтверждают клавишей Enter. Роутер и Pinia позже можно добавить в готовый проект.

Важная деталь: флаг npm create vue@latest -- --default создаёт проект без вопросов, но сразу на TypeScript. В папке src появляется main.ts вместо main.js. Если пока учите только JavaScript, проходите мастер по вопросам. А когда дойдёте до типизации, загляните в разбор что такое TypeScript.

После npm run dev в браузере откроется стартовая страница с логотипом и надписью «You did it!». Значит, проект собрался.

Из чего состоит проект

Когда приложение готово к выкладке, команда npm run build собирает его в папку dist. Эти файлы уже можно положить на любой хостинг.

Основы Vue: шаблон, реактивность и директивы

Файл .vue состоит из трёх блоков: <script setup> с логикой, <template> с разметкой и <style> со стилями. Атрибут scoped у стилей означает, что они действуют только на этот компонент.

Реактивные данные

Переменную, за которой Vue должен следить, создают функцией ref. В скрипте её значение читают и меняют через .value, а в шаблоне пишут просто имя:

<script setup>
import { ref, computed } from 'vue'

const price = ref(1200)
const qty = ref(2)
const total = computed(() => price.value * qty.value)
</script>

<template>
  <p>Итого: {{ total }} ₽</p>
</template>

computed создаёт вычисляемое значение. Оно пересчитывается само, когда меняется price или qty, и не пересчитывается лишний раз, если они не менялись. Подробнее об этом в разделе «Основы реактивности» на сайте Vue.

Директивы, которые нужны с первого дня

Директивами называют специальные атрибуты с приставкой v-. Они говорят Vue, что сделать с элементом.

v-if или v-show. Как описано в руководстве Vue, v-if создаёт и удаляет элемент целиком, а v-show всегда оставляет его в DOM и переключает только CSS-свойство display.

Директива @click заменяет ручной addEventListener, а v-if избавляет от поиска элемента и правки его стилей. Как то же самое делают на чистом JavaScript, показано в статье про DOM-дерево.

Решение: если блок переключают часто (выпадающее меню, вкладки), берите v-show. Если условие редко меняется после загрузки, подойдёт v-if.

Компоненты, props и события

Интерфейс на Vue собирают из компонентов, как из кубиков: шапка, карточка товара, форма. Один компонент можно вывести сколько угодно раз, а данные в него передают через props (входные параметры).

Обратно, от дочернего компонента к родителю, данные идут событием. Вот карточка товара ProductCard.vue, которая принимает название и цену и сообщает родителю о нажатии кнопки:

<script setup>
defineProps({
  title: String,
  price: Number
})
const emit = defineEmits(['buy'])
</script>

<template>
  <div class="card">
    <h3>{{ title }}</h3>
    <p>{{ price }} ₽</p>
    <button @click="emit('buy', title)">Купить</button>
  </div>
</template>

Родитель выводит две карточки и запоминает, что выбрал покупатель:

<script setup>
import { ref } from 'vue'
import ProductCard from './components/ProductCard.vue'

const lastBought = ref('')
</script>

<template>
  <ProductCard title="Наушники" :price="4990" @buy="lastBought = $event" />
  <ProductCard title="Клавиатура" :price="3200" @buy="lastBought = $event" />
  <p v-if="lastBought">Вы выбрали: {{ lastBought }}</p>
</template>

Обратите внимание на двоеточие в :price="4990". Без него Vue передаст строку «4990», а с ним число. После щелчка по второй кнопке под карточками появится строка «Вы выбрали: Клавиатура».

Цены здесь записаны прямо в шаблоне. В живом проекте их присылает сервер, например на Node.js, а компонент только выводит то, что получил.

Options API и Composition API

Компонент во Vue можно написать в двух стилях. В Options API логика раскладывается по объекту с полями data, methods, computed. В Composition API вы импортируете функции ref и computed и пишете всё внутри <script setup>, как в примерах этой статьи.

Документация советует новичкам брать тот стиль, который кажется понятнее, ведь большинство основных понятий у них общие («Какой стиль выбрать?»). Демо-код create-vue написан на Composition API, поэтому учиться удобнее на нём.

Рядом с Vue вам встретятся и другие инструменты: сборщики, библиотеки, соседние фреймворки. Самые ходовые разобраны в обзоре сервисов для программирования.

Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в канал→

Первое приложение: список задач на Vue

Соберём компонент, в котором есть всё из раздела выше: поле ввода, список, отметка о выполнении, удаление и счётчик оставшихся задач. Создайте файл src/components/TodoList.vue:

<script setup>
import { ref, computed } from 'vue'

const newTask = ref('')
const tasks = ref([
  { id: 1, text: 'Установить Node.js', done: true },
  { id: 2, text: 'Создать проект на Vue', done: false }
])

const left = computed(() => tasks.value.filter(t => !t.done).length)

function addTask() {
  if (!newTask.value.trim()) return
  tasks.value.push({ id: Date.now(), text: newTask.value.trim(), done: false })
  newTask.value = ''
}

function removeTask(id) {
  tasks.value = tasks.value.filter(t => t.id !== id)
}
</script>

<template>
  <section class="todo">
    <h2>Мои задачи</h2>

    <form @submit.prevent="addTask">
      <input v-model="newTask" placeholder="Что сделать?" />
      <button type="submit">Добавить</button>
    </form>

    <ul v-if="tasks.length">
      <li v-for="task in tasks" :key="task.id" :class="{ done: task.done }">
        <input type="checkbox" v-model="task.done" />
        {{ task.text }}
        <button @click="removeTask(task.id)">×</button>
      </li>
    </ul>
    <p v-else>Задач нет, можно отдыхать</p>

    <p>Осталось: {{ left }}</p>
  </section>
</template>

<style scoped>
.done {
  text-decoration: line-through;
  color: #999;
}
</style>

Теперь замените содержимое src/App.vue, чтобы на странице был только наш компонент:

<script setup>
import TodoList from './components/TodoList.vue'
</script>

<template>
  <TodoList />
</template>

Стартовые стили демо-проекта подключаются в src/main.js строкой import './assets/main.css'. Удалите её, иначе к списку применится оформление демо-страницы: на широком экране она раскладывает содержимое в две колонки.

Как это работает:

• v-model="newTask" записывает текст поля в переменную, а @submit.prevent не даёт форме перезагрузить страницу.
• v-for выводит задачи, :key="task.id" помогает Vue не путать строки при удалении.
• :class="{ done: task.done }" добавляет класс зачёркивания, когда стоит галочка.
• left через computed пересчитывается при каждой отметке, без единой строки ручного обновления.

Добавьте задачу «Разобраться с v-for» и отметьте вторую: счётчик сразу покажет «Осталось: 1».

Частые ошибки новичков и как их исправить

Эти пять встречаются чаще всего. Сообщения об ошибках приведены в том виде, в каком их показывает консоль браузера.

Белая страница при открытии index.html

Симптом: открыли index.html проекта create-vue двойным щелчком, а в браузере пусто. Причина: браузер не умеет читать файлы .vue, их сначала обрабатывает сборщик.

Решение: запускайте npm run dev и открывайте адрес из терминала. Двойной щелчок работает только для варианта с CDN.

Сравнение с ref всегда даёт false

В скрипте написали if (count > 5), а условие не срабатывает. Функция ref() возвращает объект-обёртку, а само число лежит в его поле value. При count = ref(10) выражение count > 5 возвращает false, а count.value > 5 возвращает true.

Решение: в <script> всегда пишите .value, в <template> не пишите никогда.

v-if и v-for на одном элементе

Хотели показать только выполненные задачи и написали <li v-for="task in tasks" v-if="task.done">. Во Vue 3 директива v-if срабатывает раньше v-for, переменной task в этот момент ещё нет:

[Vue warn]: Property "task" was accessed during render but is not defined on instance.
Cannot read properties of undefined (reading 'done')

Решение: отфильтруйте список через computed и выводите уже его. Либо перенесите v-for на обёртку <template>, а v-if оставьте на <li>.

Код из старого урока не запускается

В уроках по Vue 2 приложение создаётся через new Vue({ el: '#app' }). В Vue 3 такой записи нет, и консоль выдаёт TypeError: Vue is not a constructor.

Решение: используйте createApp(…).mount('#app') и проверяйте дату урока. Всё, что написано до осени 2020 года, почти наверняка про Vue 2.

npm ругается на версию Node.js

create-vue и созданный им проект указывают поддерживаемые версии Node.js в поле engines файла package.json. Это поле, по документации npm, носит рекомендательный характер: установка не прервётся, но в терминале появятся строки npm warn EBADENGINE Unsupported engine. А вот сервер разработки на слишком старой версии Node.js может и не стартовать.

Решение: обновите Node.js до версии из «Быстрого старта» (сейчас ^22.18.0 || >=24.12.0) и заново выполните npm install.

Что изучать после основ

Когда список задач работает, база у вас есть. Дальше по мере роста проекта пригодятся официальные библиотеки и инструменты:

• Vue Router: несколько страниц внутри одного приложения: каталог, карточка товара, профиль.
• Pinia: общее хранилище данных для разных компонентов. По документации Vue, её поддерживает основная команда, а прежняя библиотека Vuex перешла в режим поддержки.
• Nuxt: фреймворк поверх Vue с серверным рендерингом. Нужен, когда важна индексация поисковиками.
• Vue DevTools: панель отладки, показывает дерево компонентов и их данные. В проекте create-vue она уже подключена.
• Vitest: тесты для компонентов, его можно выбрать прямо в мастере create-vue.

Vue почти никогда не учат отдельно от профессии: его берут фронтенд-разработчики вместе с вёрсткой, TypeScript и работой с API. Чем занимается такой специалист, разобрали в статье о frontend-разработчике, а пошаговый маршрут от HTML до первого оффера есть в плане как стать фронтенд-разработчиком.

Где освоить Vue.js системно

По статье и документации можно собрать первые компоненты. Но настоящий проект требует ревью кода, задач посложнее и понимания, как Vue живёт рядом с API, роутингом и сборкой. Это проще пройти на курсе, где проверяют домашние задания.

В каталоге курсов по Vue.js программы разных школ стоят рядом: можно сравнить программу, длительность и цену. Если хотите сразу профессию целиком, смотрите курсы фронтенд-разработчика.

Курс	Школа	Стоимость со скидкой	В рассрочку	Длитель­ность	Обзор курса от Checkroi
Vue.js разработчик Перейти на сайт курса	OTUS	55 000 ₽	5500 ₽/мес.	4 месяца	Обзор курса
Фреймворк Vue.js Перейти на сайт курса	Skillbox	23 317 ₽	3886 ₽/мес.	2 месяца	Обзор курса
Vue.js 3, Vue Router и Pinia Перейти на сайт курса	PurpleSchool	3999 ₽	2749 ₽/мес.	2 месяца	Обзор курса
Инженер-программист Перейти на сайт курса	GeekBrains	159 408 ₽	4428 ₽/мес.	12 месяцев	Обзор курса
Профессия «Fullstack-разработчик на PHP» Перейти на сайт курса	Skillbox	166 715 ₽	5378 ₽/мес.	12 месяцев	Обзор курса

• 

  Vue.js разработчик

  OTUS55 000 ₽5500 ₽/мес4 месяца
  Перейти на сайт курсаОбзор
• 

  Фреймворк Vue.js

  Skillbox23 317 ₽3886 ₽/мес2 месяца
  Перейти на сайт курсаОбзор
• 

  Vue.js 3, Vue Router и Pinia

  PurpleSchool3999 ₽2749 ₽/мес2 месяца
  Перейти на сайт курсаОбзор
• 

  Инженер-программист

  GeekBrains159 408 ₽4428 ₽/мес12 месяцев
  Перейти на сайт курсаОбзор
• 

  Профессия «Fullstack-разработчик на PHP»

  Skillbox166 715 ₽5378 ₽/мес12 месяцев
  Перейти на сайт курсаОбзор

Больше программ — в полном каталоге курсов по Vue.js