Hvordan du bruker bootstrap med vue.JS

Bootstrap er en av verdens mest populære CSS-rammer som gir mange komponenter eller designmaler for å lage raske og raske responsive webapplikasjoner. Det er et open source og fritt-å-bruk ramme for å bygge moderne nettsteder beriket med HTML- og CSS-maler eller brukergrensesnittelementer som knapper, ikoner og skjemaer. I dette innlegget lærer vi først å installere og deretter bruke Bootstrap med Vue.JS Framework.

Installasjon av bootstrap

Det er et "Bootstrap-Vue" -bibliotek bygget spesielt for Vue.JS og kan brukes som Vue -komponenter med de samme funksjonene som Bootstrap. Før du kommer i gang med "Bootstrap" eller "Bootstrap-Vue" -installasjonen, antas det at du er kjent med HTML, CSS og JavaScript, du har satt opp Vue-prosjektet, og du har en god redaktør installert på systemet ditt som vs kode. Hvis du ikke har satt opp Vue -prosjektet ennå, kan du følge prosedyren nedenfor for å sette opp et Vue -prosjekt raskt.

Sett opp Vue -prosjekt

For å sette opp Vue -prosjektet, først, sjekk om Vue.JS er installert på systemet ditt eller ikke ved å skrive kommandoen gitt nedenfor:

$ VUE -Versjon

Hvis du ikke har installert den ennå, skriver du kommandoen gitt nedenfor for å installere Vue.JS globalt på operativsystemet ditt:

$ npm install -g @vue/cli

Etter å ha installert Vue.JS globalt på operativsystemet ditt, Opprett Vue -prosjektet ved å skrive “Vue Create” -kommandoen gitt nedenfor, etterfulgt av prosjektnavnet:

$ vue Create Vue-Project-Name

Det vil be deg om å velge forhåndsinnstilling eller velge din egen tilpassede forhåndsinnstilling for Vue -prosjektet.

Etter å ha konfigurert eller valgt standard forhåndsinnstilling, vil Vue -prosjektet bli opprettet på en stund.

Etter å ha opprettet Vue -prosjektet, navigerer du til det nyopprettede prosjektets katalog ved hjelp av “CD” -kommandoen.

$ CD VueProjectName

På dette stadiet har du vellykket satt opp Vue -prosjektet.

Installer bootstrap

Når systemet er klart, og Vue -prosjektet er satt opp! Du kan installere “Bootstrap-Vue” ved hjelp av garn eller npm. Hvis du vil installere det enkle “bootstrap” for stylingformål, kan du skrive kommandoen gitt nedenfor for å installere dem.

For å installere 'Bootstrap-Vue' og 'Bootstrap' ved hjelp av Yarn Package Manager, skriv kommandoen gitt nedenfor:

$ garn Legg til bootstrap bootstrap-vue

ELLER

For å installere 'Bootstrap-Vue' og 'Bootstrap' ved hjelp av NPM Package Manager, skriv kommandoen gitt nedenfor:

$ npm installer bootstrap bootstrap-vue-lagre

Ok! Når 'Bootstrap' og 'Bootstrap-Vue' er installert, må du aktivere dem i hovedsak.JS -fil.

Importer bootstrapvue fra 'bootstrap-vue/dist/bootstrap-vue.esm ';
Importer 'Bootstrap-Vue/Dist/Bootstrap-Vue.CSS ';
Importer 'bootstrap/dist/css/bootstrap.CSS ';
Vue.bruk (bootstrapvue);

Etter å ha aktivert “Bootstrap” og “Bootstrap-Vue”, kan du nå bruke dem i Vue-prosjektet ditt.

Hvordan du bruker bootstrap i vue

For å bruke Bootstrap med Vue, gir 'Bootstrap-Vue' forskjellige komponenter som skal brukes som VUE-komponent. For eksempel kan en knapp opprettes ved hjelp av 'Bootstrap-Vue' som denne.

Knapp

For å vite om ytterligere komponenter, kan du gjerne besøke den offisielle dokumentasjonssiden til BootstrapVue.

Dette er hvor enkelt det er å installere og begynne å bruke Bootstrap i et Vue -prosjekt.

Konklusjon

Bootstrap er et utbredt CSS-frontbibliotek som brukes til å bygge mobile første og responsive webapper, og ved hjelp av Bootstrapvue kan vi bygge slike webapplikasjoner ved hjelp av Vue. I dette innlegget går vi gjennom installasjonen av BootstrapVue i en vue.JS -prosjekt og se også hvordan du aktiverer det og bruker det. Med kombinasjonen av slike to robuste biblioteker kan vi fremskynde utviklingsprosessen og forskjønne webapplikasjonen vår til de høyeste grensene.