Kuidas Bootstrapi Vue abil kasutada.js

Bootstrap on üks maailma populaarsemaid esiotsa CSS-i raamistikke, mis pakub palju komponente või kujundusemalle kiirete ja kiirelt reageerivate veebirakenduste loomiseks. See on avatud lähtekoodiga ja tasuta kasutatav raamistik kaasaegsete veebisaitide loomiseks, mis on rikastatud HTML- ja CSS-mallide või kasutajaliidese elementidega, nagu nupud, ikoonid ja vormid. Selles postituses õpime kõigepealt installima ja seejärel kasutama Vue-ga Bootstrapi.js raamistik.

Bootstrapi installimine

Seal on spetsiaalselt Vue jaoks ehitatud „bootstrap-vue” teek.js ja seda saab kasutada Vue komponentidena, millel on samad funktsioonid nagu Bootstrapil. Enne „bootstrap” või „bootstrap-vue” installimisega alustamist eeldatakse, et olete HTML, CSS ja Javascriptiga tuttav, olete seadistanud Vue projekti ja teie süsteemi on installitud hea redaktor nagu VS-kood. Kui te pole Vue projekti veel seadistanud, võite järgida allpool toodud protseduuri Vue projekti kiireks seadistamiseks.

Vue projekti seadistamine

Vue projekti seadistamiseks kontrollige kõigepealt, kas Vue.js on teie süsteemi installitud või mitte, tippides alltoodud käsu:

$ vue --versioon

Kui te pole seda veel installinud, tippige Vue installimiseks alltoodud käsk.js kogu maailmas teie operatsioonisüsteemis:

$ npm installige -g @ vue / cli

Pärast Vue edukat installimist.js globaalselt oma operatsioonisüsteemis, looge Vue projekt, tippides allpool antud käsu “vue create”, millele järgneb projekti nimi:

$ vue loo vue-projekti nimi

See palub teil kas valida eelseade või valida oma kohandatud eelseade Vue projekti jaoks.

Pärast vaikeseadete konfigureerimist või valimist luuakse Vue projekt mõne aja pärast.

Pärast projekti Vue loomist navigeerige vastloodud projekti kataloogi, kasutades käsku “cd”.

$ cd vueprojectname

Selles etapis olete edukalt seadistanud projekti Vue.

Installige Bootstrap

Kui teie süsteem on valmis ja projekt Vue on seadistatud! Saate installida “bootstrap-vue” lõnga või NPM-i abil. Kui soovite stiilide jaoks installida lihtsa alglaadimisriba, võite nende installimiseks sisestada alltoodud käsu.

Rakenduste "bootstrap-vue" ja "bootstrap" installimiseks lõngapaketi halduri abil tippige allpool toodud käsk:

$ lõng lisab bootstrap bootstrap-vue

VÕI

'Bootstrap-vue' ja 'bootstrap' installimiseks NPM-i paketihalduri abil tippige järgmine käsk:

$ npm installige bootstrap bootstrap-vue --save

Hästi! Kui 'bootstrap' ja 'bootstrap-vue' on installitud, peate need põhiliselt lubama.js-fail.

importige BootstrapVue kaustast 'bootstrap-vue / dist / bootstrap-vue.esm ';
import 'bootstrap-vue / dist / bootstrap-vue.css ';
import 'bootstrap / dist / css / bootstrap.css ';
Vue.kasuta (BootstrapVue);

Pärast “bootstrap” ja “bootstrap-vue” lubamist saate neid nüüd oma Vue projektis kasutada.

Kuidas Bootstrapi Vue'is kasutada

Bootstrapi kasutamiseks koos Vue-ga pakub 'bootstrap-vue' erinevaid komponente, mida Vue-komponendina kasutada. Näiteks saab sellise nupu 'bootstrap-vue' abil luua nupu.

Nupp

Täiendavate komponentide kohta lisateabe saamiseks külastage BootstrapVue ametlikku dokumentatsiooni lehte.

Nii lihtne on Vue projektis bootstrapi installimine ja selle kasutamise alustamine.

Järeldus

Bootstrap on levinud CSS-i esioteraamatukogu, mida kasutatakse kõigepealt mobiilsete ja tundlike veebirakenduste loomiseks ning BootstrapVue abil saame selliseid veebirakendusi ehitada Vue abil. Selles postituses tutvume BootstrapVue installimisega Vue'is.js projekti ja vaadake ka, kuidas seda lubada ja kasutada. Sellise kahe tugeva teegi kombinatsiooniga saame kiirendada arendusprotsessi ja kaunistada oma veebirakendust kõige kõrgemate piirideni.