Ana içeriğe geç
Destek Çevrimiçi
MirrorLooking Glass
RabisuRabisu
Müşteri Paneli
RehberlerBilgi Bankası

VuePress ile Modern Dokümantasyon Sistemi Kurulumu (Vue.js)

Bu Rehberde Ne Öğreneceksiniz?​

Bu rehber VuePress kullanarak modern bir dokümantasyon sistemi kurmayı öğretir.
Markdown dosyalarını Vue bileşenleriyle nasıl zenginleştireceğinizi öğrenirsiniz.
SEO uyumlu, hızlı ve bakımı kolay bir yapı oluşturursunuz.

Teknik Özet​

  • Konu: VuePress ile dokümantasyon sitesi
  • Problem: Küçük projeler için ağır dokümantasyon çözümleri
  • Çözüm: Vue tabanlı statik site üretimi
  • Adımlar: Kurulum → Sayfalar → Bileşenler → Tema ve stil

VuePress Nedir?​

VuePress, Vue.js tabanlı bir statik site üreticisidir.
Markdown dosyalarını HTML sayfalara dönüştürür.
Her Markdown dosyası Vue şablonu gibi çalışır.

Avantajları:

  • Yüksek hız
  • SEO uyumluluk
  • Güvenli yapı
  • Kolay bakım

1️⃣ Proje Kurulumu​

mkdir rabisu-docs
cd rabisu-docs
npm init --yes
npm install [email protected] --save-dev
  • Bu adımlar VuePress projesini başlatır.

package.json Script Ayarları​


"scripts": {
  "docs:dev": "vuepress dev docs",
  "docs:build": "vuepress build docs"
}
  • Geliştirme ve üretim komutları tanımlanır.

2️⃣ Ana Sayfa Oluşturma​


mkdir docs
md

home: true actionText: Bileşeni Dene actionLink: /sayac/ features:

  • title: Vue Entegrasyonu details: Doküman içine canlı Vue bileşenleri eklenir.
  • title: Markdown Gücü details: İçerik sade ve okunabilir yazılır. footer: Rabisu Bulut ile geliştirildi
  • Front matter alanı ana sayfa ayarlarını belirler.

3️⃣ Markdown İçinde Vue Bileşeni Kullanımı​


mkdir -p docs/.vuepress/components

<template>
  <div>
    <h3>Değer: {&#123; sayi &#125;}</h3>
    <button @click="sayi++">Artır</button>
    <button @click="sayi--">Azalt</button>
  </div>
</template>

<script>
export default {
  data() {
    return { sayi: 0 }
  }
}
</script>
  • Bu Vue bileşeni dokümantasyon içinde canlı çalışır.
  1. Sayaç Sayfası

# Sayaç Bileşeni

< Sayac/>

- Bu bileşen Markdown içine gömülmüş canlı bir Vue örneğidir.
VuePress bileşenleri otomatik tanır.

---

## 4️⃣ Menü ve Yan Panel Ayarları

```js

module.exports = {
  title: 'Rabisu Dokümantasyon',
  description: 'VuePress ile hazırlanmış teknik dokümantasyon',
  themeConfig: {
    nav: [
      { text: 'Ana Sayfa', link: '/' },
      { text: 'Sayaç', link: '/sayac/' }
    ],
    sidebar: [
      {
        title: 'Bileşenler',
        children: ['/sayac/']
      }
    ]
  }
}
  • Menü ve sidebar bu dosyadan yönetilir.

5️⃣ Tema ve Renk Özelleştirme​


$accentColor = #ffa500
$textColor = #2c3e50
  • Marka renkleri global olarak değiştirilir.

❓ Sıkça Sorulan Sorular​

1. VuePress SEO uyumlu mu? Evet. Statik HTML üretir ve arama motorları sever.

2. Markdown içinde Vue çalışır mı? Evet. VuePress bunu yerel destekler.

3. Siteyi nasıl yayına alırım? npm run docs:build ile derleyip sunucuya yükleyin.

4. Ek SEO ayarı gerekir mi? Başlık ve açıklama çoğu proje için yeterlidir.

Sonuç​

VuePress ile modern dokümantasyon kurabilirsiniz. Vue gücüyle etkileşimli içerik üretirsiniz. Bakımı kolay ve hızlı bir yapı elde edersiniz.

Dokümantasyon sitenizi Rabisu Bulut altyapısında yüksek performansla yayınlayabilirsiniz.