VueJS ile Web Programlamaya Başla

Bu bilgileri gösterirken sizinde iyi bir programlama dili bildiğinizi varsayıyorum. Yada herkes için! Bu aslında nasıl anlatacağıma bağlı 😀

Unutmadan vue kullanabilmek için nodeJS programını kurmanız gerekmekte. Bu program içerisinde javascript kütüphanelerini çalıştırabilen bir CLI vardır. Buradaki linkten nodeJS’i indirebilirsiniz. NodeJS ile ilgili sorun yaşayan olursa stabil çalışan bir versiyonda 12.16.3 versiyonudur. Bazen son versiyonu sorunlu olabiliyor.

Yükleme sonrasında aşağıdaki kodu powershell yada terminalinize girerek Vue CLI yüklüyoruz.

npm install -g @vue/cli

-g parametresi bilgisayarınızın yerel kullanıcısına kuracaktır. Bu sayede cli her projede tekrar tekrar kurmanıza gerek kalmayacak.

Bu sayede Vue CLI kurulmuş oldu. Artık ilk projemizi oluşturabiliriz. Eğer bemin gibi Visual Studio Code kullanıyorsanız yeni terminal açıp kodları buraya girebilirsiniz. (project_name kısmına istediğiniz bir proje adını giriyorsunuz)

vue create project_name

Bu işlemde size seçenekler gelecek biz ilk başta vue2 default seçerek ilerleyeceğiz. Vue3 e daha sonra değineceğim ve manuel seçeneğindeki işlemleri daha sonra yapacağız.

Vue 2 default seçtiyseniz devam edelim.

Mac OS kullananlar yükleme sırasında hatalar aldılar ise sudo komutunu en başa yazarak tekrar deneyebilirler.

Dosyalara göz atalım. İlk olarak package.json dosyasına baktığımızda burada projemizin gereksinimleri ve bazı config ayarları bulunmaktadır. Detaylarına başka bir yazımda değineceğim. Bu gereksinimler(dependency) ana dizindeki node_modules altındaki kütüphaneleri gösterir. node_modules klasörü altına bakacak olursanız vue’nun cli dosyalarından başlayıp birçok kütüphaneyi gözlemleyebilirsiniz. node_modules klasörünün detaylarına başka bir yazımda değineceğim.

Artık olayımıza geçelim!!!

Ana dizinde bulunan public klasörü altında bir adet index.html ve bir adet favicon.ico bulunmaktadır. Burası sayfanın tepesidir. Yani html bilen birisi index.html dosyasını açtığında anlayacaktır. Burada html tag’leri arasında head ve body bulunmaktadır. Head tag’i altında title ve link tag’larini görebilirsiniz. VueJS component yapısını kullanır. Dolayısıyla siz tek bir sayfada sadece içerik değiştirirsiniz. Tek bir projede sadece tek bir layout sayfası altında sadece içerik değiştirerek sayfa değişiminin önüne geçmiş olursunuz. Tek bir sayfada public altındaki index.html içindeki body tag’i altında #app id’sine sahip olan div tag’i içerisinde component değişir.

<!DOCTYPE html>

<html lang=“en”>

  <head>

    <meta charset=“utf-8”>

    <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>

    <meta name=“viewport” content=“width=device-width,initial-scale=1.0”>

    <link rel=“icon” href=<%= BASE_URL %>favicon.ico”>

    <title><%= htmlWebpackPlugin.options.title %></title>

  </head>

  <body>

    <noscript>

      <strong>We’re sorry but <%= htmlWebpackPlugin.options.title %> doesn’t work properly without JavaScript enabled. Please enable it to continue.</strong>

    </noscript>

    <div id=“app”></div>

    <!– built files will be auto injected –>

  </body>

</html>

 

Peki buna ne karar veriyor?! Buna karar veren şey npm yada yarn diyebiliriz. Bu tür javascript uygulamaları siz ana dizindeyken terminale npm run serve yazıp enter’a tuşlamanızla beraber ana dizindeki src klasörü altında main.js dosyasını görmektedir. İŞTE HERŞEYİN BAŞLADIĞI NOKTA BURASI!!!

main.js içerisinde aşağıdaki kod yer almaktadır;

import Vue from ‘vue’

import App from ‘./App.vue’

Vue.config.productionTip = false

