Selam millet! Nasılsınız, iyi misiniz? Bugün size böyle heyecanlı bir konuyla geldim ki sormayın gitsin. Hatırlıyorum da, ilk kez bir front-end framework’üyle tanışacağım zamanlar… Aman aman, ne günlerdi! Hani böyle bir kapı aralıyorsun ya, içeride bambaşka bir dünya seni bekliyor gibi. İşte Vue.js de benim için öyle bir şeydi. Özellikle ilk ‘Hello World’ uygulamamızı yaptığımız o anı hiç unutamam. Basit bir mesaj ekrana gelecek, o kadar. Ama o ‘o kadar’ dediğimiz şeyin altında yatan o koskoca potansiyel, inanılmazdı. Hani şimdi düşününce gülüyorum ama o zamanlar sanki bir uzay gemisi tasarlıyormuşum gibi hissetmiştim 🙂

Şimdi diyeceksiniz ki ‘Hocam ne Hello World’u, neyin peşindesin?’ Haklısınız. Ama bu işin temeli bu arkadaşlar. Tıpkı bir binanın temeli gibi, ne kadar sağlam atılırsa, üstüne o kadar kat çıkabiliyorsun. Vue.js’in o meşhur ‘Hello World’ü de tam olarak bu sağlam temel. Basit göründüğüne bakmayın, içinde birçok kavramı barındırıyor aslında.

Öncelikle Vue CLI dediğimiz bir araç var. Bunu bilgisayarımıza kurduktan sonra, komut satırında tek bir komutla yepyeni bir Vue projesi oluşturabiliyorsunuz. Hani böyle sihirli bir değnek gibi düşünün. ‘Vue create benim-ilk-app’ yazdığınız anda, karşınızda size hazır bir proje yapısı çıkıyor. Bu yapı içinde zaten her şey düşünülmüş durumda. Dosyalarınız nerede duracak, nasıl organize olacak, hepsi belli.

Bu CLI’ın en güzel yanı ne biliyor musunuz? Sizin için her şeyi hallediyor. Paket bağımlılıklarını kuruyor, geliştirme sunucusunu ayağa kaldırıyor, hatta bazen hata yaptığınızda size ipuçları bile veriyor. Yani siz sadece kodunuza odaklanıyorsunuz. Bu arada, ilk defa proje oluştururken biraz kafa karıştırıcı gelebilir, ‘Nereye tıklasam, neyi seçsem?’ diye düşünebilirsiniz. Ama derin bir nefes alın, genellikle varsayılan seçeneklerle devam etmek en mantıklısıdır başlangıçta. Zaten sonra bunları nasıl değiştireceğinizi de öğreniyorsunuz.

Proje oluştuktan sonra, karşınıza çıkan dosya yapısı içinde en çok uğrayacağınız yerlerden biri ‘src’ klasörü olacak. İşte bizim hikayemiz burada başlıyor. ‘src’ klasörünün içinde ‘App.vue’ diye bir dosya görürsünüz. İşte bizim meşhur ‘Hello World’ mesajını yazacağımız yer burası. Bu dosya aslında bir Vue bileşenidir. Bileşen ne mi? Şimdilik onu bir yapı taşı gibi düşünün. Web sitenizin her bir parçası bir bileşen olabilir; bir buton, bir menü, hatta koca bir sayfa bile. App.vue de bizim ana bileşenimiz.

Peki, bu App.vue dosyasının içinde neler var? Genellikle üç ana bölümden oluşur: <template>, <script> ve <style>. <template> bölümünde HTML kodlarınızı yazarsınız. Yani sayfanızın iskeleti burada şekillenir. <script> bölümünde ise JavaScript kodlarınızı yazarsınız. Burası uygulamanızın beyni gibi. Veri yönetimi, mantık yürütme, kullanıcı etkileşimleri hep burada halledilir. Ve <style> bölümü… İşte burası da sayfanızın güzelleştiği yer. CSS kodlarınızla sayfanızı istediğiniz gibi şekillendirirsiniz. Bu üç bölümün bir arada olması, Vue’nun en sevdiğim özelliklerinden biri. Tıpkı bir yemeğin ana malzemesi, baharatı ve sunumu gibi, hepsi bir araya gelince ortaya harika bir şey çıkıyor.

Şimdi gelelim o meşhur ‘Hello World’ kısmına. App.vue dosyasındaki <template> bölümüne girin. Orada muhtemelen zaten bir şeyler yazılıdır. Siz oradaki içeriği silip, basitçe şunu ekleyin:

İşte bu kadar basit! Gördünüz mü? Sadece bir `

` etiketi içine ‘Merhaba Dünya!’ yazdık. Bu kadar basit bir işlem bile, Vue’nun çalışma mantığını anlamak için harika bir başlangıç noktası. Hani ben bu kodu ilk yazdığımda, sanki büyük bir başarı kazanmışım gibi hissetmiştim. Sonra geliştirme sunucusunu başlattım (ki o da ‘npm run serve’ gibi basit bir komutla oluyor), tarayıcıyı açtım ve işte orada, ekranda ‘Merhaba Dünya!’ yazıyordu. O anki o sevinç… Ne güzel değil mi?

Bir de şöyle bir durum var. Başlangıçta, belki de sizin proje yapınız biraz farklı olabilir. Mesela `App.vue` dosyasındaki template kısmında `img` etiketi falan da olabilir. O zaman ne yapacağız? Basit. O fazlalıkları kaldırıp sadece yazdığımız kodu ekleyeceğiz. Hani o ilk kod örneğindeki gibi. Bazen de sanki böyle bir şey eklenmiş gibi olur ama aslında yoktur. Neyse efendim, siz ana fikri anlayın yeter.

Bu arada, belki de aklınızda şöyle bir soru canlanmıştır: ‘Peki bu ‘Hello World’ mesajını nasıl daha dinamik hale getirebiliriz?’ İşte tam da bu noktada Vue’nun veri bağlama (data binding) özelliğine değinmek lazım. Ama o başka bir sohbetin konusu olsun şimdilik. Şimdilik sadece bu ilk adımı atmak, o ilk mesajı ekrana getirmek önemli. Bu işin ilk zaferi bu.

Neticede, bu ‘Hello World’ olayı sadece bir başlangıç. Vue.js ile yapabileceklerinizin sadece ufak bir göstergesi. Ama o ilk adımı atmadan, o ilk mesajı ekrana yazdırmadan ilerleyemezsiniz. Tıpkı dağcılığa başlarken ilk zirvenin eteklerine tırmanmak gibi düşünün. O ilk adımın verdiği güvenle, daha yüksekleri hedefliyorsunuz.

Geçenlerde bir kamp gezisine çıktık eşimle, çocuğumla. Bursa’nın yaylalarında, doğanın içinde. Akşam kamp ateşinin başında oturmuşuz, gökyüzünde yıldızlar… Tam o sırada aklıma geldi, ilk Vue projemdeki o ‘Merhaba Dünya!’ mesajı. Ne kadar da basit bir şeydi ama bana öğrettiği şeyler, o ilk heyecan, hala aklımda. O basit kod parçası, bana yazılımın ne kadar da eğlenceli bir yolculuk olabileceğini göstermişti. Bazen en karmaşık problemlerin çözümü, en basit başlangıç noktalarında saklıdır bence.