Laravel 12 ile Vite Kullanarak Bootstrap 5 Nasıl Kurulur

Bu Laravel 12 öğreticisinde, Bootstrap 5’i Laravel 12 ile nasıl kuracağınızı ve uygulamanız için nasıl doğru bir şekilde yapılandıracağınızı öğreneceksiniz. Bootstrap 5, responsive ve güzel web uygulamaları oluşturmak için en popüler ön uç çerçevelerinden biridir. Laravel 12, Laravel framework’ünün en son sürümü olup, Vite’i varsayılan yapı aracı olarak sunarak Bootstrap’ı uygulamanıza entegre etmeyi son derece kolaylaştırır.

Bu kapsamlı kılavuzda, Laravel 12’de Vite kullanarak Bootstrap 5’i kurma ve yapılandırma sürecini adım adım inceleyeceğiz. Bu öğretici, yeni başlayanlar için tasarlanmıştır ve pratik örnekler ile sorun giderme ipuçları içermektedir.

İçindekiler

• Vite Nedir ve Neden Kullanılır?
• Adım 1: Laravel 12 Projesini Kurun
• Adım 2: Bootstrap 5 ve Bağımlılıklarını Kurun
• Adım 3: Bootstrap 5.3’ü Kurun
• Adım 4: CSS ve JS Dosyalarını Oluşturun
• Adım 5: Bootstrap Sınıflarını Kullanın
• Adım 6: Laravel Uygulamasını Çalıştırın
• Sonuç

Vite Nedir ve Neden Kullanılır?

Vite, son derece hızlı bir geliştirme deneyimi sunan modern bir yapı aracıdır. Laravel’de Vite, SCSS ve JavaScript dosyalarınızı optimize edilmiş CSS ve JS varlıklarına dönüştürmek için derlemeleri yönetir.

Bootstrap ile Vite Kullanmanın Avantajları:

• Hot Module Replacement (HMR): Değişiklikleri tarayıcınızda anında görme imkanı, manuel yenilemeye gerek yoktur.
• Yıldırım Hızında Yapılar: Optimize edilmiş varlık derlemeleri.
• Minifikasyon: Üretim için otomatik optimizasyon.
• SCSS Desteği: SCSS’i CSS’e sorunsuz bir şekilde derleyin.
• Kolay Yapılandırma: Minimum ayar gereksinimi.

Adım 1: Laravel 12 Projesini Kurun

Eğer hâlâ Laravel 12 projeniz yoksa, Laravel kurulum aracını kullanarak bir tane oluşturabilirsiniz:

composer create-project laravel/laravel bootstrap-vite

Adım 2: Bootstrap 5 ve Bağımlılıklarını Kurun

Sonraki adımda, Laravel UI paketini kurun. composer require laravel/ui komutu, Bootstrap, Vue ve React gibi çerçeveler için hazır ön yüz iskeletleri sunan Laravel UI paketini kurar. Bu paket, Laravel projesinde kimlik doğrulama yolları ve görünümleri hızlıca oluşturmak için kullanılır.

composer require laravel/ui

Bu komut, laravel/ui paketini ve bağımlılıklarını Laravel projenize indirip yükleyerek özelliklerine erişmenizi sağlar. Kullanıcı Arayüzü İskeleti Oluşturma.

Adım 3: Bootstrap 5.3’ü Kurun

laravel/ui paketini kurduktan sonra, istenen ön yüz iskeletini oluşturmak için Artisan komutlarını kullanabilirsiniz:

Daha Fazla bilgilere ulaşmak için: Laravel 12 ile Vite’de Bootstrap 5 Kurulumu