Vue.js (4) : Vue-cli ile Hazır Gelen Proje Şablonları

Vue.js yazı dizimizin önceki bölümlerinde cdn üzerinden vue.js scriptlerini yüklemiştik. Fakat böyle bir kullanım, orta ve büyük çaplı uygulamalar için uygun olmayacaktır. Yapılması gereken, her bileşeni ayrı dosyalarda tanımlayarak, webpack gibi bir araç kullanarak uygulamaya entegre etmektir. Webpack, yeni geliştiriciler için anlaşılması biraz zor olan bir araç.  Vue ekosisteminde yer alan, bu problemi aşmamızı sağlayacak bir başka araç var: vue-cli.

vue-cli ile tüm ayarları yapılmış, hazır bir proje yapısını otomatik olarak oluşturabiliyoruz. Yeoman kullananlar bilirler; aynı mantığı kullanarak birkaç komut ile projelerimizi oluşturacağız.

vue-cli Kurulumu

vue-cli’nin kurulumu için tahmin edeceğiniz gibi öncelikle sisteminizde node.js kurulu olması gerekiyor.

Yukardaki komutu çalıştırdıktan sonra, artık vue-cli ile proje oluşturmaya başlayabiliriz.

Öne çıkan iki proje şablonundan bahsedelim.

simple

Bu proje şablonu webpack kullanmadan, en basit haliyle tek sayfadan oluşan bir proje oluşturur. Bizim şimdiye kadar yaptığımız gibi cdn üzerinden vue scriptlerini projeye dahil eder.

simplevue projesi oluşturuyoruz.

simplevue dizini oluşturuluyor ve içinde tek bir index.html dosyası var.

Tarayıcımızdan açarsak, şöyle bir görüntü çıkar karşımıza:

simplevue

Diğer proje şablonuna bakalım:

webpack-simple

Hazır webpack ayarları yapılmış bir proje yapısı oluşturur. Vue uzantılı componentlerimizin webpack ile yüklenmesini sağlayan vue-loader bileşeni ayarlanmış durumdadır. Visual Studio Code ile oluşan projenin yapısına bakabiliriz.

mywebappvscode

webpack.config.js dosyamızı bakarsak, babel kurulumlarının da yapılmış olduğunu görürüz. Bu güzel bir şey, çünkü artık javascript kodlarımızı es6 standardına göre yazabiliriz. Biz es6 ile gelen güzel özellikleri kullanalım, webpack’te bunu tüm tarayıcıların anlayacağı es5 formatına çevirsin.

Sırasıyla yukardaki komutları çalıştıralım (Windows ortamında geliştirme yaptığım için, powershell kullanıyorum):

npmrundev

Son komutu çalıştırdıktan sonra, artık tarayıcımızla sayfamıza bağlanabiliriz. Burda bahsetmek istediğim nokta, webpack ile birlikte gelen development server’ı kullanmamız. Neden kullanıyoruz diye soracak olursak, hmr (hot module replacement) özelliğinden dolayı. Bu özellik sayesinde javascript kodunda, html veya css’te değişiklik yapar yapmaz, server’ı kapatıp açmaya gerek kalmadan, tarayıcıda yüklenmiş olan sayfaya yansıması.

http://localhost:8080 adresine tarayıcımız ile bağlanabiliriz.

HMR ‘nin nasıl çalıştığını görmek için, src dizini altındaki App.vue dosyasında ufak bir değişiklik yapıyorum:

Kaydedip, tarayıcımıza baktığımızda değişikliğin otomatik olarak ekrana yansıdığını görürüz.

hmr

Artık webpack-simple ile ilk hali oluşmuş projemizi geliştirip kendi uygulamamızı oluşturmaya sıra geldi:

Bir hesap makinesi uygulaması yapıyoruz. Hesap makinemiz, sadece toplama işlemini yapabiliyor. a ve b rakamlarını giriyoruz, otomatik olarak a + b sayılarının toplamını hesaplıyor.

src dizini içerisinde component dizini oluşturalım, bu dizinin içerisindede iki tane bileşen oluşturalım. Header.vue ve Addition.vue:

Header.vue:

Addition.vue:

Bileşenler template, script ve style bölümlerinden oluşuyor. style kısmında scoped ifadesi var dikkat ettiyseniz, zorunlu bir ifade değil. Fakat scoped dediğiniz zaman, ilgili style’ın sadece bulunduğu bileşen için geçerli olduğunu belirtmiş oluyoruz. scoped ifadesi olmasaydı, yazdığımız css stilleri, tüm sayfadaki html elemanlarını etkileyecektir. Bu ayrıma dikkat etmek gerekiyor.

Bu bileşenlerin App.vue tarafından kullanılabilmesi için App.vue kodunu aşağıdaki şekilde değiştiriyorum:

es6 ile gelen import komutlarını kullanarak, bileşenleri app.vue dosyasına tanıtıyorum.

ilkhalicli

Bileşenler artık kendi dosyalarında tanımlı, böylece projemiz daha güzel, bakımı kolay bir yapı kazanmış oldu.

Şimdi addition bileşenini geliştirelim:

a ve b inputlarını v-model ile çift yönlü bağladık. computed özelliği olarak summation özelliğini ekledik. Böylece a veya b’den biri değiştiğinde otomatik olarak summation değeri değişecek. data ve summation fonksiyonlarını tanımlarken, es6 standardını baz aldık. Bizim bildiğimiz eski es5 standardını kullanmış olsaydık, script bölümünü şöyle tanımlayacaktık:

Şimdi deneyip nasıl çalıştığını görelim:

summationerror

Vue.js devtools eklentisi

Görüldüğü gibi ortaya çıkan sonuçta bir yanlışlık var. Uygulama a ve b’nin toplamını 45 olarak hesaplıyor. 9 olması gerekirken. Bunun sebebini bulmak için, bir chrome eklentisi olan vue.js devtools‘ı kullanabiliriz. Önceki projelerimizde cdn ile vue.js’ı kullandığımız için bu özelliği kullanamıyorduk. Artık kullanabiliriz.

Chrome üzerindeyken F12 tuşuna basarak, geliştirici araçları ekranını açalım.

vuedevtools

Vue sekmesini seçelim. Bu araç sayesinde, tüm bileşenlerin datalarını görebiliriz.

vudevtoolsdisplay

Vue devtools sekmesinden baktığımızda AppAddition componentinde a ve b string olarak görülüyor. Dolayısıyla summation computed özelliği, string birleştirme yapıyor. Bu durumu nasıl düzeltebiliriz?

Vue.js’in sağlamış olduğu number modifier’ı ile a ve b değerlerinin otomatik olarak number’a çevrilmesini sağlarız: v-model.number=”a”

Addition.vue (son hali):

Sayfamıza tekrar bakacak olursak, her şeyin düzgün çalıştığını görmüş oluruz:

summationright

Sonuç

vue-cli aracıyla tüm webpack ayarları hazır olarak yeni proje oluşturuyoruz. Bu yapıyla birlikte, bileşen bazlı uygulama geliştirebiliriz. Webpack ile birlikte gelen hot reloading özelliklerini kullanarak, etkili ve hızlı işleyen bir geliştirme ortamı oluşturmuş oluyoruz.

 

 

Yorum Gönder

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Scroll to Top