Vue 3 Projesine Bootstrap Eklemek

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-projectBootstrap

Veya halihazırda oluşturulmuş bir proje klasörü içerisinde bulunuyorsak aynı klasörün içerisinde ,

npm install bootstrap jquery popper.js

komutunu ç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.

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store