Как начнешь создавать приложения на Vue?

1.0 Junior🔥 61 комментариев

#Vue.js

Комментарии (1)

🐱

claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Как начнешь создавать приложения на Vue

Это классический вопрос на собеседовании, который показывает, как разработчик подходит к новой технологии. Ответ должен показать систематический подход, знание экосистемы Vue и понимание best practices современной разработки.

Шаг 1: Установка Node.js и npm

Первое, что нужно — убедиться, что установлены инструменты разработки:

# Проверяем Node.js
node --version  # v20.x или выше
npm --version   # 10.x или выше

# Если не установлено, скачиваем с https://nodejs.org

Node.js поставляется с npm, что позволяет управлять зависимостями и запускать скрипты.

Шаг 2: Выбор инструмента для создания проекта

На 2026 год есть несколько официальных способов:

Вариант 1: create-vue (официальный)

# Создаёт новый проект с интерактивным выбором опций
npm create vue@latest my-app

# Выбираем:
# - TypeScript? Yes
# - JSX Support? No
# - Routing (Vue Router)? Yes
# - Pinia? Yes (для state management)
# - Unit testing? Yes
# - End-to-End testing? Yes
# - Eslint? Yes

cd my-app
npm install
npm run dev

Вариант 2: Vite (современный и быстрый)

# Vite — самый быстрый сборщик
npm create vite@latest my-app -- --template vue
cd my-app
npm install
npm run dev

Вариант 3: Nuxt (для фулл-стак приложений)

# Если нужен SSR, SEO, и встроенная архитектура
npx nuxi init my-app
cd my-app
npm install
npm run dev

Для большинства случаев выбираю create-vue, потому что это официальный инструмент и самый гибкий.

Шаг 3: Структура проекта

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

my-app/
├── src/
│   ├── components/       # Переиспользуемые компоненты
│   ├── views/            # Страницы приложения
│   ├── stores/           # Pinia stores (state management)
│   ├── router/           # Vue Router конфигурация
│   ├── assets/           # Картинки, шрифты
│   ├── App.vue           # Корневой компонент
│   └── main.js           # Точка входа
├── public/               # Статические файлы
├── tests/                # Тесты
├── package.json          # Зависимости и скрипты
├── vite.config.js        # Конфигурация Vite
└── tsconfig.json         # Конфигурация TypeScript

Шаг 4: Изучение основ Vue

Простой компонент:

<!-- src/components/Counter.vue -->
<template>
  <div class="counter">
    <h2>Counter: {{ count }}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const count = ref(0);

const increment = () => count.value++;
const decrement = () => count.value--;
</script>

<style scoped>
.counter {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

button {
  margin: 0 5px;
  padding: 8px 16px;
}
</style>

Использование компонента:

<!-- src/App.vue -->
<template>
  <div id="app">
    <Counter />
  </div>
</template>

<script setup>
import Counter from './components/Counter.vue';
</script>

Шаг 5: Добавление Router'а (навигация)

Для многостраничного приложения нужен Vue Router:

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/users/:id', component: () => import('../views/User.vue') }
  ]
});

export default router;

Использование в main.js:

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

Шаг 6: Состояние приложения (Pinia)

Для управления глобальным состоянием используется Pinia:

// src/stores/user.js
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useUserStore = defineStore('user', () => {
  const user = ref(null);
  const isLoggedIn = computed(() => user.value !== null);
  
  const login = async (email, password) => {
    const response = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify({ email, password })
    });
    user.value = await response.json();
  };
  
  const logout = () => {
    user.value = null;
  };
  
  return { user, isLoggedIn, login, logout };
});

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

<script setup>
import { useUserStore } from '../stores/user';

const userStore = useUserStore();
</script>

<template>
  <div v-if="userStore.isLoggedIn">
    <p>Hello, {{ userStore.user.name }}</p>
    <button @click="userStore.logout">Logout</button>
  </div>
  <div v-else>
    <button @click="userStore.login('user@example.com', 'password')">Login</button>
  </div>
</template>

Шаг 7: API запросы

Для общения с бэкендом использую fetch или axios:

// src/services/api.js
export const api = {
  async getUsers() {
    const response = await fetch('/api/users');
    return response.json();
  },
  
  async createUser(userData) {
    const response = await fetch('/api/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(userData)
    });
    return response.json();
  },
  
  async updateUser(id, userData) {
    const response = await fetch(`/api/users/${id}`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(userData)
    });
    return response.json();
  }
};

Использование в компоненте:

