Ne Aramıştınız?
Makaleler, projeler ve kaynaklar arasında arama yaparak size özel fikirler, bilgiler ve ilham kaynakları keşfedin.
Takip et
Ne Aramıştınız?
Makaleler, projeler ve kaynaklar arasında arama yaparak size özel fikirler, bilgiler ve ilham kaynakları keşfedin.
Takip et
Kategoriler
Son Yazılar

Vue.js ile İlk Adım: ‘Hello World’ Uygulaması

Vue.js ile İlk Adım: ‘Hello World’ Uygulaması Giriş: Vue.js Dünyasına Hoş Geldiniz Modern web geliştirme dünyasında kullanıcı arayüzler

Vue.js ile İlk Adım: ‘Hello World’ Uygulaması

Giriş: Vue.js Dünyasına Hoş Geldiniz

Modern web geliştirme dünyasında kullanıcı arayüzleri (UI) oluşturmak için birçok güçlü JavaScript çerçevesi bulunmaktadır. React ve Angular gibi devlerin yanında, Vue.js, öğrenme kolaylığı, esnekliği ve performansıyla ön plana çıkan, aşamalı (progressive) bir çerçevedir. Küçük, etkileşimli bileşenlerden karmaşık tek sayfa uygulamalarına (SPA) kadar geniş bir yelpazede kullanılabilen Vue.js, özellikle geliştirici deneyimine verdiği önemle tanınır.

Bu makale, Vue.js’e yeni başlayanlar için bir rehber niteliğindedir. Amacımız, “Hello World” gibi basit bir uygulama üzerinden Vue.js’in temel kavramlarını, kurulum yöntemlerini ve çalışma prensiplerini adım adım açıklamaktır. Bu yolculuğun sonunda, kendi ilk Vue.js uygulamanızı oluşturabilecek ve çerçevenin sunduğu reaktif dünyaya ilk adımı atmış olacaksınız.

Başlamadan Önce: Gerekli Ortam

Vue.js ile çalışmaya başlamadan önce bazı temel bilgilere ve araçlara sahip olmanız gerekmektedir. Bunlar, geliştirme sürecinizi sorunsuz hale getirecek ve Vue.js öğreniminizi hızlandıracaktır.

* Temel HTML, CSS ve JavaScript Bilgisi: Vue.js, bu temel web teknolojileri üzerine inşa edilmiştir. HTML yapısı, CSS stil tanımları ve JavaScript’in temel programlama kavramları (değişkenler, fonksiyonlar, döngüler, koşullu ifadeler) hakkında bilgi sahibi olmanız büyük önem taşır.
* Node.js ve npm/yarn: Vue CLI (Command Line Interface) gibi araçları kullanmak ve proje bağımlılıklarını yönetmek için Node.js çalışma zamanı ortamına ve paket yöneticisi npm’e (Node Package Manager) veya yarn’a ihtiyacınız olacaktır. Node.js’i resmi web sitesinden indirip kurabilirsiniz. Kurulumla birlikte npm de otomatik olarak yüklenecektir. node -v ve npm -v komutlarını çalıştırarak kurulumu doğrulayabilirsiniz.
* Kod Düzenleyici: Geliştirme sürecinizde size yardımcı olacak iyi bir kod düzenleyici (IDE) kullanmanız önerilir. Visual Studio Code (VS Code), Vue.js için zengin eklenti desteği (Volar, ESLint gibi) sayesinde popüler bir tercihtir.

Bu ön koşulları sağladıktan sonra, Vue.js ile “Hello World” uygulamamızı oluşturmaya hazırız.

Vue.js Proje Kurulum Yöntemleri

Vue.js projelerini başlatmanın temelde iki ana yolu vardır: CDN (Content Delivery Network) kullanarak hızlı ve basit bir başlangıç yapmak veya Vue CLI (Command Line Interface) ile daha kapsamlı ve profesyonel bir proje yapısı kurmak. Her iki yöntem de farklı senaryolar için avantajlar sunar.

1. CDN ile Hızlı Başlangıç

CDN, Vue.js kütüphanesini doğrudan HTML dosyanıza eklemenin en basit yoludur. Bu yöntem, özellikle küçük, etkileşimli bileşenler eklemek istediğiniz mevcut bir web sitesine veya hızlı prototipleme yapmak istediğiniz durumlarda idealdir. Herhangi bir derleme adımına veya Node.js kurulumuna ihtiyaç duymazsınız.

