İlk Vue.js Projenizi Kurma

Vue.js, kullanıcı arayüzleri ve tek sayfalık uygulamalar oluşturmak için ilerici bir JavaScript çerçevesidir. Son derece esnektir ve diğer kütüphanelerle veya mevcut projelerle entegre edilmesi kolaydır. Bu kılavuz, Vue uygulamalarını iskelelemek ve yönetmek için güçlü bir araç olan Vue CLI'yi kullanarak ilk Vue.js projenizi kurma adımlarında size yol gösterecektir.

Ön koşullar

Vue.js projesini kurmadan önce sisteminizde aşağıdakilerin yüklü olduğundan emin olun:

• Node.js ve npm: Vue.js, Node.js ve npm'in (Node Paket Yöneticisi) kurulu olmasını gerektirir. Bunları resmi Node.js web sitesinden indirebilirsiniz.

Adım 1: Vue CLI'yi yükleyin

Vue CLI (Komut Satırı Arayüzü), Vue.js projelerini kolaylıkla oluşturmanıza ve yönetmenize yardımcı olan bir araçtır. Vue CLI'yi sisteminize global olarak yüklemek için terminalinizi veya komut isteminizi açın ve aşağıdaki komutu çalıştırın:

npm install -g @vue/cli

Bu komut Vue CLI'yi global olarak kurar ve terminalinizin herhangi bir yerinden vue komutuna erişmenizi sağlar.

Adım 2: Yeni bir Vue Projesi Oluşturun

Vue CLI kurulduktan sonra, aşağıdaki komutu çalıştırarak yeni bir Vue.js projesi oluşturabilirsiniz:

vue create my-vue-app

Projeniz için bir ön ayar seçmeniz istenecektir. Babel ve ESLint'i içeren varsayılan ön ayarı seçebilir veya Vue Router, Vuex, TypeScript ve daha fazlası gibi özellikleri manuel olarak seçebilirsiniz. Yeni başlayanlar için, Enter tuşlarına basarak varsayılan ön ayarı seçmeniz önerilir.

Vue CLI daha sonra my-vue-app adında yeni bir klasör oluşturacak ve proje yapısını gerekli tüm dosya ve yapılandırmalarla ayarlayacaktır.

Adım 3: Proje Klasörüne gidin

Proje oluşturulduktan sonra aşağıdaki komutu kullanarak proje klasörüne gidin:

cd my-vue-app

Bu, terminalinizin çalışma dizinini yeni oluşturulan Vue.js proje klasörüne değiştirecektir.

Adım 4: Geliştirme Sunucusunu Çalıştırın

Yeni Vue.js uygulamanızı çalışırken görmek için yerel geliştirme sunucusunu şu komutu çalıştırarak başlatın:

npm run serve

Bu komut http://localhost:8080 (veya başka bir kullanılabilir port) adresinde bir geliştirme sunucusu başlatacaktır. Web tarayıcınızı açın ve yeni Vue.js uygulamanızı görüntülemek için bu URL'ye gidin.

Proje Yapısını Anlamak

Yeni bir Vue.js projesi oluşturduktan sonra, iyi organize edilmiş bir proje yapısı göreceksiniz. İşte temel dosyalar ve klasörler:

• src: Bu klasör Vue.js uygulamanızın kaynak kodunu içerir. Tüm bileşenler, görünümler ve stiller burada bulunur.
• public: Bu klasör, resimler, yazı tipleri ve uygulamanız için giriş noktası görevi gören index.html dosyası gibi statik varlıkları içerir.
• src/main.js: Vue.js uygulamanız için ana giriş noktası. Bu dosya Vue örneğini başlatır ve DOM'a bağlar.
• src/App.vue: Uygulamanızın kök bileşeni. Uygulamanızın ana düzenini değiştirmek için bu dosyayı değiştirebilirsiniz.
• src/components: Bu klasör HelloWorld.vue gibi örnek Vue bileşenlerini içerir. Buraya yeni bileşenler ekleyebilir ve bunları uygulamanıza aktarabilirsiniz.

Adım 5: Uygulamanızı Özelleştirin

App.vue dosyasını düzenleyerek ve yeni bileşenler oluşturarak Vue.js uygulamanızı özelleştirmeye başlayabilirsiniz. İşte basit bir Vue bileşeninin bir örneği:

<template>
  <div>
    <h1>Welcome to My First Vue.js Project!</h1>
    <p>This is a simple Vue component.</p>
  </div>
</template>

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

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

Vue'nun sıcak yeniden yükleme özelliği sayesinde değişikliklerinizi kaydedin ve sonuçları anında tarayıcınızda görün.

Çözüm

Tebrikler! İlk Vue.js projenizi başarıyla kurdunuz ve bir Vue uygulamasının nasıl oluşturulacağı ve çalıştırılacağına dair temelleri öğrendiniz. Vue CLI ile Vue.js projelerinizi iskelelemenize, geliştirmenize ve yönetmenize yardımcı olacak güçlü bir araca sahipsiniz. Buradan, yönlendirme için Vue Router, durum yönetimi için Vuex ve daha güçlü ve esnek geliştirme için Composition API gibi daha gelişmiş özellikleri keşfedebilirsiniz.