Vue.js ile Sayfa Oluşturma: Bir Adım Adım Rehber

Giriş: Vue.js, modern ve etkileşimli kullanıcı arayüzleri oluşturmak için kullanılan popüler bir JavaScript framework’üdür. Vue.js, bileşen tabanlı bir yaklaşım sunar, bu da sayfalarınızı modüler parçalara bölebileceğiniz anlamına gelir. Bu blog yazısında, Vue.js kullanarak nasıl sayfa oluşturabileceğinizi adım adım göstereceğim.

Adım 1: Proje Oluşturma Öncelikle, Vue.js projesi oluşturmanız gerekiyor. Vue CLI (Command Line Interface) aracını kullanarak kolayca bir projeyi başlatabilirsiniz. Terminalinizde aşağıdaki komutu çalıştırarak yeni bir Vue.js projesi oluşturun:

vue create my-project

Adım 2: Yeni Sayfa Bileşenini Oluşturma Vue.js’de her sayfayı bir bileşen olarak temsil ederiz. Yeni bir sayfa bileşeni oluşturmak için src/views klasörüne gidin ve yeni bir Vue bileşeni dosyası oluşturun. Örneğin, About.vue adında bir dosya oluşturabilirsiniz.

/src/views/Home.vue

<template>
  <div class="home">
    <h1>Welcome to the Home Page</h1>
    <!-- Sayfanızın içeriği -->
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  // Sayfanızın iş mantığını burada tanımlayabilirsiniz
}
</script>

<style scoped>
/* Sayfanızın özel stil tanımlamalarını burada yapabilirsiniz */
</style>

/src/views/About.vue

<template>
  <div class="about">
    <h1>About Page</h1>
    <p>This is the About page content.</p>
  </div>
</template>

<script>
export default {
  name: 'AboutPage',
  // Sayfanızın iş mantığını burada tanımlayabilirsiniz
}
</script>

<style scoped>
/* Sayfanızın özel stil tanımlamalarını burada yapabilirsiniz */
</style>

Yukarıdaki örnekte, About.vue adında bir sayfa bileşeni oluşturduk. Bileşenin içeriğini <template> bölümünde ve iş mantığını <script> bölümünde tanımlayabilirsiniz. Özel stil tanımlamalarını <style> bölümünde yapabilirsiniz.

Adım 3: Yol Yönlendirmesi (Route) Sayfalar arasında gezinmek için Vue.js’in vue-router paketini kullanabilirsiniz. Projenizin kök dizininde, src/router adında yeni bir klasör oluşturun ve içine index.js adında bir dosya oluşturun. Ardından, aşağıdaki kodu index.js dosyasına ekleyin:

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  {
    path: '/',
    name: 'HomePage',
    component: Home,
  },
  {
    path: '/AboutPage',
    name: 'About',
    component: Home,
  },
  // Diğer sayfaları burada tanımlayabilirsiniz
];

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

Yukarıdaki kodda, About bileşenini sayfamızın rotası olarak tanımladık. '/about' rotası, About sayfasına yönlendirecektir. Artık Vue.js projesinde hem “Home” hem de “About” sayfalarınız var. Bu şekilde, Vue.js ile sayfa oluşturma işlemine devam edebilirsiniz.