Vuejs Nedir ? Nasıl Kurulur ?

Merhaba Arkadaşlar,

Bu makalede vuejs konusuna giriş yaparak kategorinin ilk yazısını hazırlayacağım. İlk olarak vuejs’in neden ve nasıl oluşturulduğundan bahsedip daha sonra kurulum işlemlerine geçerek devamında anlatacağım makaleler öncesinde bilgisayarınızda vuejs tabanlı bir uygulamayı nasıl geliştirebileceğinizi uygulamalı olarak göstermiş olacağım.

Başlıklara ayırarak ilerleyelim:

VUEJS NEDİR ?

Vuejs eski bir google çalışanı olan Evan You tarafından geliştirilmiştir. Web arayüzleri geliştirmek için oluşturulmuş bir kütüphanedir. Okunuşu ingilizce görünüm anlamına gelen ‘view’ kelimesine benzer ve geliştirilen uygulamanın yalnızca view katmanı ile ilgilenir. Geriye kalan tüm detaylar sizin klasör yapınıza göre değişkenlik gösterebilir.

Son zamanların popüler yapılarından SPA(Single Page Application) tabanlı bir uygulama geliştirmek ve sizin isteklerinize göre şekillendirilebilecek bir ortam arıyorsanız vuejs size uygun bir yapıdır. Yani vuejs için esneklik çok önemlidir ve şu ana kadar yakaladığı(aynı zamanda artmaya devam edem) hayranlarını bu esnekliği ile elinde tutmaya devam etmektedir. Uygulamayı hem cli+webpack ile hem de kendi kütüphanesini sayfaya ekleyerek iki farklı biçimde kullanabilirsiniz. Biz uygulamalarımızda webpack kullanarak ilerleyeceğiz ama bu yazı özelinde kütüphane eklenerek nasıl çalışılabileceğini de göstereceğim.

VUE KÜTÜPHANESİNİ EKLEYEREK ÇALIŞMAK

Sektöre başlayan her arayüz geliştiricisinin ilk sevgilisi olan jQuery kullanımında olduğu gibi vuejs kullanmak için de bir kütüphane bulunuyor. Klasör yapıları, assets içeriği, html içerisinde javascript ve css sayfalarını çağırdığınız konum tamamen size kalmış detaylardır. vuejs.org adresinde ‘Installation’ başlığı altında gördüğünüz cdn linkini sayfaya eklediğinizde artık vuejs kullanabiliyorsunuz.

Çalışma yapısını kontrol edebilmek için cdn linkini ekledikten sonra html içerisine şu kod bloğunu ekleyin:

<div id="app">
  {{ message }}
</div>

Sonrasında kendi oluşturacağınız ve cdn linkinden sonra sayfaya çağıracağınız bir javascript sayfası açın ve içerisine şu kod bloğunu ekleyin:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

sayfanızı çalıştırdığınızda ekranda ‘Hello Vue!’ yazısını göreceksiniz. Kısaca bahsetmek gerekirse html içerisine eklediğimiz kodlarda ‘message’ isminde bir değişken çağırıyoruz. Vue kullanırken bir değişkeni veya değişkene ait bir alt özelliği(örneğin api’den gelen bir dizi içerisindeki id değerleri gibi) çağırmak istediğinizde başlangıç ve sonuna çift süslü parantez eklememiz gerekmektedir.

Eklediğimiz javascript kodlarında bir değişken oluşturduk. ‘new Vue({})’ yazarak değişkenin vue içerisinden kalıtım alan ve onun sağlayacağı özellikleri kullanan bir araç olduğunu söyledik. İçerisinde ‘el’ ile seçicimizin id değeri ‘app’ olan bir eleman olduğunu ve data nesnesi içerisinde eklediğimiz ‘message’ değişkenine sahip olduğunu belirttik. Html içerisinde çağırdığımız message değişkeni de buradaki message değerini okudu.

Bu başlık altında değinilebilecek bir çok şey var ama yazının devamında zaten vue-cli kurulumu, webpack şablonu kurulumu gibi konulardan bahsederken hepsini kullanacağımız için bu başlığı burada noktalıyorum.

VUE & VUE-CLI KURULUMU

