Come usare bootstrap con vue.js

Bootstrap è uno dei framework CSS più famosi al mondo che fornisce molti componenti o modelli di progettazione per creare applicazioni Web reattive rapide e veloci. È un framework open source e gratuito per la costruzione di siti Web moderni arricchiti con modelli HTML e CSS o elementi di interfaccia utente come pulsanti, icone e moduli. In questo post, impareremo prima per installare e quindi utilizzare Bootstrap con Vue.JS Framework.

Installazione di bootstrap

C'è una libreria "bootstrap-vue" costruita appositamente per Vue.JS e può essere usato come componenti Vue con le stesse funzionalità di Bootstrap. Prima di iniziare con l'installazione "bootstrap" o "bootstrap-vo", si presume che tu abbia familiarità con HTML, CSS e JavaScript, hai impostato il progetto VUE e hai un buon editor installato sul tuo sistema Come il codice VS. Se non è stato ancora impostato il progetto VUE, è possibile seguire la procedura indicata di seguito per impostare rapidamente un progetto VUE.

Setup Vue Project

Per impostare il progetto VUE, prima, controlla se VUE.JS è installato sul sistema o meno digitando il comando indicato di seguito:

$ vue -version

Se non l'hai ancora installato, digita il comando indicato di seguito per installare Vue.JS a livello globale sul tuo sistema operativo:

$ npm install -g @vue/cli

Dopo aver installato con successo Vue.JS a livello globale sul sistema operativo, crea il progetto VUE digitando il comando "Vue create" indicato di seguito, seguito dal nome del progetto:

$ vue crea vue-project-name

Ti chiederà di selezionare il preimpostazione o di selezionare il tuo preset personalizzato per il progetto VUE.

Dopo aver configurato o selezionato il preimpostazione predefinita, il progetto VUE verrà creato tra un po '.

Dopo aver creato il progetto VUE, vai alla directory del progetto appena creato utilizzando il comando "CD".

$ cd vueprojectname

In questa fase, hai impostato con successo il progetto VUE.

Installa bootstrap

Una volta che il sistema è pronto e il progetto VUE è impostato! È possibile installare "Bootstrap-Vue" utilizzando il filo o NPM. Se si desidera installare il semplice "bootstrap" per scopi di styling, è possibile digitare il comando indicato di seguito per installarli.

Per l'installazione di "bootstrap-vo" e "bootstrap" utilizzando il gestore dei pacchetti di filo, digita il comando indicato di seguito:

$ filato aggiungi bootstrap bootstrap-visi

O

Per l'installazione di "bootstrap-vo" e "bootstrap" utilizzando il gestore dei pacchetti NPM, digita il comando indicato di seguito:

$ npm installa bootstrap bootstrap-vove

Bene! Una volta installati il ​​"bootstrap" e "bootstrap-vo", devi abilitarli in principale.file js.

Importa bootstrapvue da 'bootstrap-vo/dist/bootstrap-VUE.Esm ';
import 'bootstrap-vo/dist/bootstrap-VUE.CSS ';
import 'bootstrap/dist/css/bootstrap.CSS ';
Vue.utilizzare (bootstrapvue);

Dopo aver abilitato il "bootstrap" e "bootstrap-vo", ora puoi usarli nel tuo progetto VUE.

Come usare bootstrap in vue

Per utilizzare Bootstrap con Vue, "Bootstrap-Vue" fornisce vari componenti da utilizzare come componente Vue. Ad esempio, un pulsante può essere creato utilizzando "bootstrap-visi.

Pulsante

Per conoscere ulteriori componenti, sentiti libero di visitare la pagina di documentazione ufficiale di bootstrapvue.

Questo è quanto è semplice installare e iniziare a utilizzare bootstrap in un progetto VUE.

Conclusione

Bootstrap è una libreria frontale CSS prevalente utilizzata per la costruzione di mobile-first e app Web reattive e con l'aiuto di Bootstrapvue, possiamo creare tali applicazioni Web utilizzando Vue. In questo post, attraversiamo l'installazione di bootstrapvue in un Vue.JS Project e vedere anche come abilitarlo e usarlo. Con la combinazione di tali due librerie robuste, possiamo accelerare il processo di sviluppo e abbellire la nostra applicazione Web ai limiti più alti.