Vue.js Dersleri 01(Giriş)

Selam :) Bu yazımda vue.js dersleri serisinin ilk adımını atmış olacağız.

Vue.js Tarihçe

Evan You adlı Google çalışanı angular.js üzerinde geliştirmeler yaparken angular.js üzerindeki dezavantajları gidererek onun kadar iyi ,hızlı ve az yer kaplayan bir ürün çıkarması düşüncesi üzerine ilk olarak 2014 yılında Vue.js’i piyasaya sürmüştür.

Vue.js Nedir?

Vue.js kullanıcı arayüzleri,spa(single-page application) uygulamaları oluşturabilmek için kullanılan open-source bir frameworktür.Küçük ve orta düzeydeki projelerde uygulamalarda yaygın olarak kullanılmaktadır.

Node.js Kurulumu

Vue.js kurulumunu yapabilmemiz için ilk olarak node.js çalışma ortamını bilgisayarınıza indirmeniz gerekmektedir.

Node.JS çalışma ortamını indirmek için buraya tıklayın.Bu linke gittikten sonra Long-Term-Support seçeneğini seçerek bilgisayarınıza indirin.

İndirdiğinden emin olmak için komut satırına şu kodları yazmanız yeterli.

npm -v 
node -v 

Vue.js Kurulumu

Vue.js kurulumu için komut satırında aşağıdaki kodu çalıştırın.

npm install -g @vue/cli

Çalıştıktan sonra vue.js indiğinden emin olabilmek için aşağıdaki kodu çalıştırın.

vue --version

Vue.js İlk Proje Oluşturma

İlk projeyi oluşturmak için aşağıdaki adımları takip edin.

vue create app-01

Proje oluştuktan sonra size şöyle seçenekler sunulacaktır.

vue-proje oluşturma adım-1

Şimdilik default seçeneğini seçtikten sonra projemiz oluşacaktır.

vue-proje oluşturma adım-2

Proje oluştuktan sonra app-01 klasorüne geçip npm run serve yazdığımızda projemiz 8080 portunda çalışacaktır.

proje-ekranı

Projemiz oluştu peki bu görüntü nerden geldi hadi biraz projenin dosya yapısını inceleyip olayı kavramaya çalışalım.

vue dosya yapısı

Vue js olaya public/index.html dosyasıyla başlıyor, index.html dosyasındaki <div id=”app”> </div> olayın başladığı yer.Bütün yazdığımız kodların html tarafı bu divin içine gömülecektir.Peki bu işi ona anlatan kim ? O da src klasorünün içindeki main.js te bulunan aşağıdaki kod bloğudur.

main.js

Vue paketi içerisinden bir vue instance’i oluşturulup App componentinin içinde ne varsa index.html içindeki app divinin altına koyuluyor.

App-Componenti

App.vue sayfası

Bir vue dosyası 3 yapıdan oluşmaktadır.(template,script,style)

Template:Html ile yazdığımız kod bloklarıdır.

Script:Javascript ile yazdığımız kod bloklarıdır.

Style:Css ile yazdığımız kod bloklarıdır.

App.vue dosyasındaki script ve style içindekileri silip , template içine bir h4 etiketi yapıştıralım.

App.vue

Tekrar komut satırına npm run serve komutunu çalıştıktan sonra şöyle bir çıktı almış olacağız.

Sonuç ekranı

Bu yazımda sizlerle beraber Vue.js derslerine hızlı bir giriş yapmış olduk.Bir sonraki yazımda vue.js’in içine girmeye yavaş yavaş başlayacağız.

Teşekkürler :)