Vue ile kodlama yapmak, webpack şablon yapısını kullanabilmek için bilgisayarımızda vue ve vue-cli kurulu olması gerekmektedir. Cli kurulumundan önce bilgisayarımızda node ve npm’in kurulu olduğundan emin olalım. Eğer kurulu değil ise önce bunları kuralım. Bilgisayarınızdaki son sürümlerini öğrenmek için terminali açın ve sırasıyla şu komutları çalıştırın:

node -v
npm -v

Her ikisi için de sürüm bilgilerini başarıyla alabildiyseniz artık vue ve vue-cli kurulumuna geçebiliriz. Bunun için sırasıyla aşağıdaki satırları yazıp çalıştırıyoruz ve kurulum başlıyor…

npm install vue
npm install -g vue-cli

Kurulum tamamlandıktan sonra artık istediğimiz bir şablon ile çalışabiliriz. ‘İstediğimiz şablon’ olarak belirttiğim şey vue’nun terminal ile kurulumunu yaparken webpack, browserify, pwa, simple gibi şablonları bulunuyor. Bunların herhangi birini seçerek içeriğinde barındırdığı dosyaların kurulumunu tek komut ile sağlayabiliyoruz. Şablonların farklarını sitesindeki ‘Installation’ sayfası içerisinden görebilirsiniz. Burada ayrı ayrı yazdığımda şablonların sayısının veya tanımlarının değişme durumunda bilgi eksik kalabilir. Bu nedenle açıklamalarını yazmıyorum.

WEBPACK İLE ÇALIŞMAK

Webpack, genel tanımında ‘modül birleştirici’ olarak anlatılır. Ayrı ayrı yerlerde yazdığımız assets sayfalarını tek bir noktada birleştirerek sunar. Aynı zamanda vue şablonları içerisinde en popüler olanıdır. vue için proje kurulumlarında webpack veya webpack-simple seçilebilir. İkisi arasında paket farklılıkları bulunuyor. Örneğin webpack seçtiğimizde terminalde sass kullanmak istiyor musunuz sorusuna ‘evet’ cevabı verirsek sass modüllerini otomatik kuruyor ama webpack-simple seçersek bu kurulumu kendisi yapmıyor.

Terminal içerisinden kurulum yapacağımız klasöre gittikten sonra sırasıyla aşağıdaki komutları çalıştırıyoruz:

vue init webpack bilgisayaci-project
cd bilgisayaci-project
npm install

Yazdığımız komutları kısaca açıklıyorum;
– İlk satırda standart olan ‘vue init’ sonrasında şablon adı olan ‘webpack’ ve devamında şablonu indirmek istediğimiz klasör adını yazıyoruz.
– Terminal üzerinden gelen sorulara cevap verip ‘cd bilgisayaci-project’ ile şablonun indirildiği klasör içerisine giriyoruz.
– ‘npm install’ komutu ile npm paketlerini kuruyoruz.

Kurulum bittikten sonra projeyi localhost üzerinde çalıştırmak için yazmamız gereken komut:

npm run dev

CHROME DEVTOOLS KURULUMU

Vuejs’in güzel özelliklerinden birisi de google chrome için bir eklentisinin bulunmasıdır. Bu eklentiyi yükledikten sonra ‘Öğeyi Denetle’ seçeneği ile açtığımız panelde ‘Vue’ sekmesi oluşturuluyor. Vue sekmesi içerisinden sitemizi kontrol ettiğimizde sayfaya eklediğimiz tüm component’lar, bu component’ların içeriğindeki değişkenler ve özellikler, api’den aldığı veri ile oluşturulan dizinin boyutu ve detayları gibi çok detaylı inceleme yapabiliriz.

—

Bir başlangıç olarak yazdığım bu makale ile artık kodlama yapacağımız ortamı oluşturabilecek hale geldiğimizi düşünüyorum. Devamında eğitim serisi olarak bahsedeceğim konularda önce v-if, v-for, v-bind gibi sık kullanılan vue komutlarını görüp anlayacağız, sonrasında ise küçük çaplı uygulamalar geliştirerek proje içerisinde vuejs ile hangi işlemi nasıl yapabileceğimizi göreceğiz.

Görüşmek üzere..