Olá

Venho aqui apresentar

DESAFIO WEB 3.0 STACKX

Lançados 03 projetos que fazem parte do Módulo Web 3.0 do Curso StackX - Formação de Desenvolvedores de Software.

Requisitos para o Desafio:

A lista de tecnologias deve ser um array onde no HTML você irá fazer um map para listar;
Ao clicar no botão de linguagem o texto de apresentação ”Olá meu nome....” muda para a linguagem selecionada;
O botão de linguagem deve ser um componente onde você passará 3 propriedades: Título, ícone e o click dele;
Para estilização

React use Styled Components
Angular use Sass
Vue use Tailwind CSS

Suas aplicações vão ser:

Ferramenta Do Desafio⁉

Linguagem Tecnológica do Desafio:

3º Desafio VUE.JS

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.

Clique aqui para acessar o Projeto

Passo a Passo do Projeto:

Instalando para o projeto em vue.js no terminal power shell

1º Para instalar o pacote vs.js, use o seguinte comando:

yarn global add @vue/cli

2º Após a instalação, você terá acesso ao vue binário em sua linha de comando. Você pode verificar se ele está instalado corretamente simplesmente executando👇

vue –version

3º Criando o Projeto Vue

vue create nome do projeto ( ex. projetovew-web3.0)

Quando perguntar digita: `Default ([Vue 3] babel, eslint)`

Quando perguntar digita: `Use Yarn`

No terminal ao finalizar vai imprimir

cd Nome do Projeto

yarn serve

Aguarda a instalação dos pacotes no projeto,

E altera copiando e colando para a pasta do projeto que foi criado antes de abrir no VSCode com o comando.

cd nomepastaprojeto

4º Agora sim vai Abrir o Projeto no Terminal para a ferramenta VSCode, digitando 👊

code .

## Dentro do editor de código VSCode no ```terminal power shell```:

Atualizando o Pacote:

npm update -g @vue/cli.

Instalando Tailwindcss init (Framework CSS)

npx tailwindcss init

Funciona verificando todos os seus arquivos HTML, componentes JavaScript e quaisquer outros modelos para nomes de classe, gerando os estilos correspondentes e, em seguida, gravando-os em um arquivo CSS estático. É rápido, flexível e confiável — com tempo de execução zero.

Adicionando o plugin vue-i18n

yarn add -D @intlify/vite-plugin-vue-i18n

O plugin integra facilmente recursos de localização ao seu aplicativo Vue.js.

Instalando Vuex

npm install vuex @next --save

O Vuex é um padrão de gerenciamento de estado + biblioteca para aplicações Vue. js. Ele serve como um store centralizado para todos os componentes em uma aplicação, com regras garantindo que o estado só possa ser multado de forma previsível ao servidor.

Executar o projeto no servidor:

yarn serve

Vai compilar na porta - Local: http://localhost:8080/

Idéia sobre definição “Babel”

É um Transpilador JavaScript de código aberto, o Babel foi lançado sobre a licença MIT e possui como uma das principais características converter código JavaScript atual em uma versão que o navegador possa executar.

rafarz76dev / 03.desafiostackx-web3.0-vue.js Goto Github PK

03.desafiostackx-web3.0-vue.js's Introduction

Olá