Vue’nin var olan projelere nasıl dahil edileceği ya da sıfırdan nasıl proje oluşturulacağı kısmını pas geçerek doğrudan, benim ilk ögrendiğim ve kullandıgım Bootstrap ekleme yöntemini paylaşmak istiyorum. Bootstrap benim ilk ögrendiğim ve sık kullandığım en detaylı araç oldugundan ayrıca seviyorum yoksa Vue ile kullanılabilecek başka kütüphaneler de mevcut. Vuetify, BootstrapVue, Buefy ve TailwindCSS gibi.
Aşağıdaki cli komutuyla yeni bir Vue projesi oluşturuyoruz.
vue create vue-projectBootstrapVeya halihazırda oluşturulmuş bir proje klasörü içerisinde bulunuyorsak aynı klasörün içerisinde ,
npm install bootstrap jquery popper.jskomutunu çalıştırıyoruz. Bu komut bootstrap’ın son sürümünü projenize dahil edecek, jquery ve popper.js ise tercihe bağlı olarak dahil edilebilir. Ki etmenizi öneririm.
Yüklemeniz tamamlandıgında artık bootstrap’i projenize import etmeniz gerekiyor. Vue projenizin dosya sisteminde bir değişiklik yapmadıysanız
proje klasörünüz > src klasörü içerisindeki main.js dosyasına
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'kodlarını yazmanız yeterli.
Test etmek için ise src klasörü içerisindeki App.vue klasörünün template kısmına aşağıdaki kodları yazıp kaydediyoruz.
<div class=”container”>
<div class=”alert alert-success”>Bootstrap dahil edildi</div>
</div>Sonucu, terminale “npm run serve” komutunu girerek size verilen port: üzerinden ( http://localhost:8080/) kontrol edebiliriz.
Vue’ye bişeyler eklemenin başka yöntemleri de mevcut. Ancak benim gibi öğrenme amaçlı bişeyler yapmak ve hızlıca sonuç görmek istiyorsanız bu baya pratik bir yöntem.
