Merhaba dostlar! Bugün size Vue.js’in o tatlı dünyasına adım atarken ilk ve belki de en önemli adımlardan birinden bahsedeceğim: Kurulum! Hani böyle ilk defa bir enstrüman alırsın da ‘Acaba gitar mı alsam, saz mı?’ diye düşünürsün ya, Vue’da da benzer bir durum var. Karşımızda iki ana yol var: CDN ve Vue CLI. Hangisi senin için doğru, hangisi daha pratik, gelin bir bakalım.
Şimdi ben de sizin gibiydim zamanında. Bu işlere yeni başladığımda, şöyle bir daldım ortama, bir sürü makale, bir sürü video… Herkes bir şeyler anlatıyor ama kafada hep aynı soru: ‘Ben ne yapacağım şimdi?’ Bu Vue kurulumu meselesi de tam olarak öyleydi. Sanki bir bilmece gibi, çözmeye çalıştıkça daha da karışıyor gibi hissediyordum.
Öncelikle CDN’den başlayalım. Adı üstünde, Content Delivery Network. Yani bu, Vue.js’in JavaScript dosyalarını alıp, dünyanın farklı yerlerindeki sunuculara dağıtan bir sistem. Sen de kendi HTML dosyana basit bir script etiketiyle Vue’yu çağırıyorsun. İşte bu kadar!
Peki bu ne demek? Şu demek: Hiçbir şey yüklemen gerekmiyor bilgisayarına. Sadece internetin olacak ve o basit script etiketini HTML’inin
veya sonuna ekleyeceksin. Mesela şöyle bir şey:<script src=\"https://unpkg.com/vue@3/dist/vue.global.js\"></script>Ne kadar basit değil mi? 🙂 İşte ben de ilk başladığımda hep böyle yapardım. Hızlıca bir şeyler denemek, ufak tefek örnekler kodlamak için birebir. Bir de baktın, bir anda bir sürü şey denemişsin, bir bakmışsın proje büyümüş. İşte o zaman CDN’nin sınırlarına gelmiş oluyorsun sanırım.
Neden mi? Çünkü CDN ile yaptığın projeler genellikle tek bir HTML dosyası ve içindeki JavaScript kodlarından ibaret oluyor. Yani bir nevi ‘single file application’ gibi. Ama proje büyüdükçe, kodlarını yönetmek, modüllere ayırmak, hatta CSS’leri bile ayrı dosyalarla halletmek falan iyice zorlaşıyor. Bu arada, ben de bir keresinde küçük bir demo için CDN kullanmıştım, sonra baktım ki kodlar birbirine girmiş, ‘Eyvah!’ dedim. İşte o zaman Vue CLI’ın ne kadar hayat kurtarıcı olduğunu anladım.
Şimdi gelelim Vue CLI’a. Bu biraz daha profesyonel bir araç. Bir nevi senin için hazır bir proje şablonu oluşturuyor. Düşünsene, bir ev yapacaksın ama sıfırdan tuğla taşıyıp harç karıştıracaksın ya da hazır bir temel üzerine katları çıkacaksın. Vue CLI işte o hazır temel gibi. Sana component’lar için ayrı dosyalar, router için ayrı dosyalar, hatta state yönetimi için Vuex veya Pinia gibi yapıları bile hazır kurabiliyor.
Vue CLI’ı kurmak için öncelikle Node.js ve npm’in bilgisayarında yüklü olması gerekiyor. Zaten çoğu geliştirici için bu zaten vardır diye tahmin ediyorum. Sonra terminali açıp basit bir komutla Vue projen yeni bir klasörde seni bekliyor oluyor:
npm install -g @vue/cliArdından yeni bir proje oluşturmak için:
vue create benim-ilk-vue-projemSonra sana soruyor, ‘Hangi özellikleri ekleyeyim?’ diye. İşte orada istediğin özellikleri seçebiliyorsun. Router mı istiyorsun? Vuex mi? TypeScript mi? Hepsi orada!
Geçenlerde eşimle bir şehir turuna çıkmıştık, Bursa’nın tarihi yerlerini geziyorduk. Hava da tam kampa uygun, serin ama bunaltıcı değil. Aklım sürekli kodlamadaydı tabi, ama sonra düşündüm, ‘Neydi bu hayatın amacı?’ diye 🙂 Neyse efendim, bu Vue CLI olayı da tam olarak böyle. O ilk başta kurulumu biraz daha meşakkatli gibi görünse de, ileride sana kazandıracağı zaman ve düzen paha biçilemez.
Peki benim tavsiyem ne olurdu bu konuda? Eğer sadece Vue.js’i denemek, birkaç satır kod yazıp ne işe yaradığını anlamak istiyorsan, CDN harika bir başlangıç noktası. Hiçbir kurulum derdi olmadan hemen başlayabilirsin. Hani böyle bir deneme sürümü gibi düşün. Ama eğer gerçekten bir proje geliştirmeye niyetliysen, kodlarını düzenli tutmak, ileride ölçeklenebilir bir yapı kurmak istiyorsan, o zaman hiç vakit kaybetmeden Vue CLI’ı kurmanı öneririm. Bana göre, Vue CLI ile başlamak uzun vadede daha verimli oluyor, hem de kodun daha temiz kalıyor.
Sonuç olarak, ikisinin de kendine göre avantajları var. CDN, hız ve basitlik demek; Vue CLI ise yapı, ölçeklenebilirlik ve daha profesyonel bir geliştirme deneyimi demek. Hangi yola gideceğine karar verirken, ne yapmak istediğini bir düşün derim. Bazen hızlı bir deneme yapmak için CDN’i açıp, sonra projeyi Vue CLI’a taşımak da bir seçenek olabilir. İnanın ki, bu seçenekleri değerlendirmek sana daha iyi bir başlangıç yapma imkanı sunacaktır.
Bu arada, Vue 3’ün CDN dosyaları da artık çok daha kullanışlı hale geldi. Eskiden farklı modülleri ayrı ayrı çağırırdık ama şimdi tek bir dosya ile global API’a erişebiliyorsun. Bu da CDN ile bile olsa işleri biraz daha kolaylaştırıyor açıkçası. Ama yine de büyük projeler için Vue CLI’ın sunduğu otomasyon ve araçlar bambaşka bir seviye, onu da unutmamak lazım.
Neticede, seçimin ne olursa olsun, Vue.js ile harika şeyler yapacağına eminim. Bu yolculukta bol şans! 🙂