Yazma motivasyonu bulduğum bir günden herkese selam :).
Vue kullanıcı arayüzleri oluşturmak için progressive, JavaScript tabanlı bir frameworktur. Developer dostudur ve öğrenmesi oldukça kolaydır. Html, Css ve biraz JavaScript bilginiz varsa Vue öğrenmeye hazırsınız demektir.
Şimdi gelin Vue.js’e merhaba diyelim. Kurulum ile başlayalım.
Eğer bilgisayarınızda Node.js kurulu değilse onu yükleyerek başlamamız gerekiyor. Buraya tıklayarak Node.js’i indirebilirsiniz. Dosyayı indirdikten sonra run-next-next-next-next-finish ile kurulumu tamamlayabilirisiniz.
Kurulumu tamamladıktan sonra PowerShell’i açarak;
node -v
npm -v
komutlarını koşalım. Bu komutlar yüklediğimiz node ve npm paketlerinin versiyonunu gösterecektir.
Artık Vue’yu yükleyebiliriz.Yine aynı şekilde PowerShell’de ‘npm install vue’ komutunu koşalım.
Vue’yu yükledikten sonra Vue CLI yüklememiz gerekiyor. Vue CLI Vue.js projeleri oluşturmak ve yönetmek için bir grafik kullanıcı arayüzüdür.
Artık ilk projemizi oluşturmaya hazırız. Projemizi oluşturmak istediğimiz klasöre ‘cd’ komutu ile giderek. Aşağıdaki komutu koşalım.
Evet ilk projemizi oluşturduk bile. Şimdi bir IDE kullanarak projemizi açalım. Visual Studio Code veya WebStorm kullanabilirsiniz.
Projemizi açtıktan sonra Readme dosyasında yapmanız gerekenleri göreceksiniz.
Burada da yazdığı gibi terminalde npm intall ardından da npm run serve koşuyoruz. Sonrasında terminalde uygulamanın ayağa kalktığını görüyoruz.
Öncelikle otomatik oluşturulan proje yapısını inceleyelim.
main.js Vue’yu projemize dahil ettiğimiz dosyadır. Projemize eklediğimiz pluginlerde örneğin vuetify gibi bu dosyaya import edilir.
App.vue dosyasını projemizin root componenti gibi düşünebiliriz. Yani projeye eklediğimiz bir componenti kullanabilmek için App.vue’da onu çağırmamız gerekiyor.
Birbirine bağlı componentler söz konusu olduğunda ise diyelim ki; Anasayfa, Category, CategoryList isimlerinde üç tane componentimiz var. Anasayfa componentinden bir link ile Category componentine geçiş yapılabiliyor ve Category sayfasında da CategoryList compnenti bulunuyor. Böyle bir projede izim App.vue dosyasına sadece Anasayfa componentini tanıtmamız yeterli oluyor. Çünkü diğer componentler birbirleri ile kendi aralarında zaten iletişim kurmuş oluyorlar.
HelloWord.vue ise projemize eklenmiş bir componenttir.
Vue dosyası template, script ve style taglerinden oluşur.
Template: İçerisine Html, Vue’nun kendi ileşenleri v-btn gibi yazmamıza yarayan tagdir. Vue 2’de template taginin içerisine sadece bir tane root tag tanımlanabilir. Örneğin template taginin içine <div></div> <div></div> bu iki ayrı div tagini yazmaya çalıştığında hata verecektir. Fakat Vue 3’de bu kısıt kaldırıldı.
Script: İçerisine Js, Typescript vb. kodlarını yazabildiğimiz aynı zamanda içinde kullanacağımız component, dosya vb. import ettiğimiz tag.
Style: Css kodlarımızı yazdığımız tag.
Daha sonra projemizde otomatik oluşturulmuş HelloWorld.vue compenentini düzenliyoruz. İçindekileri silip biraz sadeleştirelim yani aşağıdaki hale getirelim.
<template> tagi içerisinde sadece Hello Vue yazsak şimdilik yeterli olur.
Projemize Ctrl+S yaptığımızda yaptığımız değişiklik anında browsera yansıyacaktır. İşte ilk projemiz hazır bile.
