Yeni Başlayanlar İçin Vue.js ile Başlarken

Vue.js, kullanıcı arayüzleri ve tek sayfalık uygulamalar oluşturmak için popüler bir JavaScript çerçevesidir. Basitliği, esnekliği ve diğer kütüphaneler veya projelerle entegrasyonunun kolaylığıyla bilinir. Vue.js, dinamik web uygulamalarını minimum çabayla oluşturmak isteyen hem yeni başlayanlar hem de deneyimli geliştiriciler için mükemmel bir seçimdir.

İlk Vue.js Projenizi Kurma

Vue.js'ye başlamak için bir geliştirme ortamı kurmanız gerekir. Bunu yapmanın en kolay yolu, Vue.js projeleri oluşturmanıza ve yönetmenize yardımcı olan Vue CLI'yi (Komut Satırı Arayüzü) kullanmaktır. İlk Vue.js projenizi kurmak için şu adımları izleyin:

1. Node.js ve npm'i yükleyin: Vue.js, Node.js ve npm'in (Node Paket Yöneticisi) sisteminizde yüklü olmasını gerektirir. Bunları resmi Node.js web sitesinden indirip yükleyebilirsiniz.
2. Vue CLI'yi yükleyin: Node.js ve npm yüklendikten sonra, terminalinizi veya komut isteminizi açın ve Vue CLI'yi global olarak yüklemek için aşağıdaki komutu çalıştırın:

npm install -g @vue/cli

3. Yeni Bir Vue Projesi Oluşturun: Vue CLI'yi yükledikten sonra, aşağıdaki komutu çalıştırarak yeni bir Vue.js projesi oluşturun:

vue create my-vue-app

Bir ön ayar seçmeniz istenecektir. Yeni başlayanlar için, Enter tuşlarına basarak varsayılan ön ayarı seçin. Vue CLI, my-vue-app adlı yeni bir klasör oluşturacak ve sizin için proje yapısını ayarlayacaktır.

4. Proje Klasörüne Gidin: Proje klasörüne gitmek için şunu çalıştırın:

cd my-vue-app

5. Geliştirme Sunucusunu Çalıştırın: Yerel bir geliştirme sunucusu başlatmak ve yeni Vue.js uygulamanızı görüntülemek için şunu çalıştırın:

npm run serve

Bu komut http://localhost:8080 (veya başka bir kullanılabilir port) adresinde bir geliştirme sunucusu başlatacaktır. Tarayıcınızı açın ve Vue.js uygulamanızı eylem halinde görmek için bu URL'ye gidin!

Vue.js Proje Yapısını Anlamak

Yeni oluşturulmuş bir Vue.js projesi iyi organize edilmiş bir yapı ile gelir. İşte en önemli dosya ve klasörlerin hızlı bir özeti:

• src: Bu klasör uygulamanızın kaynak kodunu içerir. Tüm Vue bileşenleriniz, stilleriniz ve diğer kaynaklarınız buraya gider.
• public: Bu klasör, resimler, yazı tipleri ve index.html dosyası gibi statik varlıkları içerir. index.html dosyası, uygulamanız için giriş noktası görevi görür.
• src/main.js: Bu dosya Vue.js uygulamanızın giriş noktasıdır. Vue örneğini başlatır ve DOM'a bağlar.
• src/App.vue: Bu, uygulamanızın kök bileşenidir. Uygulamanızın ana düzenini oluşturmak için bu dosyayı özelleştirebilirsiniz.
• src/components: Bu klasör, HelloWorld.vue gibi örnek Vue bileşenlerini içerir. Bu klasörde yeni bileşenler oluşturabilir ve bunları uygulamanıza aktarabilirsiniz.

İlk Vue.js Bileşeninizi Oluşturma

Vue.js, bileşen tabanlı bir çerçevedir, yani uygulamanız yeniden kullanılabilir ve kendi kendine yeten bileşenler kullanılarak oluşturulmuştur. Bir karşılama mesajı görüntülemek için basit bir Vue.js bileşeni oluşturalım.

1. Yeni Bir Bileşen Oluşturun: src/components klasöründe, Greeting.vue adında yeni bir dosya oluşturun ve aşağıdaki kodu ekleyin:

<template>
  <div>
    <h1>Hello, Vue.js!</h1>
  </div>
</template>

<script>
export default {
  name: 'Greeting'
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

Bileşen üç bölüme ayrılmıştır: HTML işaretlemesi için '<template>', JavaScript mantığı için '<script>' ve kapsamlı CSS stilleri için '<style>'.

2. Bileşeni İçeri Aktarın ve Kullanın: src/App.vue'yi açın ve yeni Greeting bileşenini içeri aktaracak ve kullanacak şekilde değiştirin:

<template>
  <div id="app">
    <Greeting />
  </div>
</template>

<script>
import Greeting from './components/Greeting.vue';

export default {
  name: 'App',
  components: {
    Greeting
  }
};
</script>

<style>
#app {
  text-align: center;
}
</style>

Değişiklikleri kaydedin ve geliştirme sunucunuz otomatik olarak yeniden yüklenecektir. Artık sayfada "Merhaba, Vue.js!" karşılama mesajını görmelisiniz.

Çözüm

Vue.js geliştirme ortamını başarıyla kurdunuz, yeni bir proje oluşturdunuz ve ilk bileşeninizi oluşturdunuz. Vue.js, dinamik ve etkileşimli web uygulamalarını hızla oluşturmanıza olanak tanıyan güçlü ve esnek bir çerçevedir. Öğrenmeye devam ettikçe, daha da sağlam uygulamalar oluşturmanızı sağlayacak Vue Router, Vuex ve Composition API gibi daha gelişmiş özellikler keşfedeceksiniz.

Bugün Vue.js ile oluşturmaya başlayın ve modern web geliştirmenin tüm potansiyelini ortaya çıkarın!