𝕏 (Twitter) Descentralizado

Inicilizando o projeto Vue

Agora, nós vamos começar a desenvolver a parte do front-end, ou seja, nós vamos criar a parte visual da aplicação que vai permitir que os usuários interajam com os contratos inteligentes.

Para isso, nós vamos usar Vue como framework javascript, tailwind como framework css, GitHub para salvar nosso código e Vercel para subir nosso código para produção.

Para começar, nós vamos abrir o projeto x-smart-contracts no VSCode, abrir o terminal, digitar cd .. e dar Enter.

Rode o seguinte comando para inicializar um projeto Vue:

npm create vue@latest

Quando perguntar sobre o Project name: (nome do projeto) você pode inserir x-front-end, apertar Enter e ir apertando Enter na opção "No" para todas outras alternativas.

Se você já tem experiência com desenvolvimento web, fique à vontade para habilitar TypeScript e ESLint.

Depois disso seu terminal deve ter ficado assim:

Em seguida, você vai rodar o código cd x-front-end, depois code . para abrir um novo VSCode reservado para o projeto front-end.

Dentro desse novo projeto, abra o terminal, rode o código npm install (para instalar as dependências do projeto) e npm run dev (para rodar o projeto na sua máquina).

Você está rodando um projeto Vue na sua máquina! Acesse o site http://localhost:5173/ e você verá algo semelhante à essa imagem abaixo: