4. Projeto [vuejs-02]: uso do framework Bootstrap CSS

O projeto [vuejs-02] apresenta o uso do Bootstrap em um projeto [vue.js]. É o framework CSS que será utilizado em todos os nossos projetos. Utilizaremos uma variante do Bootstrap chamada [BootstrapVue] [https://bootstrap-vue.js.org/].

A estrutura do projeto será a seguinte:

Observação: acima, a pasta [vuejs] foi renomeada para [cours] [1] no restante do documento.

4.1. Instalação do framework [BootstrapVue]

[BootstrapVue] é um framework que se adiciona ao projeto com a ferramenta [npm]:

no [1], portanto, são dois frameworks que se instalam: o [Bootstrap] e sua variante, o [BootstrapVue];
no [2], as duas dependências aparecem no arquivo [package.json];

4.2. O script [main.js]

O script principal [main.js] é o seguinte:


// importações
import Vue from 'vue'
import App from './App.vue'

// plug-ins
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

// bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// configuração
Vue.config.productionTip = false

// instanciação do projeto [App]
new Vue({
  render: h => h(App),
}).$mount('#app')

linha 2: importação do framework [Vue];
linha 3: importação da visualização principal;
linha 6: importação do framework [BootstrapVue];
linha 7: este framework foi concebido como um plugin do framework [Vue]. A linha 7 inclui esse plugin no framework [Vue];
linhas 10-11: importação dos arquivos CSS dos frameworks [Bootstrap] e [BootstrapVue];
as linhas 5-11 são, portanto, inteiramente dedicadas ao uso do [BootstrapVue]. O restante do código é idêntico ao que vimos no parágrafo anterior;

4.3. O componente [App.vue]


<template>
  <b-container>
    <b-card>
      <!-- Bootstrap Jumbotron -->
      <b-jumbotron>
        <!-- linha -->
        <b-row>
          <!-- coluna com largura 4 -->
          <b-col cols="4">
            <img src="./assets/logo.jpg" alt="Cerisier en fleurs" />
          </b-col>
          <!-- coluna com largura 8 -->
          <b-col cols="8">
            <h1>Calculez votre impôt</h1>
          </b-col>
        </b-row>
      </b-jumbotron>
      <HelloBootstrap msg="Hello Bootstrap !" />
    </b-card>
  </b-container>
</template>


<script>
  import HelloBootstrap from "./components/HelloBootstrap.vue";

  export default {
    name: "app",
    components: {
      HelloBootstrap
    }
  };
</script>

Comentários

linhas 1-21: todas as tags <b-xx> são tags do framework [BootstrapVue];
linhas 2, 20: a tag <b-container> define um contêiner do Bootstrap. Dentro desse contêiner, poderemos definir linhas com a tag <b-row> e colunas com a tag <b-col>;
linhas 3, 19: a tag <b-card> define um “cartão” do Bootstrap. Visualmente, isso se apresenta como um retângulo com borda;
linhas 5, 17: a tag <b-jumbotron> permite destacar uma parte da página, neste caso, uma imagem e um texto. Vamos utilizá-la em nossos diversos projetos como identificação visual do projeto;
linha 7: a tag <b-row> define uma linha;
linhas 9-11: a tag <b-col> define uma coluna da linha anterior. O Bootstrap atribui 12 colunas a cada linha. O atributo [cols=’4’] indica que a coluna <b-col> ocupará 4 dessas 12 colunas;
linha 10: uma imagem
linhas 13-15: uma coluna que ocupará 8 das 12 colunas da linha. Colocamos um texto nela;
linha 18: uso de um componente chamado [HelloBootstrap] com uma propriedade chamada [msg];
linhas 24-33: a parte <script> do componente;
linhas 29-31: o componente [HelloBootstrap] utilizado na linha 18 é exportado. Para ser reconhecido, ele deve ser importado na linha 25;

O resultado é o seguinte:

em [1], a tag <b-card>;
em [2], a tag <jumbotron>;
em [3], a imagem em 4 colunas;
em [4], o texto em 8 colunas;

4.4. O componente [HelloBootstrap]

[HelloBootstrap] é o componente a seguir:


<template>
  <div>
    <!-- mensagem sobre fundo verde -->
    <b-col cols="12">
      <b-alert show variant="success" align="center">
        <h4>[vuejs-02] : bootstrap</h4>
      </b-alert>
    </b-col>
    <!-- mensagem sobre fundo amarelo -->
    <b-col cols="12">
      <b-alert show variant="warning" align="center">
        <h4>{{msg}}</h4>
      </b-alert>
    </b-col>
  </div>
</template>

<script>
  export default {
    name: "HelloBootstrap",
    props: {
      msg: String
    }
  };
</script>

Comentários

linha 3: a tag <b-alert show> exibe um retângulo colorido no qual geralmente se insere um texto (linha 6). O atributo [variant] permite selecionar um tipo de alerta. Cada tipo de alerta possui uma cor de fundo diferente. A cor da variante [success] é o verde. O atributo [align] permite alinhar o texto do alerta (à esquerda, à direita ou centralizado). Observe-se que o atributo [show] é obrigatório para exibir o alerta. Sem esse atributo, o alerta não fica visível;
os valores possíveis para [variant]:
- [primary]: azul;
- [secondary]: cinza;
- [success]: verde;
- [danger]: vermelho claro;
- [warning]: amarelo;
- [info]: turquesa;
- [light]: sem cor de fundo;
- [dark]: cinza um pouco mais escuro que [secondary];
linha 12: [msg] é um parâmetro do componente [HelloBootstrap] (linhas 21-23);

A exibição visual é a seguinte:

[1]: tag <b-alert show variant=’success’>;
[2]: tag <b-alert show variant=’warning’>;

4.5. Execução do projeto

Para executar o projeto, primeiro é necessário modificar o arquivo [package.json]:

para [3], altera-se o script executado pelo comando [serve] [2] do arquivo package.json [1];
no [4], executa-se o projeto;

Observação: em todo o texto a seguir, utilizaremos as tags do framework BootstrapVue, que têm o formato <b-alguma-coisa>. Isso não é obrigatório. É possível utilizar as tags originais do framework Bootstrap. Elas funcionam nos modelos do [Vue.js]. Assim, o desenvolvedor acostumado com as tags do Bootstrap pode continuar a utilizá-las.