İlk Vue.js projenize başlamak gözünüzü korkutabilir ama Vue CLI'nin yardımıyla aslında oldukça basit. Bu öğretici yazıda, yeni bir Vue.js projesi oluşturma ve basit bir uygulama oluşturma adımlarını inceleyeceğiz.

İlk Vue JS Projesi Başlatma

Vue CLI'yi Yükleme

Vue.js projemizi oluşturmaya başlamadan önce Vue CLI'yi kurmamız gerekiyor. Bunu yapmak için bir terminal açın ve aşağıdaki komutu çalıştırın:

npm install -g @vue/cli

Bu komut, Vue CLI'yi genel olarak kurmanızı sağlayacak.

Yeni bir proje oluşturma

Vue CLI yüklendikten sonra, onu yeni bir proje oluşturmak için kullanabiliriz. Bunu yapmak için terminalde aşağıdaki komutu çalıştırın:

vue create my-project

Bu komut, bulunduğunuz dosyada "my-project" adlı yeni bir proje yaratacaktır. Ayrıca bir ön ayar seçmenizi isteyecektir. Babel ve ESLint ile birlikte gelen varsayılan hazır ayarı seçebilir veya projeye dahil edilecek özellikleri manuel olarak seçebilirsiniz.

Dependency'leri Yükleme

Proje oluşturulduktan sonra, proje dizinine gidin ve bağımlılıkları yüklemek için aşağıdaki komutu çalıştırın:

npm install

Geliştirme sunucusunu çalıştırma

Artık projemiz kurulduğuna göre, uygulamamızı oluşturmaya başlamak için geliştirme sunucusunu çalıştırabiliriz. Bunu yapmak için aşağıdaki komutu çalıştırın:

npm run serve

Bu komut, 8080 numaralı bağlantı noktasında bir geliştirme sunucusu başlatır. Uygulamaya, tarayıcınızda http://localhost:8080 adresine giderek erişebilirsiniz.

Yeni bir bileşen oluşturma

Vue.js'de bir uygulama, yeniden kullanılabilir bileşenlerin bir koleksiyonu olarak oluşturulur. Yeni bir component oluşturmak için öncelikle src/components dizininde yeni bir dosya oluşturmamız gerekiyor. Buna HelloWorld.vue diyelim.

Bu dosyada, bileşenimiz için şablon, komut dosyası ve stilleri tanımlayabiliriz. İşte basit bir HelloWorld bileşeni örneği:

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World'
    }
  }
}
</script>

Şablon bölümünde, bir mesaj veri özelliğini h1 öğesine bağlamak için çift taraflı ayraçlar {{ }} kullanıyoruz. Script kısmında da Hello World değeri ile bir data property "message" tanımlıyoruz.

Bileşeni kaydetme

Artık bileşenimizi oluşturduğumuza göre, uygulamamızda kullanılabilmesi için onu kaydetmemiz gerekiyor. Bunu yapmak için, bileşeni main.js dosyasına aktarmamız ve global veya yerel olarak kaydetmemiz gerekiyor.

İşte HelloWorld bileşenimizi global olarak main.js dosyasına nasıl kaydedebileceğimize dair bir örnek:

import HelloWorld from './components/HelloWorld.vue'

Vue.component('HelloWorld', HelloWorld)

Bileşeni kullanma

Artık bileşenimiz kaydedildiğine göre, onu uygulamamızın şablonunda kullanabiliriz. Bu durumda, onu App.vue bileşen şablonuna ekleyebiliriz.

<template>

    <div>

       <HelloWorld/>

    </div>

</template>

....

Bu, HelloWorld bileşenini App.vue bileşeninin şablonu içinde işleyecektir.

Sonuç

Ve bu kadar! Yeni bir Vue js projesini başarıyla oluşturduk ve basit bir "HelloWorld" component'i oluşturduk. Elbette bu sadece başlangıç ve Vue.js hakkında öğrenilecek daha çok şey var. Ancak Vue CLI'nin ve bu eğitimde ele alınan temel bilgilerin yardımıyla, artık daha karmaşık ve dinamik uygulamalar oluşturmaya başlamak için iyi bir temele sahip olmalısınız.

Bunun yalnızca basit bir örnek olduğunu ve gerçek dünya uygulamalarında yönlendirme, durum yönetimi ve daha fazlası gibi daha karmaşık bileşenlere ve özelliklere sahip olacağınızı unutmamak önemlidir. Ancak bu öğreticiyi izleyerek, artık bir Vue.js projesini nasıl kuracağınız ve oluşturacağınız konusunda temel bir anlayışa sahip olmanız ve kendi uygulamalarınızı oluşturmaya başlayabilirsiniz.