Разработка фронтенда сайта на Vue.js
Vue.js — прогрессивный фреймворк для построения пользовательских интерфейсов. В отличие от React, Vue — полноценный фреймворк из коробки: реактивность, шаблонизатор, роутер (Vue Router), состояние (Pinia). Vue 3 с Composition API — текущий стандарт.
Vue 3 Composition API
Composition API — главное изменение Vue 3. Логика группируется по функции, а не по типу опции:
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
const count = ref(0);
const doubled = computed(() => count.value * 2);
async function fetchData() {
// ...
}
onMounted(() => fetchData());
</script>
<template>
<div>
<p>{{ count }} × 2 = {{ doubled }}</p>
<button @click="count++">Увеличить</button>
</div>
</template>
<script setup> — синтаксический сахар над setup(), не требует return.
Реактивность
Vue 3 использует Proxy для реактивности. Ключевые примитивы:
-
ref<T>()— для примитивов и объектов (доступ через.value) -
reactive({})— для объектов (без.value) -
computed(() => ...)— вычисляемое значение -
watch()/watchEffect()— побочные эффекты
const user = reactive({ name: '', email: '' });
// Vs
const name = ref('');
// user.name vs name.value
Composables (аналог hooks)
// composables/useAuth.ts
import { ref } from 'vue';
export function useAuth() {
const user = ref(null);
const isLoggedIn = computed(() => !!user.value);
async function login(credentials) {
user.value = await api.login(credentials);
}
return { user, isLoggedIn, login };
}
// В компоненте
const { user, isLoggedIn, login } = useAuth();
Pinia — управление состоянием
Pinia пришла на смену Vuex:
// stores/cart.ts
import { defineStore } from 'pinia';
export const useCartStore = defineStore('cart', {
state: () => ({ items: [] as CartItem[] }),
getters: {
total: (state) => state.items.reduce((sum, item) => sum + item.price, 0),
},
actions: {
addItem(item: CartItem) {
this.items.push(item);
},
},
});
// В компоненте
const cart = useCartStore();
cart.addItem({ id: 1, price: 100 });
Vue Router 4
const routes = [
{ path: '/', component: HomePage },
{ path: '/blog/:slug', component: BlogPost, props: true },
{ path: '/admin', component: AdminLayout, meta: { requiresAuth: true },
children: [
{ path: 'users', component: UserList },
]
},
];
// Navigation guard
router.beforeEach((to) => {
if (to.meta.requiresAuth && !auth.isLoggedIn) return '/login';
});
Экосистема
- VueUse — 200+ composables утилит (useStorage, useIntersectionObserver, useDark)
- Quasar Framework — UI-компоненты + PWA/Electron/Capacitor из коробки
- PrimeVue — enterprise UI-компоненты
- Vuelidate / VeeValidate — валидация форм
- Nuxt.js — SSR-фреймворк на основе Vue (аналог Next.js для React)
Сроки
Frontend на Vue 3 для SPA (5–15 экранов, CRUD, авторизация): 2–4 недели. Комплексное приложение с несколькими модулями, графиками, real-time: 1–3 месяца.