Yeni Başlayanlar İçin Vue.js Nedir?

Vue.js çoğunlukla kullanıcı arayüzü geliştirmek için, bazı durumlarda da var olan HTML dosyasının özelliklerini geliştirmek için kullanılabilen modern bir JavaScript kütüphanesidir. Standart HTML, CSS ve JavaScript dosyalarını kullanılarak inşaa edilir ve component temelelli modeli sayesinde etkili kullanıcı arayüzleri oluşturmanuza olanak sağlar.

Yukarıdaki örnek çalıştırıldığında sonuç ‘Count is: 0’ olacaktır.

Sadece HTML’i geliştirmekle kalmayıp, tek sayfa uygulamaları da Vue ile yazabilirsiniz; bu şekilde bütün markup Vue tarafından kontrol edilir ve performans, karışıklık gibi sorunlar ortadan kalkmış olur. Ayrıca client-side yönlendirmeleri ve state yönetiminde kütüphanelerden yararlanabilirsiniz. Kütüphaneler Vue’nun içinde gömülü olmadığından dolayı uygulamanızın ihtiyaçlarına ve yapılarına göre farklı kütüphane seçeneklerinden istediğinizi kullanabilirsiniz.

Birçok framework gibi Vue’da tekrardan kullanılabilir bloklar oluşturmanıza olanak sağlar. Vue blokları genellikle özel bir HTML syntax’ı kullanarak yazılırlar, HTML’in yetersiz kaldığı yerlerde ise JSX veya normal JavaScript kullanarak bloğunuzu özelleştirebilirsiniz. Üstelik bunların hepsini tek dosya içerisinde gerçekleştirebilirsiniz. Bu tip dosyalara SFC yani Single-File Component (Tek-Dosya Component) adı verilir. Vue SFC’leri, component’ın mantığını (JavaScript), şablonunu (HTML) ve stilini tek bir dosya içerisinde aşağıdaki gibi içerir.

Vue.js Nasıl Yüklenir?

Sitenizde Vue kullanmak için iki şekilde yükleme yapmak mümkün.

CDN İle Vue.js Yüklemek

• Geliştirme Script’i (Optimize değil fakat konsol uyarıları içerir.)

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

• Üretim Script’i (Optimize versiyon, detaysız konsol uyarıları. Bu scripti yüklerken gelen yeni güncellemelerin sitenizde bozukluğa yol açmaması için versiyon numarası belirtmeniz önerilir)

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

CDN kullanarak yükleme yapmanın bazı kısıtlamaları vardır. Eğer karmaşık uygulamalar oluşturmak ve kütüphaneler kullanmak isterseniz, CDN ile yükleme yağtığınız takdirde bu tip özellikleri kullanamazsınız.

NPM Kullanarak Vue.js Yüklemek

Npm kullanarak yükleme yaptığınız takdirde, projenizde Vue’nun gelişmiş özelliklerini ve WebPack gibi bundlerlar kullanabilirsiniz. Uygulamaları daha kolay oluşturabilmeniz ve kontrol edebilmeniz için CLI komutlarını ve npm paketini yükleyebilmeniz için öncelikle bilgisayarınıza Node.js yüklemeniz gerekiyor.

Node.js yüklemesini yaptıktan sonra; win+r tuşlarına bastığınızda çıkan pencerede cmd.exe yazarak Command Line‘ı açmalısınız.

Açılan pencerede;

npm install --global @vue/cli

yazarak Vue.js’i bilgisayarınıza indirebilirsiniz.

Yeni Bir Proje Oluşturmak

Cmd ekranında projeyi oluşturmak istediğiniz dizine cd komutu ile gidin.

vue create komutunu kullanarak projenizi oluşturun.

vue create hello-world

Ardından önünüze bir takım seçenekler gelecek.

İsterseniz default seçeneğini seçerek temel Babel + ESLint presetini kullanabilirsiniz veya “Manually select features seçeneği ile ihtiyacınıza göre projenizi yapılandırabilirsiniz.

Defualt seçenek yeni bir uygulama için hızlıca prototip oluşturmanıza yararken, manual olarak projenizi oluşturmanız ürün odaklı ihtiyaçlarınız için size daha çok yapılandırma seçeneği sunar.

Eğer Manually seçeneğini seçerek bir uygulama oluşturursanız, oluşturduğunuz uygulamayı preset olarak kaydedip sonraki uygulamalarınızda kullanabilirsiniz.

~/.vuerc

Kaydedilen presetler .vuerc isimli JSON dosyaları şeklinde kullanıcının ana dizinine kaydolur.

Vue create komutunun seçebileceğiniz farklı seçenekleri de mevcut. Bu seçenekleri görüntülemek için:

vue create --help

komutunu çalıştırmalısınız.

Usage: create [options] <app-name>

create a new project powered by vue-cli-service


Options:

  -p, --preset <presetName>       Skip prompts and use saved or remote preset
  -d, --default                   Skip prompts and use default preset
  -i, --inlinePreset <json>       Skip prompts and use inline JSON string as preset
  -m, --packageManager <command>  Use specified npm client when installing dependencies
  -r, --registry <url>            Use specified npm registry when installing dependencies
  -g, --git [message|false]       Force / skip git initialization, optionally specify initial commit message
  -n, --no-git                    Skip git initialization
  -f, --force                     Overwrite target directory if it exists
  --merge                         Merge target directory if it exists
  -c, --clone                     Use git clone when fetching remote preset
  -x, --proxy                     Use specified proxy when creating project
  -b, --bare                      Scaffold project without beginner instructions
  --skipGetStarted                Skip displaying "Get started" instructions
  -h, --help                      Output usage information

GUI Kullanarak Proje Oluşturma

Proje oluştururken ve düzenleme yaparken Vue’nun sağladığı kullanıcı arayüzünü de kullanabilirsiniz.

vue ui

Yukarıdaki komut internet tarayıcınızda projenizi oluşturmanızı sağlayan GUI ile birlikte açılmasını sağlar.

Başlangıç seviyesinde Vue.js ile ilgili size aktaracağımız bilgiler şimdilik bu kadardı! Sizce Vue.js kullanmak ne kadar mantıklı? Görüşlerinizi bizlerle yorumlar kısmında paylaşmayı unutmayın! Keyifli kodlamalar, görüşmek üzere!