Live Coding Twitch.tv: Desenvolvendo uma Calculadora em Vue.js

Repositório responsável pelo live coding realizado no canal Twitch.tv

Recursos Utilizados no Desenvolvimento da Aplicação 🚀

• Visual Studio Code
• Node.Js
• Vue
• Vue CLI
• Azure App Service
• [Extensões Vue.js Usadas no Projeto]
  • Vue 2 Snippets:
  • Vetur
  • Vue
  • Vue VSCode Snippets

O que eu vou Aprender?! 📘

Nesse live conding, que será divido em séries de vídeos e posts em Medium, estaremos desenvolvendo uma Calculadura em Vue.js. No final, estaremos realizando o deploy e host da aplicação na Nuvem usando o Azure App Service, direto pelo Visual Studio Code.

Essa será a primeira fase de muitos outros projetos em Vue.js que estaremos desenvolvendo no decorrer do ano, visando ensinar, por meio de projetos, do básico ao avançado uma aplicação Vue.js As fases serão divididas em 4:

• Iniciante (Fase 1)

  • Desenvolvimento de uma Calculadora em Vue.js

• Intermediário (Fase 2)

  • Desenvolvimento de um Todo-List com Vue.js

• Avançado (Fase 3)

  • Desenvolvimento de uma Aplicação MEVN (Mongo, Express, Vue & Node)

• Avaçando+ (Fase 4)

  • Desenvolvimento de uma Aplicação E-Commerce com Vue.js (Conceitos de Serverless)

Pré-Requisitos 📕

Para seguir com esse tutorial, se faz necessário tem alguns pré-requisitos. Entre eles saber: HTML, CSS e JavaScript. Caso não tenham, indicarei os dois cursos abaixo:

• Criar um site simples usando HTML, CSS e JavaScript
• Desenvolver aplicativos Web com o Visual Studio Code

Vídeos da Série 📺

Toda sexta-feira ou domingo, às 22h pelo canal do Twitch.tv e simultaneamente pelo Youtube. Sempre no final de cada live, estarei escrevendo um post, como desenvolver o projeto passo a passo através do site Medium

Abaixo segue a lista de vídeos já disponíveis:

• Desenvolvimento de uma Calculadora com Vue.js - Parte I

(Em Desenvolvimento)

• Desenvolvimento de uma Calculadora com Vue.js - Parte II

• Desenvolvimento de uma Calculadora com Vue.js - Parte III

• Desenvolvimento de uma Calculadora com Vue.js - Parte IV

Executar Localmente o Projeto 🔥

Caso você deseja executar o projeto na sua máquina local, basta seguir os passos abaixo:

Começando... 🌀

Para começar, você deve simplesmente clonar o repositório do projeto na sua máquina e instalar as dependências.

Instalando as Dependências (via Windows): ❗️

Abre o cmd (caso esteja utilizando o Windows) e digite a path do seu projeto

cd "C:\Users\NomeDoComputador\Documents\..."

Depois, quando estiver na pasta do projeto, basta digitar no cmd a seguinte instrução: (dentro do calculadora-app)

npm install

Ao digitar a instrução acima, automaticamente ele irá baixar todas as dependências listadas e definidas no arquivo package.json:

• node_modules - que contêm os packages do npm que precisará para o projeto.

Executando a Aplicação 💨

Bom, agora na mesma tela do cmd, basta iniciar o server para o projeto ser executado localmente.

> npm run dev

Links & Recursos Importantes

Tenho Dúvidas... O que Faço?! 🚩

Caso tenha dúvidas ao código desenvolvido durante o live coding, sinta-se a vontade em abrir uma ISSUE AQUI no repositório com a sua dúvida. Assim que possível, estarei respondendo as todas as dúvidas que tiverem!

(documentação em desenvolvimento)