Como usar o bootstrap com vue.JS

O Bootstrap é uma das estruturas CSS de front-end mais populares do mundo que fornece muitos componentes ou modelos de design para criar aplicativos da Web rápidos e rápidos. É uma estrutura de código aberto e gratuito para criar sites modernos enriquecidos com modelos HTML e CSS ou elementos de interface do usuário, como botões, ícones e formulários. Neste post, aprenderemos primeiro a instalar e depois usar o bootstrap com o Vue.Estrutura JS.

Instalação do bootstrap

Existe uma biblioteca de “bootstrap-vue” construída especialmente para o Vue.JS e pode ser usado como componentes VUE com os mesmos recursos que o bootstrap. Antes de começar com a instalação "Bootstrap" ou "Bootstrap-Vue", supõe-se que você esteja familiarizado com o HTML, CSS e JavaScript, você configurou o projeto Vue e tem um bom editor instalado no seu sistema como vs vs. Se você ainda não configurou o projeto Vue, pode seguir o procedimento abaixo para configurar um projeto VUE rapidamente.

Projeto Vue Setup

Para configurar o projeto Vue, primeiro, verifique se Vue.O JS está instalado no seu sistema ou não digitando o comando abaixo:

$ vue -versão

Se você ainda não o instalou, digite o comando abaixo para instalar o VUE.JS globalmente em seu sistema operacional:

$ npm install -g @vue/cli

Depois de instalar com sucesso o VUE.JS Globalmente em seu sistema operacional, crie o projeto Vue digitando o comando "Vue Create", dado abaixo, seguido pelo nome do projeto:

$ vue crie vue-project-name

Ele solicitará que você selecione a predefinição ou selecione sua própria predefinição personalizada para o projeto Vue.

Depois de configurar ou selecionar a predefinição padrão, o projeto Vue será criado há algum tempo.

Depois de criar o projeto Vue, navegue para o diretório do projeto recém -criado usando o comando "CD".

$ CD VueProjectName

Nesta fase, você configurou com sucesso o projeto Vue.

Instale o bootstrap

Uma vez que seu sistema estiver pronto, e o projeto Vue é configurado! Você pode instalar o “bootstrap-vue” usando o fio ou o npm. Se você deseja instalar o simples "bootstrap" para fins de estilo, você pode digitar o comando dado abaixo para instalá -los.

Para instalar 'bootstrap-vue' e 'bootstrap' usando o gerenciador de pacotes de fios, digite o comando abaixo:

$ YARN ADICE

OU

Para instalar 'bootstrap-vue' e 'bootstrap' usando o gerenciador de pacotes NPM, digite o comando abaixo:

$ npm install bootstrap bootstrap-vue-salvamento

Tudo bem! Uma vez que o 'bootstrap' e 'bootstrap-vue' estiverem instalados, você deve ativá-los em geral.arquivo js.

importar bootstrapvue de 'bootstrap-vue/dist/bootstrap-vue.Esm ';
importar 'bootstrap-vue/dist/bootstrap-vue.CSS ';
importar 'bootstrap/dist/css/bootstrap.CSS ';
Vue.uso (bootstrapvue);

Depois de ativar o "bootstrap" e "bootstrap-vue", agora você pode usá-los em seu projeto Vue.

Como usar o bootstrap em vue

Para usar bootstrap com vue, 'bootstrap-vue' fornece vários componentes para usar como um componente VUE. Por exemplo, um botão pode ser criado usando o 'bootstrap-vue' como este.

Botão

Para saber sobre mais componentes, fique à vontade para visitar a página de documentação oficial do Bootstrapvue.

É assim que é simples instalar e começar a usar o Bootstrap em um projeto Vue.

Conclusão

O Bootstrap é uma biblioteca de front-end CSS prevalecente usada para criar aplicativos da Web Mobile-First e Responsive e, com a ajuda do Bootstrapvue, podemos construir esses aplicativos da Web usando o VUE. Neste post, caminhamos pela instalação do bootstrapvue em um vue.JS Project e também veja como ativá -lo e usá -lo. Com a combinação dessas duas bibliotecas robustas, podemos acelerar o processo de desenvolvimento e embelezar nosso aplicativo da web com os limites mais altos.