4. Projeto [vuejs-02]: utilização do framework Bootstrap CSS

O projeto [vuejs-02] apresenta a utilização do Bootstrap num projeto [vue.js]. É o framework CSS que será utilizado em todos os nossos projetos. Iremos utilizar uma variante do Bootstrap denominada [BootstrapVue] [https://bootstrap-vue.js.org/].

A estrutura do projeto será a seguinte:

Nota: na sequência deste documento, a pasta [vuejs] foi renomeada para [cours] [1].

4.1. Instalação do framework [BootstrapVue]

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

no [1], são, portanto, dois frameworks que se instalam: o [Bootstrap] e a sua variante [BootstrapVue];
no [2], as duas dependências aparecem no ficheiro [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'

// plugins
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 vista principal;
linha 6: importação do framework [BootstrapVue];
linha 7: este framework foi concebido como um plugin do framework [Vue]. A linha 7 inclui este plugin no framework [Vue];
linhas 10-11: importação dos ficheiros CSS dos frameworks [Bootstrap] e [BootstrapVue];
as linhas 5-11 são, portanto, inteiramente dedicadas à utilização do [BootstrapVue]. O resto 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 balizas <b-xx> são balizas do framework [BootstrapVue];
linhas 2, 20: a baliza <b-container> define um contentor Bootstrap. Dentro deste contentor, poderemos definir linhas com a baliza <b-row> e colunas com a baliza <b-col>;
linhas 3, 19: a baliza <b-card> define um «cartão» Bootstrap. Visualmente, isto traduz-se num retângulo com uma moldura;
linhas 5, 17: a baliza <b-jumbotron> permite destacar uma parte da página, neste caso uma imagem e um texto. Iremos utilizá-la nos nossos diversos projetos como identificação visual do projeto;
linha 7: a baliza <b-row> define uma linha;
linhas 9-11: a baliza <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. Coloca-se aí um texto;
linha 18: utilização de um componente denominado [HelloBootstrap] com uma propriedade denominada [msg];
linhas 24-33: a parte <script> do componente;
linhas 29-31: o componente [HelloBootstrap] utilizado na linha 18 é exportado. Para ser reconhecido, tem de ser importado na linha 25;

O resultado é o seguinte:

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

4.4. O componente [HelloBootstrap]

[HelloBootstrap] é o componente seguinte:


<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 baliza <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 tem uma cor de fundo diferente. A cor da variante [success] é o verde. O atributo [align] permite alinhar o texto do alerta (à esquerda, à direita ou centrado). Note-se que o atributo [show] é obrigatório para exibir o alerta. Sem este atributo, o alerta não é visível;
os valores possíveis de [variant]:
- [primary]: azul;
- [secondary]: cinzento;
- [success]: verde;
- [danger]: vermelho claro;
- [warning]: amarelo;
- [info]: turquesa;
- [light]: sem cor de fundo;
- [dark]: cinzento ligeiramente mais escuro do que [secondary];
linha 12: [msg] é um parâmetro do componente [HelloBootstrap] (linhas 21-23);

O resultado visual é o seguinte:

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

4.5. Execução do projeto

Para executar o projeto, começa-se por alterar o ficheiro [package.json]:

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

Nota: em tudo o que se segue, utilizar-se-ão as balizas do framework BootstrapVue, balizas do tipo <b-alguma-coisa>. Isto não é obrigatório. É possível utilizar as balizas originais do framework Bootstrap. Estas funcionam nos modelos do [Vue.js]. Assim, o programador habituado às balizas do Bootstrap pode continuar a utilizá-las.