Vue.js kurulumu için aşağıdaki adımları takip edebilirsiniz:
Adım 1: Projeniz için yeni bir dizin oluşturun ve bu dizindeki terminali açın.
Adım 2: Aşağıdaki komutu çalıştırarak Vue CLI'yi(Komut Satırı Arayüzü) kurmak için npm'yi kullanın:
npm install -g @vue/cli
Adım 3: Başarılı kurulumdan sonra, aşağıdaki komutu kullanarak yeni bir Vue projesi oluşturabilirsiniz:
vue create my-vue-project
Adım 4: Projeniz için Babel, ESLint ve CSS Pre-processors(isteğe bağlı) kurulumu dahil olmak üzere yapılandırma seçeneklerini seçin.
Adım 5: Proje oluşturma işlemi tamamlandıktan sonra, şu komutu kullanarak proje dizinine gidin:
cd my-vue-project
Adım 6: Vue projesini başlatmak için aşağıdaki komutu çalıştırın:
npm run serve
Başlatma işlemi tamamlandıktan sonra, tarayıcıda Vue uygulamanıza erişmek için bir URL göreceksiniz.
Basit bir Vue.js örneği:
Yeni bir HTML dosyası oluşturalım ve index.html `adlandıralım. Bu dosyada aşağıdaki kodu ekleyin:
html
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<button @click="changeMessage">Change Message</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
changeMessage() {
this.message = 'Message changed successfully!';
}
}
});
</script>
</body>
</html> h1 Bu örnekte, etiketi ve düğmesi olan basit bir Vue uygulaması oluşturduk. Buton tıklandığında mesaj değişecektir.
Dosyayı kaydedin index.html ve tarayıcıda açın. İlk mesajı "Hello Vue.js!" olarak göreceksiniz. Düğmeye tıkladığınızda, mesaj "Mesaj başarıyla değiştirildi!" olarak değişecektir.
Bu, Vue.js'yi kullanmaya başlamanız için basit bir örnektir. Uygulamalarınızı geliştirirken Vue.js'nin daha birçok özelliğini ve güçlü yeteneklerini keşfedebilirsiniz.