Всё, что нужно для начала работы с Vue.js в России 2025

Почему Vue.js?

• Простота и гибкость: Низкий порог входа по сравнению с React и Angular
• Популярность в России:
  • 133k+ проектов на Vue (BuiltWith, 2024).
  • Примеры: Сбер, Тинькофф, Газпром (используют Vue в отдельных сервисах)
• Сообщество: Активные русскоязычные чаты, митапы и конференции (Vue.js Moscow)

Статистика используемых фреймворков при создании сайтов от CloudFlare Используя сканер URL-адресов Cloudflare Radar, мы проанализировали сайты, связанные с 5000 крупнейших доменов, чтобы выявить наиболее популярные технологии, используемые в различных категориях

Установка и настройка

• Базовый стек:
  • Node.js + npm/yarn.
  • Vue CLI: npm create vue@latest.
• Структура проекта:
  • src/components, router, store (Pinia/Vuex).
• Рекомендуемые IDE:
  • VS Code + плагины (Volar, ESLint).

Рынок Vue.js в России: цифры и кейсы

• Статистика:
  • 62 из 182 российских IT-компаний используют Vue (Habr, 2024).
  • Средняя зарплата: 220–300k рублей для Middle-разработчиков (Geeklink, 2025).
• Кейсы:
  • Wildberries: Миграция части интерфейсов на Vue + Nuxt.js.
  • СберЛогистика: Внутренние инструменты на Vue 3 + TypeScript.

Vue.js vs React/Angular: что выбрать?

• Плюсы Vue.js:
  • Меньше boilerplate-кода, чем в Angular.
  • Интуитивный синтаксис шаблонов (ближе к HTML).
  • Легкая интеграция в legacy-проекты.
• Минусы:
  • Меньше вакансий, чем у React (соотношение 1:3 по данным hh.ru)

Основы Vue.js: старт за 3 шага

Создание компонента

<template>  
  <button @click="count++">{{ count }}</button>  
</template>  
<script setup>  
const count = ref(0);  
</script>  

Работа с состоянием: Pinia для управления данными

Pinia — это современная библиотека управления состоянием для Vue.js, которая является официальной заменой Vuex. Она предоставляет более простой и интуитивно понятный API. Вот пошаговое руководство по настройке Pinia в вашем проекте Vu

Установите Pinia

Сначала установите Pinia через npm или yarn:

npm install pinia
# или
yarn add pinia

Настройка Pinia в вашем проекте

Импортируйте и инициализируйте Pinia в вашем основном файле (например, main.js или main.ts)

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);
const pinia = createPinia();

app.use(pinia);
app.mount('#app');

Создание хранилища (Store)

Создайте хранилище для управления состоянием. Например, создадим файл src/stores/counter.js:

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    }
  },
  getters: {
    doubleCount: (state) => state.count * 2
  }
});

Использование хранилища в компонентах

Теперь вы можете использовать созданное хранилище в ваших компонентах. Например, в src/components/Counter.vue:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { useCounterStore } from '../stores/counter';
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const counterStore = useCounterStore();

    return {
      count: counterStore.$state.count,
      doubleCount: counterStore.doubleCount,
      increment: counterStore.increment,
      decrement: counterStore.decrement
    };
  }
});
</script>

Использование хранилища с Composition API

Если вы предпочитаете использовать Composition API, можно сделать это следующим образом:

<template>
  <div>
    <p>Count: {{ counterStore.count }}</p>
    <p>Double Count: {{ counterStore.doubleCount }}</p>
    <button @click="counterStore.increment">Increment</button>
    <button @click="counterStore.decrement">Decrement</button>
  </div>
</template>

<script>
import { useCounterStore } from '../stores/counter';
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const counterStore = useCounterStore();
    
    return {
      counterStore
    };
  }
});
</script>

Маршрутизация: Vue Router для SPA

Настройка маршрутизации в Vue.js с использованием Vue Router — это ключевой момент для создания одностраничных приложений (SPA)

Установка Vue Router

Если Vue CLI уже установлен, можно создать новый проект с маршрутизацией сразу:

vue create my-project
cd my-project
vue add router

Если проект уже существует, добавьте Vue Router:

npm install vue-router

Настройка Vue Router

После установки маршрутизатора создайте файл конфигурации маршрутов. Обычно это src/router/index.js:

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

Vue.use(Router);

export default new Router({
  mode: 'history', // Использование HTML5 History API
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/about',
      name: 'About',
      component: About,
    },
  ],
});

Подключение маршрутизатора к приложению

В src/main.js (или src/main.ts для TypeScript) подключите маршрутизатор:

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

Создание компонентов для маршрутов

Создайте компоненты для маршрутов. Например, Home.vue и About.vue в папке src/views:

Home.vue

<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to the home page!</p>
  </div>
</template>

<script>
export default {
  name: 'Home',
};
</script>

About.vue

<template>
  <div>
    <h1>About Page</h1>
    <p>This is the about page.</p>
  </div>
</template>

<script>
export default {
  name: 'About',
};
</script>

Добавление ссылок для навигации

Чтобы пользователи могли переходить между страницами, добавьте ссылки в шаблон вашего основного компонента (например, App.vue):

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
nav {
  margin-bottom: 20px;
}
nav a {
  margin-right: 10px;
}
</style>

Настройка серверного роутинга

Если ваше приложение развернуто на сервере, который не поддерживает HTML5 History API, необходимо настроить сервер для обработки маршрутов. Например, для сервера на базе Node.js с использованием Express:

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'dist')));

app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

const port = process.env.PORT || 8080;
app.listen(port, () => {
console.log(Server is running on port ${port});
});

Официальная документация

• Vue 3 (англ.):
  • Руководство — основы, компоненты, маршрутизация.
  • API — справочник по функциям и методам.
  • Примеры — готовые кейсы для обучения.
• Vue 3 (рус.):
  • Руководство — перевод официальной документации.
  • Способы использования — интеграция в проекты

Быстрый старт

• Создание проекта (англ.):
  • Vue CLI — шаблоны для SPA.
  • CDN — подключение без сборки.
• Русскоязычные гайды:
  • Первое приложение — установка и Hello World.

Инструменты

• DevTools:
  • Расширение для браузера — отладка состояний
• UI-библиотеки:
  • Vuetify — Material Design
  • Quasar — кроссплатформенные приложения

Сообщество

• Форум:
  • Официальный Discord — обсуждение с разработчиками
• Новости:
  • Блог Vue.js — анонсы обновлений

Примечание: Для Vue 2 используйте архивную документацию, но учтите, что поддержка прекращена с 31.12.2023.

Инструменты и экосистема

• Библиотеки:
  • Vuetify, Quasar — UI-фреймворки.
  • Nuxt.js — SSR и статическая генерация.
• DevTools:
  • Vue Devtools для отладки состояний и событий.

Где учиться?

• Бесплатно:
  • Официальная документация (переводы на русский).
  • Рубрика Vue с уроками для начинающих

Карьерные перспективы

• Требования работодателей:
  • Опыт с Vue 3, Pinia, TypeScript.
  • Примеры вакансий:
    • Middle Vue-разработчик (удалёнка, 200–350k руб).
    • Fullstack (Vue + Node.js) в fintech-стартапах.
• Советы:
  • Собирайте портфолио на GitHub: Todo-листы, интернет-магазины