Os componentes do estilo Vue com CSS podem ajudar os desenvolvedores a adicionar estética de design a seus aplicativos, incluindo cores de fundo, tamanho da fonte, preenchimento, posicionamento, animação e telas responsivas para diferentes tamanhos de tela.

Com as diretivas Vue, você pode gerenciar a vinculação de classes e estilos dentro do modelo. Você também pode usar estilos embutidos nos componentes ou usar um arquivo CSS externo para manter nosso aplicativo organizado.

Neste artigo, exploraremos diferentes maneiras de definir o estilo dos componentes do Vue com CSS, criando uma página da web simples.

Pré-requisitos

Antes de seguir este tutorial, existem algumas coisas que você deve verificar. Em primeiro lugar, você precisará de um editor de código, de preferência Visual Studio Code . Em seguida, verifique se você tem o Node.js versão 10.x ou superior instalado executando o seguinte em seu terminal:

: node-v 

Você também precisará do CLI mais recente do Vue. Para obter a versão mais recente, desinstale a versão CLI antiga primeiro:

 npm uninstall-g @ vue/cli id="ou"> # ou
yarn global remove @ vue/cli 

Em seguida, instale a versão mais recente:

 npm install-g @ vue/cli
# OU
yarn global add @ vue/cli

Como alternativa, você pode atualizar a versão da seguinte maneira:

 atualização npm-g @ vue/cli # OU
atualização global de fios--latest @ vue/cli
> 

O repo para esta demonstração também pode ser encontrado aqui . Eu também recomendo verificar uma lista das principais bibliotecas de componentes do Vue para mais lendo.

Configure seu projeto Vue

Para criar um novo projeto, execute:

 vue criar 

Você será solicitado a escolher uma predefinição. Você pode escolher:

1. A predefinição padrão que vem com uma configuração básica Babel + ESLint
2. visualização do Vue 3 ou
3. Selecione “Selecionar recursos manualmente” para escolher os recursos de que você precisa

A seguir, mudaremos o diretório:

 cd 

E nos prepararemos para visualizar em um host local:

 npm run servir ou servir de fio

Use o atributo scoped para estilizar no Vue

O atributo scoped anexado à tag style abaixo significa que qualquer estilo CSS definido aqui só será aplicado a este modelo e não fora do componente/modelo.

Primeiro, crie um componente navbar , denominado “Navbar”:

//@/components/Navbar.vue 


.navbar { plano de fundo: # f44336; preenchimento: 1rem; tamanho da fonte: 1.5rem; borda inferior: 1px branco sólido; }
.navLink {
alinhamento de texto: centro;
}
uma{ decoração de texto: nenhum; preenchimento: 1rem; cor: #fff; alinhamento de texto: centro;
}
tela somente @mídia e (largura máxima: 600px) { .navLink { display: flex; direção flexível: coluna; }
}

> 

No exemplo acima, criamos um componente navbar . Dentro dele, usamos um atributo scoped para estilizar a barra de navegação. Isso significa que todos os estilos CSS definidos aqui serão aplicados apenas nos componentes navbar .

Link com um arquivo CSS externo

À medida que nosso aplicativo fica maior com muito CSS, eu recomendaria separar os estilos CSS em um arquivo CSS externo e vinculá-lo ao componente. Esta é apenas uma das muitas maneiras de limpar seu código .

Aqui está um exemplo:

//@/components/Body.vue   

Seu componente acima será vinculado ao arquivo CSS externo abaixo:

//@/assets/css/startpage.css'; .página inicial { altura: 600px; cor de fundo: # f44336; alinhamento de texto: centro;
}
h2 { padding-top: 10rem; tamanho da fonte: 4rem;
}
.btn { fundo: preto; cor: #fff; raio da borda: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; esboço: nenhum; preenchimento: 0.7rem 2rem; fronteira: nenhum; margem superior: 2rem;
}

Ao usar um arquivo externo, você pode vinculá-lo ao próprio arquivo de origem ou importá-lo na tag style . Para este exemplo, vinculamos o arquivo CSS externo que criamos na pasta de ativos em nosso aplicativo Vue.

Use estilos globais em Vue.js

Existem alguns estilos que queremos aplicar aos componentes do nosso aplicativo. Para fazer isso de forma eficiente, usaremos um estilo global, em vez de estilizá-los em um arquivo externo ou com escopo (embora isso também funcione). Se você deseja criar estilos gerais como fontes , cores , cor de fundo , raio de borda e margin , o estilo global é sua melhor opção.

Em nosso exemplo abaixo, vamos adicionar nosso estilo global em nossa tag App.vue style .

//@/src/App.vue 

Como você notará, usamos um seletor de caracteres curinga CSS (pronunciado como um asterisco) para selecionar todos os elementos em nosso aplicativo. Neste caso, a margin e padding em todos os elementos foi definida como 0 , e box-sizing foi foi definido como border-box .

Use estilo embutido

Um CSS embutido é usado para aplicar um estilo único a um elemento HTML específico usando o atributo style.

Aqui está um exemplo simples:

 
 Sou um rodapé 

Em Vue.js, podemos adicionar um estilo embutido ao nosso elemento vinculando o atributo de estilo na tag HTML. Para referência, : style é uma abreviação de v-bind: style .

O estilo embutido pode ser feito de duas maneiras: usando sintaxe de objeto ou sintaxe de array. Discutiremos ambos a seguir.

Sintaxe do objeto

A sintaxe do objeto nos permite usar estilo embutido, colocando o nome do atributo CSS como o nome da chave do objeto e os valores como o valor de cada atributo CSS. Ao usar a sintaxe de objeto, use camelCase ou “kebab-case”, como no exemplo abaixo.

//@/components/Footer.vue 

Neste caso, criamos um componente footer e, em seguida, usamos a sintaxe do objeto para estilizar o elemento do rodapé.

Com a abordagem da sintaxe do objeto, é uma boa prática vincular-se a um objeto de estilo diretamente para que, à medida que nosso aplicativo fica maior, nosso modelo fica mais limpo. Verifique no seguinte exemplo:

   
 & copy; 2020 
 

Sintaxe de array

O outro método de estilo embutido é adicionar vários objetos de estilo com a sintaxe de array. No exemplo a seguir, adicionaremos um objeto extra na sintaxe do array- textColor -que mudará a cor do texto para vermelho:

Quando você deseja adicionar vários objetos de estilo como mostrado no exemplo acima, é melhor usar a sintaxe de array; para estilizar classes dinamicamente, a sintaxe do objeto é o melhor método para estilização embutida.

Conclusão

Neste tutorial, aprendemos sobre as diferentes maneiras de estilizar nosso aplicativo Vue.js, incluindo estilo com escopo, vinculação a arquivos CSS externos, estilo global e estilo embutido com objeto e sintaxe de array. Também criamos um site simples para ilustrar como aplicar os diferentes métodos de estilo.

A postagem Estilizando um aplicativo Vue.js usando CSS apareceu primeiro no LogRocket Blog .

Source link