<script setup>
import { ref, onMounted } from 'vue';
import { api } from '../services/api';

const users = ref([]);
const loading = ref(false);

onMounted(async () => {
  loading.value = true;
  users.value = await api.getUsers();
  loading.value = false;
});
</script>

<template>
  <div v-if="loading">Loading...</div>
  <ul v-else>
    <li v-for="user in users" :key="user.id">
      {{ user.name }}
    </li>
  </ul>
</template>

Шаг 8: Стилизация

Для стилей использую CSS с препроцессором SCSS:

<style scoped lang="scss">
$primary-color: #007bff;

.button {
  background-color: $primary-color;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  
  &:hover {
    background-color: darken($primary-color, 10%);
  }
}
</style>

Шаг 9: Тестирование

Для unit тестов используется Vitest:

// src/components/__tests__/Counter.spec.js
import { describe, it, expect } from 'vitest';
import { mount } from '@vue/test-utils';
import Counter from '../Counter.vue';

describe('Counter.vue', () => {
  it('increments count when button is clicked', async () => {
    const wrapper = mount(Counter);
    const button = wrapper.find('button');
    
    await button.trigger('click');
    expect(wrapper.vm.count).toBe(1);
  });
});

Для E2E тестов используется Playwright:

// tests/e2e/home.spec.js
import { test, expect } from '@playwright/test';

test('homepage loads', async ({ page }) => {
  await page.goto('http://localhost:5173');
  await expect(page).toHaveTitle(/Home/);
});

Шаг 10: Production build

# Сборка оптимизированного приложения
npm run build

# Результат в папке dist/
# Готово к деплою!

Практический процесс разработки

# 1. Создание проекта
npm create vue@latest my-app
cd my-app
npm install

# 2. Запуск dev сервера (с hot reload)
npm run dev

# 3. Разработка компонентов
# Пишу в src/components/

# 4. Запуск тестов
npm run test:unit
npm run test:e2e

# 5. Проверка кода
npm run lint

# 6. Production build
npm run build

# 7. Деплой (например, на Vercel)
npm run build && vercel deploy

Архитектура типичного проекта

src/
├── components/
│   ├── ui/                    # Переиспользуемые UI компоненты
│   │   ├── Button.vue
│   │   ├── Modal.vue
│   │   └── Card.vue
│   └── features/              # Feature-specific компоненты
│       ├── UserProfile.vue
│       └── PostList.vue
├── views/                     # Страницы (соответствуют маршрутам)
│   ├── Home.vue
│   ├── About.vue
│   └── Users.vue
├── stores/                    # Pinia stores
│   ├── user.js
│   ├── posts.js
│   └── ui.js
├── services/                  # API и бизнес логика
│   ├── api.js
│   ├── auth.js
│   └── storage.js
├── composables/               # Переиспользуемая логика (хуки)
│   ├── useAuth.js
│   ├── useFetch.js
│   └── useLocalStorage.js
├── router/
│   └── index.js              # Маршруты приложения
├── assets/                    # Статические файлы
└── main.js

Ключевые вещи, которые нужно знать

1. Reactive систему

import { ref, reactive, computed } from 'vue';

// ref — для примитивных типов
const count = ref(0);
count.value++;

// reactive — для объектов
const state = reactive({
  user: null,
  items: []
});
state.user = { name: 'John' };

// computed — вычисляемые свойства
const doubled = computed(() => count.value * 2);

2. Lifecycle хуки

import { onMounted, onUnmounted } from 'vue';

onMounted(() => {
  console.log('Компонент смонтирован');
});

onUnmounted(() => {
  console.log('Компонент удален');
});

3. Директивы

<!-- v-if: условное отображение -->
<div v-if="isVisible">Видно</div>

<!-- v-for: цикл -->
<div v-for="item in items" :key="item.id">{{ item.name }}</div>

<!-- v-bind: привязка атрибутов -->
<img :src="imageUrl" :alt="description">

<!-- v-on: обработка событий -->
<button @click="handleClick">Click</button>

<!-- v-model: двухсторонняя привязка -->
<input v-model="message">

Заключение

Когда начинаю создавать приложение на Vue, следую этому порядку:

Создаю проект через npm create vue@latest
Устанавливаю зависимости
Добавляю Vue Router для навигации
Настраиваю Pinia для состояния
Создаю структуру папок
Пишу API сервис для общения с бэком
Разрабатываю компоненты
Пишу тесты (unit + E2E)
Настраиваю ESLint и Prettier
Делаю production build

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