Cómo usar Bootstrap con Vue.js

Bootstrap es uno de los marcos CSS front-end más populares del mundo que proporciona muchos componentes o plantillas de diseño para crear aplicaciones web rápidas y receptivas. Es un marco de código abierto y de uso gratuito para crear sitios web modernos enriquecidos con plantillas HTML y CSS o elementos de interfaz de usuario como botones, iconos y formularios. En esta publicación, aprenderemos primero a instalar y luego usar Bootstrap con Vue.marco JS.

Instalación de bootstrap

Hay una biblioteca de "bootstrap-vue" construida especialmente para vue.JS y se puede usar como componentes VUE con las mismas características que Bootstrap. Antes de comenzar con la instalación "Bootstrap" o "Bootstrap-Vue", se supone que está familiarizado con el HTML, CSS y JavaScript, ha configurado el proyecto VUE, y tiene un buen editor instalado en su sistema como vs código. Si aún no ha configurado el proyecto VUE, puede seguir el procedimiento que se proporciona a continuación para configurar un proyecto VUE rápidamente.

Proyecto de configuración Vue

Para configurar el proyecto VUE, primero, verifique si Vue.JS está instalado en su sistema o no escribiendo el comando que se proporciona a continuación:

$ Vue -Versión

Si aún no lo ha instalado, escriba el comando que se proporciona a continuación para instalar Vue.JS a nivel mundial en su sistema operativo:

$ npm instalación -g @vue/cli

Después de instalar con éxito Vue.JS a nivel mundial en su sistema operativo, cree el proyecto VUE escribiendo el comando "Vue Create" que se proporciona a continuación, seguido del nombre del proyecto:

$ vue crea vue-project-nombre

Le pedirá que seleccione el preajuste o seleccione su propio preajuste personalizado para el proyecto VUE.

Después de configurar o seleccionar el preajuste predeterminado, el proyecto VUE se creará en un tiempo.

Después de crear el proyecto VUE, navegue al directorio del proyecto recién creado utilizando el comando "CD".

$ CD VueProjectName

En esta etapa, ha configurado con éxito el proyecto VUE.

Instalar bootstrap

Una vez que su sistema esté listo y el proyecto VUE está configurado! Puede instalar el "bootstrap-vue" utilizando el hilo o el npm. Si desea instalar el simple "Bootstrap" para fines de estilo, puede escribir el comando que se proporciona a continuación para instalarlos.

Para instalar 'bootstrap-vue' y 'bootstrap' utilizando el Administrador de paquetes de hilo, escriba el comando que se proporciona a continuación:

$ Yarn Agregar bootstrap bootstrap-vue

O

Para instalar 'bootstrap-vue' y 'bootstrap' utilizando el Administrador de paquetes NPM, escriba el comando que se proporciona a continuación:

$ npm instalación bootstrap bootstrap-vue --save

Está bien! Una vez que se instalan 'bootstrap' y 'bootstrap-vue'.archivo js.

Importar BootstraPVue de 'Bootstrap-Vue/Dist/Bootstrap-Vue.esm ';
importar 'bootstrap-vue/dist/bootstrap-vue.CSS ';
importar 'bootstrap/dist/css/bootstrap.CSS ';
Vue.use (bootstraPVue);

Después de habilitar el "bootstrap" y "bootstrap-vue", ahora puede usarlos en su proyecto VUE.

Cómo usar Bootstrap en Vue

Para usar Bootstrap con Vue, 'Bootstrap-Vue' proporciona varios componentes para usar como componente Vue. Por ejemplo, se puede crear un botón usando el 'bootstrap-vue' como este.

Botón

Para conocer más componentes, no dude en visitar la página de documentación oficial de BootstraPVue.

Así de simple es instalar y comenzar a usar Bootstrap en un proyecto VUE.

Conclusión

Bootstrap es una biblioteca front-end prevalente de CSS utilizada para construir aplicaciones web móviles y receptivas, y con la ayuda de BootstraPVue, podemos crear tales aplicaciones web utilizando Vue. En esta publicación, caminamos por la instalación de BootstraPVue en un vue.proyecto JS y también vea cómo habilitarlo y usarlo. Con la combinación de tales dos bibliotecas robustas, podemos acelerar el proceso de desarrollo y embellecer nuestra aplicación web a los límites más altos.