PricingLoginStart free
Vue Academy · Ders

2025 ve Sonrası için Doğru Vue Yığınını Seçme

Vue + Vite + Pinia + Nuxt ile SPA karşılaştırması, TypeScript kullanımı ve Vue için test piramidi.

4. ders / 413 adım

2025 ve Sonrası için Doğru Vue Yığınını Seçme, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Tek Bir Doğru Yığın Yoktur

Doğru Vue yığını; uygulamanızın SEO, etkileşim, dağıtım hedefi ve ekip büyüklüğü gibi gereksinimlerine bağlıdır. Bu ders, yaygın gereksinimleri önerilen yığınlarla eşleştirerek alışkanlıkla değil, bilinçli bir şekilde seçim yapmanıza yardımcı olur.

Klasik SPA Yığını

SEO'nun önemli olmadığı, oturum açma gerektiren ve uygulama gibi çalışan panolar için istemci tarafından oluşturulan bir SPA idealdir: Vite + Vue + Pinia + Vue Router. Hızlı geliştirme, basit barındırma (herhangi bir statik barındırıcı) ve istemci tarafında tam etkileşim sağlar.

// SPA building blocks
// vite          -> dev server + build
// vue           -> UI
// pinia         -> state management
// vue-router    -> client routing

SPA Ne Zaman Yetersiz Kalır

SPA'ler önce boş bir iskelet gönderir, ardından sayfayı tarayıcıda oluşturur. Bu durum, herkese açık içerik sitelerinde SEO'ya ve ilk içerik boyamasına zarar verir. Arama sıralaması ve sosyal medya önizlemeleri önemliyse sunucu tarafında oluşturma gerekir.

SSR ve SEO için Nuxt 3

Nuxt 3, her şeyi içinde barındıran üst çerçevedir: sunucu tarafında oluşturma, dosya tabanlı yönlendirme, otomatik içe aktarmalar, sunucu yolları (Nitro) ve SEO yardımcıları sunar. Pazarlama siteleri, bloglar, e-ticaret siteleri ve taranabilir HTML gerektiren her şey için onu seçin.

// Nuxt page with SEO meta
<script setup>
useSeoMeta({
  title: 'Product Page',
  description: 'Best widget around'
})
</script>

Nuxt ile Statik Oluşturma

Nadiren değişen içerikler için nuxt generate, derleme zamanında sayfaları statik HTML olarak önceden oluşturur (SSG). Çalışan bir sunucu olmadan SEO ve anında yükleme elde edersiniz; uygulamanızı herhangi bir CDN'ye dağıtabilirsiniz.

# pre-render to static HTML
npx nuxi generate
# output in .output/public, deploy to a CDN

Oluşturma Modları Kısa Başvuru Tablosu

Modu içeriğe göre seçin:

  • SPA — özel uygulamalar ve panolar
  • SSR (Nuxt) — SEO gerektiren dinamik herkese açık sayfalar
  • SSG (nuxt generate) — çoğunlukla statik içerik (belgeler, blog)
  • Hibrit — Nuxt routeRules, her yol için SSR/SSG/ISR'yi birleştirir
// nuxt.config: per-route rendering rules
routeRules: {
  '/': { prerender: true },
  '/admin/**': { ssr: false },
  '/news/**': { swr: 60 }
}

Her Yerde TypeScript

2025 için TypeScript, yığının tamamında önerilen varsayılan tercihtir — bileşenler, depolar, bileşim işlevleri ve sunucu yolları için. <script setup lang="ts"> ile türleri belirtilmiş props, emit ve model tanımları, hataları derleme zamanında yakalar ve güçlü düzenleyici desteği sağlar.

<script setup lang="ts">
const props = defineProps<{ id: number; title: string }>()
const emit = defineEmits<{ save: [id: number] }>()
</script>

Durum: Varsayılan Olarak Pinia

Pinia, resmi durum kütüphanesidir — tür destekli, geliştirme araçlarıyla uyumlu ve bileşime uygundur. Sunucu verilerini getirme/önbellekleme için onu Nuxt'ın useFetch/useAsyncData araçlarıyla veya TanStack Query gibi kütüphanelerle birlikte kullanın.

import { defineStore } from 'pinia'

export const useCart = defineStore('cart', () => {
  const items = ref([])
  const total = computed(() => items.value.length)
  return { items, total }
})

Test Piramidi

Dengeli bir test stratejisi piramit biçimini izler: çok sayıda hızlı birim testi, daha az sayıda bileşen testi ve az sayıda uçtan uca test. Önerilen araçlar: Vitest (birim), Vue Test Utils (bileşen) ve Playwright (E2E).

Vitest + Vue Test Utils

Vitest, birim ve bileşen testlerini hızlı çalıştırır (Vite yapılandırmasını paylaşır). Vue Test Utils, oluşturulan çıktıyı ve etkileşimleri doğrulamak için bileşenleri bağlar.

import { mount } from '@vue/test-utils'
import { test, expect } from 'vitest'
import Counter from './Counter.vue'

test('increments', async () => {
  const w = mount(Counter)
  await w.find('button').trigger('click')
  expect(w.text()).toContain('1')
})

E2E için Playwright

Playwright, çalışan uygulamadaki tüm kullanıcı akışlarını — oturum açma, gezinme ve formlar gibi — test etmek için gerçek bir tarayıcıyı yönetir. Bu testleri az sayıda tutun, ancak kritik yolları kapsayacak şekilde yüksek değerli olmalarını sağlayın.

import { test, expect } from '@playwright/test'

test('user logs in', async ({ page }) => {
  await page.goto('/login')
  await page.fill('#email', 'a@b.com')
  await page.click('button[type=submit]')
  await expect(page).toHaveURL('/dashboard')
})

Kısa Sınama

Vue yığını seçme hakkındaki anlayışınızı sınayın.

İnteraktif derste cevapla

Özet

2025 için Vue yığınını nasıl seçeceğinizi öğrendiniz:

  • SPA (Vite + Vue + Pinia + Router) özel uygulamalar için
  • Nuxt 3 SSR/SEO için; statik siteler için nuxt generate
  • Her yerde TypeScript önerilen varsayılandır
  • Durum yönetimi için Pinia
  • Test piramidi: Vitest + Vue Test Utils + Playwright
Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar
42
Dersler
156
Ücretsiz öğrenmeye başlaTüm kursu görüntüle

Sıkça Sorulan Sorular

“2025 ve Sonrası için Doğru Vue Yığınını Seçme” dersi ücretsiz mi?

Evet — “2025 ve Sonrası için Doğru Vue Yığınını Seçme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“2025 ve Sonrası için Doğru Vue Yığınını Seçme” dersinde ne öğreneceğim?

Vue + Vite + Pinia + Nuxt ile SPA karşılaştırması, TypeScript kullanımı ve Vue için test piramidi. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“2025 ve Sonrası için Doğru Vue Yığınını Seçme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Vue Vapor Modu: Derleme Zamanı Optimizasyonu
  2. Vite Ekosistemi: Eklentiler ve Araçlar
  3. Vue Makroları ve Topluluk Önerileri
  4. 2025 ve Sonrası için Doğru Vue Yığınını Seçme
← Vue Academy Sayfasına Dön