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.

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

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

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.

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.

--

--

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