new Vue({

  render: h => h(App),

}).$mount(‘#app’)

Burada gördüğünüz kodları kısaca anlatmam gerekirse 2 adet import edilmiş kod satırı. Birisi Vue CLI’i içeri aktarmış diğeride bulunduğu dizindeki App.vue dosyasını içeri aktarmış. Aşağıdaki kodda ise new Vue diyerek import edilen Vue CLI projesini ayağa kaldırmış ve içerdeki render da h adında bir değişkene bir fonksiyon atılıp bu fonksiyonun geriye App.vue’nun gönderilmesi sağlanmış. Ve son olarakta Mount kullanılarak #app id’li tag’in render’ı çalıştırması gerektiği söylenmiş.

İşte hepsi bu kadar diğer bütün işlere App.vue bakıyor. Hadi oraya gidelim. Burada ise vue’nun temel yapısını görüyorsunuz. İlk başta template tag’i altında html kodlarımızın yazıldığı alanı görüyorsunuz. İkinci alanda ise script tag’ları arasında javascript veya typescript kodlarımızı görüyorsunuz. Üçüncü olarakta en sonda style tagları arasında stillerimiz için oluşturulan class ve id leri görüyorsunuz. İşte vue temel yapıda budur. Template, Script ve Style tek bir dosyada yönetilir. Template de html iskeletimizi, Script de kontrollerimizi ve Style de ise sayfamızın responsive(Ekran uyumluluğu) ve stil atamalarımızı yaparız.

App.vue da script tag arasındaki kontrollerde import edilen bir HelloWorld görüyorsunuz. Bu var olan dizin içerisindeki components klasörü altındaki HelloWorld.vue dosyasını içeri alıyor ve bu HelloWorld olarak isimlendiriyor. Template tag’i arasında kullanabilmek için tek birşeye ihtiyacı var. Bu HelloWorld importunu component olarak tanımlamak. Script tag’i arasında export default yapısını görüyorsunuz burası bir kontrolde olması gereken bir yapıdır. Export olması dışarıdaki başka bir vue dosyasından yada javascript dosyasından erişilebilmesine olanak sağlar. Default ise bu dosya içerisindeki varsayılan sınıf olduğu anlamına gelir. Export default içerisine components açıp içeri import ettiğimiz(HelloWorld gibi) component’lerimizi burada belirtmeliyiz. Kaldı ki HelloWorld için tanımlanmış örnek resim(3-4) gibidir. Son olarakta Template tag’i arasında <HelloWorld> kullanılmış olarak görmektesiniz. Burada tag içerisindeki diğer işlemlere daha sonra değineceğim.

Aşağıda vue import etmenin farklı yollarını görmektesiniz.

import HelloWorld from ‘./components/HelloWorld.vue’

export default {

  name: ‘App’,

  components: {

    HelloWorld

  }

—————yada—————

 components: {

    helloworld: HelloWorld

  }

—————yada—————

  components: {

    “hello-world”: HelloWorld

  }

}

—————yada components’in içerisinde import edebilirsiniz bu da aşağıdaki gibidir—————

export default {

  name: ‘App’,

  components: {

    HelloWorld:() => import(“./components/HelloWorld.vue”)

  }

—————yada—————

  components: {

    helloworld: () => import(“./components/HelloWorld.vue”)

  }

—————yada—————

  components: {

    “hello-world”: () => import(“./components/HelloWorld.vue”)

  }

}

 

Components içerisine tanımladığınız her bir componenti template altında kullanabilirsiniz.

Gelelim App.vue içerisindeki Template altında HelloWorld tag’inin içerisindeki msg olayına. Components altındaki HelloWorld.vue içinde yer alan Script tag’ini kontrol etmenizi öneririm. Burada props yani property(özellik) içerisinde msg string olarak tanımlıdır. App.vue ve HelloWorld.vue, şimdi anladınız mı?! App.vue içerisinde Template altında HelloWorld tag’inin içerisinde msg tanımlıdır ve değeri “Welcome to Your Vue.Js App” yazmaktadır. Bence biraz bir şeyler oturdu bunu hissediyorum. HelloWorld.vue içerisindeki props içinde msg property’sine değer App.vue’dan gelmektedir. Vue veri aktarımlarını bu şekilde yapıyor. Tag üzerinden props yollayabilirsiniz. Bu sadece string değil diğer veri tiplerinide buradan gönderebilirsiniz. Hatta ve hatta fonksiyon bile gönderebilirsiniz(Bu konu hakkında yazım ayrıca olacak).

Gelelim terminale. Ana dizinde iken aşağıdaki kodu çalıştıralım.

npm run serve

 

Bu kod ile localhost:8080 de bir proje çalıştırılacaktır(8080 portunuz dolu ise port değişkenlik gösterecektir). Şimdi tarayıcınızdan http://localhost:8080 adresine gidiniz. Bravo ilk VueJS projenizi oluşturdunuz.

Detayına inerek anlatmış olduk ve bu şu an için kafanızda yer etmemiş olabilir ama her şey zamanla oturacaktır. Bu konulara gelecek yazılarımda sürekli değinmiş olacağım. Yazımı okuduğunuz için çok teşekkür ederim.

Bu bana gurur verir.

Mert Demiral

One thought on “VueJS ile Web Programlamaya Başla

Bir cevap yazın

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

Back To Top