Vue Nedir ve Neden Kullanmalıyız?

Web geliştirme dünyası sürekli evriliyor ve bu dinamik ortamda geliştiricilerin işlerini kolaylaştıran, verimli ve esnek araçlara olan ihtiyaç her geçen gün artıyor. Bu araçlardan biri de modern ve performansı yüksek kullanıcı arayüzleri (UI) oluşturmak için kullanılan aşamalı (progressive) JavaScript çerçevesi Vue.js’dir. Bu rehberde, Vue.js’e yeni başlayanlar için temel kavramları, bir Vue projesi oluşturma adımlarını ve ana özelliklerini detaylı bir şekilde inceleyeceğiz.

Amacımız, bu rehberi tamamladığınızda kendi Vue projelerinizi başlatabilecek, temel bileşenleri oluşturabilecek ve Vue’nun sunduğu avantajları kullanarak interaktif web uygulamaları geliştirebilecek seviyeye gelmenizdir.

Vue Nedir ve Neden Kullanmalıyız?

Vue.js, kullanıcı arayüzleri oluşturmak için kullanılan açık kaynaklı bir JavaScript çerçevesidir. Evan You tarafından geliştirilen ve sürekli büyüyen güçlü bir topluluğa sahip olan Vue, öğrenme eğrisinin düşüklüğü, esnekliği ve performansı ile öne çıkar. “Aşamalı çerçeve” olarak tanımlanmasının nedeni, projenizin ihtiyacına göre küçük bir interaktif bileşenden, tek sayfalık karmaşık bir uygulamaya (SPA – Single Page Application) kadar her ölçekte kullanılabilmesidir.

Vue’nun Başlıca Avantajları:

• Aşamalı Öğrenme ve Esneklik: Vue, mevcut projelerinize kolayca entegre edilebilir. Sadece küçük bir bölümü için Vue kullanmaya başlayabilir, zamanla kapsamını genişletebilirsiniz. HTML, CSS ve temel JavaScript bilginiz varsa, Vue’yu öğrenmeniz oldukça hızlı olacaktır.
• Performans ve Verimlilik: Sanal DOM (Virtual DOM) kullanarak performansı optimize eder. Sadece değişen kısımları güncelleyerek tarayıcı üzerinde daha hızlı tepki veren uygulamalar oluşturmanıza olanak tanır.
• Kapsamlı Ekosistem: Vue Router (yönlendirme), Vuex (durum yönetimi), Vue CLI (proje oluşturma ve yönetimi) gibi resmi araçlar ve kütüphanelerle birlikte gelir. Bu da büyük ölçekli uygulamalar geliştirirken size sağlam bir temel sunar.
• Harika Dokümantasyon ve Topluluk: Vue’nun dokümantasyonu son derece anlaşılır ve detaylıdır. Geniş ve aktif topluluğu sayesinde karşılaştığınız sorunlara hızlıca çözüm bulabilirsiniz.

Vue Projesi Oluşturma ve Temeller

Vue ile geliştirme yapmaya başlamadan önce, bilgisayarınızda bazı araçların kurulu olması gerekmektedir. En temel gereksinim Node.js ve npm (Node Package Manager) veya Yarn’dır. Bunlar, JavaScript paketlerini yönetmenizi ve Vue CLI gibi araçları çalıştırmanızı sağlar.

1. Ortam Kurulumu (Node.js ve npm/Yarn)

Eğer bilgisayarınızda Node.js kurulu değilse, Node.js resmi web sitesinden indirebilirsiniz. Node.js kurulumu ile birlikte npm de otomatik olarak kurulacaktır. Kurulumu tamamladıktan sonra, komut istemcisini (terminal veya PowerShell) açarak aşağıdaki komutlarla kurulumu kontrol edebilirsiniz:

node -v
npm -v

İsteğe bağlı olarak, npm yerine daha hızlı ve güvenilir bir paket yöneticisi olan Yarn’ı da kullanabilirsiniz. Yarn kurulumu için:

npm install -g yarn
yarn -v

2. Vue CLI ile Proje Oluşturma

Vue CLI (Command Line Interface), Vue projelerini hızlı bir şekilde oluşturmak ve yönetmek için kullanılan güçlü bir araçtır. Vue CLI’yı global olarak kurmak için aşağıdaki komutu çalıştırın:

npm install -g @vue/cli
veya
yarn global add @vue/cli

Kurulum tamamlandıktan sonra, yeni bir Vue projesi oluşturmak için istediğiniz bir klasöre gidin ve şu komutu çalıştırın:

vue create my-vue-app

Bu komutu çalıştırdığınızda, Vue CLI size projeniz için bazı yapılandırma seçenekleri sunacaktır. Genellikle “Default (Vue 3)” veya “Default (Vue 2)” seçeneğini seçmek başlangıç için yeterlidir. Eğer Vue 3’ü tercih ediyorsanız, varsayılan seçeneği kullanabilirsiniz. Seçiminizi yaptıktan sonra CLI, gerekli paketleri indirip projenizi oluşturacaktır.

Proje oluşturulduktan sonra, proje dizinine girin ve uygulamayı başlatın:

cd my-vue-app
npm run serve
veya
yarn serve

Bu komut, geliştirme sunucusunu başlatacak ve uygulamanızı genellikle http://localhost:8080/ adresinde görüntüleyebileceksiniz.

3. Proje Yapısı

my-vue-app dizinine baktığınızda aşağıdaki gibi bir yapı göreceksiniz:

• node_modules/: Projenizin bağımlılıklarını içeren klasör.
• public/: HTML dosyaları (index.html) ve statik varlıklar (resimler vb.) gibi derlenmemiş dosyaları içerir.
• src/: Uygulamanızın ana kodunu içeren klasör.
  • assets/: Resimler, CSS dosyaları gibi statik varlıklar.
  • components/: Yeniden kullanılabilir Vue bileşenleri.
  • App.vue: Ana uygulama bileşeni.
  • main.js: Uygulamanızın başlangıç noktası. Vue örneğini oluşturur ve App.vue‘yu DOM’a bağlar.
• .gitignore: Git tarafından izlenmeyecek dosyaları ve klasörleri belirtir.
• babel.config.js: Babel yapılandırma dosyası.
• package.json: Projenizin metadata’sını, bağımlılıklarını ve betiklerini içerir.
• README.md: Projenizin açıklaması.

4. İlk Bileşenimizi Anlayalım (App.vue)

Vue bileşenleri, .vue uzantılı tek dosyalardır (Single File Components – SFC). Bu dosyalar, bir bileşenin HTML şablonunu (