CDN kullanarak “Hello World” uygulaması oluşturmak için aşağıdaki adımları izleyebilirsiniz:

1. Boş bir HTML dosyası oluşturun (örneğin, index.html).
2. Bu dosyaya temel HTML yapısını ekleyin.
3. Vue.js kütüphanesini bir

Bu kodu bir index.html dosyası olarak kaydedip tarayıcınızda açtığınızda, ortalanmış bir kutu içinde "Merhaba Dünya, Vue.js!" yazısını görmelisiniz.

Kodun Açıklaması:

*

: Bu, Vue.js uygulamasının kontrol edeceği HTML elementidir. Vue, bu elementin içindeki her şeyi yönetecektir. mount('#app') çağrısı ile Vue uygulamasını bu div'e bağlıyoruz. * {{ message }}: Bu, Vue.js'in "mustache" (bıyık) sözdizimi olarak bilinen bildirimsel veri bağlama yöntemidir. data içinde tanımladığımız message özelliğinin değerini burada görüntüler. message değeri değiştiğinde, DOM'daki bu kısım otomatik olarak güncellenir. Bu, Vue.js'in reaktif doğasının temel bir göstergesidir. * : Vue.js kütüphanesini web sayfamıza dahil eden CDN bağlantısıdır.
* const { createApp } = Vue;: Vue 3'te, global Vue nesnesinden createApp fonksiyonunu içe aktarıyoruz. Bu, uygulamanız için yeni bir Vue uygulama örneği oluşturmanın yoludur.
* createApp({...}).mount('#app');:
* createApp({...}): Bir Vue uygulama örneği oluşturur. Parantez içindeki obje, bu uygulamanın kök bileşeninin seçeneklerini tanımlar.
* data() { return { message: '...' } }: Bu, kök bileşenimizin reaktif veri deposudur. message özelliği, uygulamanın durumunun bir parçasıdır.
* .mount('#app'): Oluşturulan Vue uygulamasını, DOM'daki id="app" elementine bağlar. Vue artık bu elementin ve içindekilerin kontrolünü ele alır.

Vue CLI Kullanarak "Hello World"

Vue CLI ile oluşturulan bir projede, "Hello World" uygulamasını Single File Components (SFC) adı verilen .vue dosyaları aracılığıyla geliştiririz. Bu dosyalar, bir bileşenin şablonunu (template), JavaScript mantığını (script) ve stilini (style) tek bir yerde birleştirir.

Daha önce vue create hello-vue komutuyla oluşturduğunuz hello-vue projesinin içine girin (cd hello-vue) ve projenizi çalıştırın (npm run serve). Tarayıcınızda gördüğünüz varsayılan "Welcome to Your Vue.js App" sayfasını kendi "Hello World" mesajımızla değiştirelim.

1. src/components/HelloWorld.vue dosyasını düzenleyin:
Bu dosya, varsayılan olarak gelen bir "Hello World" bileşenidir. İçeriğini kendi mesajımızı ve basit bir etkileşimi gösterecek şekilde değiştirelim.

2. src/App.vue dosyasını inceleyin:
Bu dosya, ana uygulama bileşenidir ve HelloWorld bileşenini içe aktarır ve kullanır.

3. src/main.js dosyasını inceleyin:
Bu, uygulamanın giriş noktasıdır. App.vue'yu içe aktarır ve bir Vue uygulama örneği oluşturup #app elementine bağlar.

import { createApp } from 'vue'
    import App from './App.vue' // App bileşenini içe aktar

    createApp(App).mount('#app') // App bileşenini kök bileşen olarak kullanarak uygulama oluştur ve #app'e bağla

Değişiklikleri kaydettikten sonra, tarayıcınızda otomatik olarak güncellenen sayfada "Vue.js İlk Uygulama" başlığını ve altındaki metni görmelisiniz. "Selam Ver" butonuna tıkladığınızda ise yeni bir mesajın belirdiğini fark edeceksiniz.

Kodun Açıklaması (Vue CLI):

* .vue Dosyaları (Single File Components - SFC): Vue CLI projelerinde her bileşen .vue uzantılı tek bir dosya içinde tanımlanır. Bu dosya üç ana bölümden oluşur:
*