badge Recriando o Tradicional Jogo Pedra, Papel e Tesoura em Vue.js
PROJECTS

Recriando o Tradicional Jogo Pedra, Papel e Tesoura em Vue.js

Nesse projeto iremos construir um jogo de Pedra, Papel e Tesoura, onde introduzirei além de conceitos chaves de Vue.js, boas práticas de desenvolvimento e duas importantes bibliotecas: Vue Router para tratar o roteamento de páginas e Vuex para gerenciamento do estado da aplicação, também armazenaremos dados no localStorage do browser e toda aplicação será responsiva utilizando SASS, Flexbox e CSS Grid.

AdvancedFront-End
Vue.js image
Vue.js
Start the challenge

Fill in your data

By clicking on "Start Now", I declare that I accept the Privacy Policies of the Terms of Use da DIO.

What you will develop </>

Objetivo: O objetivo deste projeto é criar um jogo funcional de Pedra, Papel e Tesoura utilizando Vue.js e demonstrar o uso de conceitos chaves da tecnologia, além de introduzir boas práticas de desenvolvimento. Serão utilizadas as bibliotecas Vue Router e Vuex para tratar o roteamento de páginas e o gerenciamento do estado da aplicação, respectivamente. Além disso, os dados serão armazenados no localStorage do browser e a aplicação será responsiva utilizando SASS, Flexbox e CSS Grid.

Requisitos Técnicos:
- Conhecimento em Vue.js e sua sintaxe básica.
- Familiaridade com HTML, CSS e JavaScript.
- Experiência com SASS, Flexbox e CSS Grid.
- Compreensão dos conceitos de roteamento de páginas (Vue Router) e gerenciamento de estado (Vuex).
- Conhecimento sobre o uso do localStorage do browser para armazenar dados.
- Capacidade de trabalhar em um ambiente de desenvolvimento Vue.js, com acesso ao Vue CLI e outras ferramentas relevantes.

Descrição: Neste projeto prático, iremos recriar o tradicional jogo Pedra, Papel e Tesoura utilizando a tecnologia Vue.js. Além de implementar a lógica do jogo em si, vamos explorar e discutir conceitos importantes do Vue.js, como a criação de componentes, manipulação de dados reativos e a utilização de diretivas.

Também serão abordadas boas práticas de desenvolvimento, como a estruturação de um projeto Vue.js e a separação de responsabilidades entre os componentes.

Além disso, utilizaremos as bibliotecas Vue Router e Vuex para tratar o roteamento de páginas e o gerenciamento do estado da aplicação, respectivamente. O Vue Router será utilizado para navegarmos entre as páginas do jogo, enquanto o Vuex será responsável por armazenar e compartilhar o estado entre os componentes.

Para tornar a aplicação mais dinâmica, os dados serão armazenados no localStorage do browser, permitindo que o usuário possa retomar o jogo de onde parou, mesmo que a página seja atualizada ou fechada.

Por fim, a aplicação será responsiva, utilizando técnicas como SASS, Flexbox e CSS Grid, garantindo que o jogo se adapte a diferentes tamanhos de tela e dispositivos.

Espera-se que ao final do projeto, os participantes tenham adquirido um conhecimento sólido sobre o uso do Vue.js, Vue Router, Vuex e as técnicas de responsividade, além de terem uma compreensão de como aplicar essas tecnologias em projetos reais.

image
image EDUCAÇÃOimage EMPREGABILIDADEimage COMUNIDADE
image

Torne-se a opção Nº 1 dos recrutadores e conquiste as melhores vagas do mercado tech

From R$ 718,80 per
R$29
,90 /month
in the annual plan
START NOW

Com o o DIO PRO você irá:

  • image fy section

    Acesso ilimitado a todos os bootcamps

    E mais de 40 formações profissionais do zero ao avançado para você dominar as tecnologias nas carreiras front-end, back-end, data & analytics, mobile, cloud & DevOps e se preparar para trabalhar em grandes projetos nas empresas mais inovadoras do mundo

  • image fy section

    Mais de 180 projetos práticos para ganhar experiência

    Libere acesso ilimitado a uma área com mais de 180 projetos e 650 cursos para você aprender, comprovar experiência prática e ter um portfólio de destaque no mercado

  • image fy section

    Fazer parte das maiores e mais inovadoras empresas do mundo

    Certifique suas habilidades, ganhe experiência, suba no ranking de talentos e fique em destaque para recrutadores de empresas como iFood, Santander, Carrefour e outras dezenas que contratam profissionais na DIO.

    image

About DIO

ACADEMIA PME EDUCACAO E CONSULTORIA EM NEGOCIOS LTDA.
CNPJ: 26.965.884/0001-02

DIO is the largest technology continuous learning community in Latin America, which connects the best talent with the most innovative companies in the world.

A complete educational ecosystem for learning in software development, data engineering, software quality and cloud computing.