Bu yazıda, bir önceki yazıda oluşturduğum ilk Vue.js projesinin hangi dosyalardan oluştuğuna ve bu dosyaların ne işe yaradığına değineceğim. Öncelikle projemizin hangi klasörlerden oluştuğunu görelim: node_modules, public ve src. Ayrıca, ana dizinimiz içerisinde de genelikle ayarlardan oluşan dosyalarımız bulunuyor.
Bu arada kodları incelerken kullanacağım Text Editor Visual Studio Code olacak.
Öncelikle node_modules klasörü ile başlayalım.
Vue.JS — Node_Modules Klasörü
Bu klasör, package.json dosyasında yer alan gereksinimlerin indirildiği klasördür. Örneğin; vue, vuex, vue router, bootstrap gibi paket halinde indirilmiş dosyalarımız bulunmaktadır.
Vue.JS — Public Klasörü
Projenizi ayağa kaldırdıktan sonra ya da projenizi yayınladıktan sonra ortaya çıkan ana sayfanız burada yer alan index.html‘dir. Ayrıca sonraki yazılarda da değineceğim üzere genellikle statik dosyalarıma da burada yer vereceğim. Css ve görsel dosyalarını bu konuda örnek gösterebilirim.
Vue.JS — Src Klasörü
Asıl olayların döndüğü klasör diyebiliriz kendisine. Haydi bu klasörün alt klasörlerini de detaylı olarak inceleyelim.
Görüldüğü üzere burada karşımıza assets, components, router, store, views alt klasörleri geliyor.
Assets Klasörü
Benim biraz üst kısımda public klasörü için söylediğimi burası için de söyleyebilirim. Burada iki klasörün kullanımları benzer olsa da ince bir nüans bulunuyor. Şimdilik başlangıç aşamasında public klasörünü kullanmanızı öneriyorum. Çünkü public klasörü içerisindeki logo.png isimli dosyaya şu şekilde kolayca ulaşabilirsiniz.
<img src=”/logo.png” alt=”Logomuz” />
İşte bu kadar basit. Assets’i kullandığınızda ise acaba şu anda hangi klasör içerisindeyim, acaba link verirken başına kaç tane nokta (../) koyacağım gibi soru işaretleriyle bir hayli uğraşabilirsiniz.
Components Klasörü
Component oluşturdukça bu klasörü de yoğun bir şekilde kullanacağız. Şimdiden ilk ipucunu da vermek isterim. Burada alt klasör yapısını çok güzel planlamak lazım ve tüm componentları tek bir klasör içerisine yığmamak gerekiyor. Örneğin;
— Components
— -GuzelComponentlar
— — A.vue
— — B.vue
— -KotuComponentlar
— — C.vue
— — D.vue
…..
tarzında alakalı componentları gruplarsanız, neyin nerede olduğunu kolay bir şekilde bulabilirsiniz.
Router Klasörü
Router klasörü Vue Router ile projemize geliyor. Burada tek bir dosya bulunuyor. Ancak, projeniz büyüdükçe bir tane ile kalmayacağına emin olabilirsiniz.
router/index.js
const routes = [
{path: ‘/’, name: ‘Home’, component: Home},
{path: ‘/about’, name: ‘About’,
component: () => import(‘../views/About.vue’)
}
]
Burada projenizde hangi URL’e gidildiğinde hangi dosyayı göstereceğinizi belirtiyorsunuz diyebilirim. Ayrıca Vue.JS bizlere 2 farklı kullanım örneğini de sunmuş oluyor.
Home için yukarıda import ile bir değişken tanımlayıp routes içinde kullanmış olduk.
Aboute için ise direkt olarak dosyayı routes içerisinde import ediyoruz. 2 yöntemi de kullanabilirsiniz. Bu tamamen tercih meselesi olsa da ben About’ın kullanım şeklini tavsiye ediyorum.
Store Klasörü
Bu klasör ise Vuex ile bizlere sunuluyor. State Management gibi ifadeleri gördüğünüzde bilin ki bu klasörden bahsediliyordur. Bunu ister bu klasörde isterseniz ana klasörde de store.js şeklinde kullanabilirsiniz. Router da aynı şekilde kullanılabilir ancak sonradan birçok alt klasör ve dosya ekleyeceğimiz için şimdiden bu yapıyı kullanmak sizin için faydalı olacaktır.
View Klasörü
Kullanıcılara gösterdiğimiz sayfalar ise burada yer alıyor. Örneğin router’da belirttiğimiz Home ve About URL’lerinin karşılıklarının burada olduğunu çoktan fark etmişsinizdir. Domain.com/About adresinin karşılığı buradaki About.vue olacak.