Phenquestions
Bootstrap, hızlı ve hızlı yanıt veren web uygulamaları oluşturmak için birçok bileşen veya tasarım şablonu sağlayan dünyanın en popüler ön uç CSS çerçevelerinden biridir. HTML ve CSS şablonları veya düğmeler, simgeler ve formlar gibi kullanıcı Arayüzü öğeleriyle zenginleştirilmiş modern web siteleri oluşturmak için açık kaynaklı ve kullanımı ücretsiz bir çerçevedir. Bu yazıda, önce Bootstrap'i Vue ile kurmayı ve sonra kullanmayı öğreneceğiz.js Çerçevesi.
Bootstrap Kurulumu
Özellikle Vue için oluşturulmuş bir “bootstrap-vue” kütüphanesi var.js ve Bootstrap ile aynı özelliklere sahip Vue bileşenleri olarak kullanılabilir. “Bootstrap” veya “bootstrap-vue” kurulumuna başlamadan önce, HTML, CSS ve Javascript'e aşina olduğunuz, Vue Projesini kurduğunuz ve sisteminizde iyi bir editör kurulu olduğu varsayılmaktadır. VS kodu gibi. Henüz Vue projesini kurmadıysanız, hızlı bir şekilde bir Vue projesi kurmak için aşağıda verilen prosedürü takip edebilirsiniz.
Kurulum Vue Projesi
Vue projesini kurmak için önce Vue.js aşağıdaki komutu yazarak sisteminize kurulur veya kurulur:
Henüz yüklemediyseniz, Vue'yi yüklemek için aşağıdaki komutu yazın.js global olarak İşletim sisteminizde:
$ npm kurulum -g @vue/cli
Vue'yi başarıyla yükledikten sonra.js global olarak İşletim sisteminizde, aşağıda verilen “vue create” komutunu ve ardından proje adını yazarak Vue projesini oluşturun:
$ vue vue-proje-adı oluştur
Vue projesi için ön ayarı seçmenizi veya kendi özel ön ayarınızı seçmenizi isteyecektir.
Varsayılan ön ayarı yapılandırdıktan veya seçtikten sonra, Vue projesi bir süre sonra oluşturulacaktır.
Vue projesini oluşturduktan sonra, “cd” komutunu kullanarak yeni oluşturulan projenin dizinine gidin.
$ cd vueprojectname
Bu aşamada Vue projesini başarıyla kurdunuz.
Bootstrap'i yükleyin
Sisteminiz hazır olduğunda ve Vue projesi kurulduğunda! Yarn veya NPM kullanarak “bootstrap-vue” kurabilirsiniz. Eğer basit bir "bootstrap" kurulumu yapmak isterseniz, bunları yüklemek için aşağıdaki komutu yazabilirsiniz.
Yarn paket yöneticisini kullanarak 'bootstrap-vue' ve 'bootstrap' yüklemek için aşağıda verilen komutu yazın:
$ iplik, önyükleme önyüklemesi-vue ekleVEYA
NPM paket yöneticisini kullanarak 'bootstrap-vue' ve 'bootstrap' yüklemek için aşağıda verilen komutu yazın:
$ npm önyükleme önyüklemesi yükleme-vue --save
Peki! 'Bootstrap' ve 'bootstrap-vue' yüklendikten sonra, bunları ana menüde etkinleştirmeniz gerekir.js dosyası.
BootstrapVue dosyasını 'bootstrap-vue/dist/bootstrap-vue'dan içe aktarın.esm';'bootstrap-vue/dist/bootstrap-vue'yu içe aktar.css';
'bootstrap/dist/css/bootstrap'i içe aktar.css';
Vue.kullan(BootstrapVue);
“Bootstrap” ve “bootstrap-vue” etkinleştirdikten sonra, artık bunları Vue projenizde kullanabilirsiniz.
Vue'da Bootstrap Nasıl Kullanılır
Bootstrap'i Vue ile kullanmak için 'bootstrap-vue', Vue bileşeni olarak kullanılacak çeşitli bileşenler sağlar. Örneğin, bunun gibi 'bootstrap-vue' kullanılarak bir düğme oluşturulabilir.
Diğer bileşenler hakkında bilgi edinmek için BootstrapVue'nin resmi dokümantasyon sayfasını ziyaret etmekten çekinmeyin.
Bir Vue projesinde önyüklemeyi kurmak ve kullanmaya başlamak bu kadar basit.
Sonuç
Bootstrap, mobil öncelikli ve duyarlı web uygulamaları oluşturmak için kullanılan yaygın bir CSS ön uç kitaplığıdır ve BootstrapVue'nin yardımıyla bu tür web uygulamalarını Vue kullanarak oluşturabiliriz. Bu yazıda, bir Vue'da BootstrapVue kurulumunu inceleyeceğiz.js projesi ve ayrıca nasıl etkinleştirileceğini ve kullanılacağını görün. Böyle iki sağlam kütüphanenin birleşimi ile geliştirme sürecini hızlandırabilir ve web uygulamamızı en üst sınırlara kadar güzelleştirebiliriz.
