CharlyesRodrigues/Portifolio_Vue

Requisitos:

1. A lista de tecnologias deve ser um array onde no HTML você irá fazer um map para listar

2. Ao clicar no botão de linguagem o texto de apresentação "Olá meu nome...." muda para a linguagem selecionada

3. O botão de linguagem deve ser um componente onde você passará 3 propriedades: Título, ícone e o click dele

4. Nesse projeto eu utilizei o Vue com Tailwind CSS

O que é o VUE ?

O Vue.js é um framework Javascript open source bastante conhecido pela sua reatividade. Usado para construir SPA (Single Page Applications) e interfaces de usuário, tornou-se uma excelente opção, também, pelo fato de ter componentes reutilizáveis e proporcionar o desenvolvimento ágil.

Passo a passo do Projeto

Abrir o powershell e instalar a CLI do VUE

CLI=> npm install -g @vue/cli

Podemos começar o projeto digitando:

• npm init vue@latest ou
• vue create e o nome do projeto

Após a criação vai aparecer 3 opções e eu escolhi a primeira

Vue CLI v5.0.8

? Please pick a preset: (Use arrow keys)

Default ([Vue 3] babel, eslint)

Default ([Vue 2] babel, eslint)

Manually select features

Depois do comando acima é só selecionar o projeto com o comando cd + nome da pasta, digitar 'code' para abrir o

VsCode e depois no terminal digitar 'npm run serve' que irá abrir o browser do projeto

App running at:

• Local: http://localhost:8080/
• Network: http://192.168.0.2:8080/

assets => contém as imagens de nosso projeto

Babel(Transpilador) => transforma o nosso código vue em JavaScript

O package. json => é um arquivo de um projeto javascript que é responsável por guardar informações, scripts e controle de versionamento de bibliotecas do projetos. Essas dependências são gerenciadas pelo NPM.

Componentes são instâncias reutilizáveis do Vue com um nome. Podemos usar esses componentes como um elemento personalizado dentro da instância Vue raiz criada .

Um app Vue acopla-se a um único elemento da DOM ( #app no nosso caso) e então o controla completamente. O HTML é o nosso ponto

de entrada.

INSTALANDO O TAILWIND

1º => npm install -D tailwindcss postcss autoprefixer

2º => npx tailwindcss init ( gera o arquivo de configuração do tailwind)

Instalando o arquivo postcss.config.js => npm install -D tailwindcss postcss autoprefixer

Adicione Tailwind à sua configuração PostCSS,

Configure seus caminhos de modelo em tailwind.config.js arquivo,

Adicione as diretivas Tailwind ao seu CSS,

Inicie seu processo de construção

Execute seu processo de compilação com npm run dev ou qualquer comando configurado em seu package.json arquivo,

Comece a usar o Tailwind no seu HTML.