Como Criar Um Projeto Com Vite

Todo Dev tem suas ferramentas  de trabalho e ajuda na sua função. Nos últimos anos surgiram inúmeros para quem é Front-End. Muitas  voltadas para automatização de tarefas e facilidades para o desenvolvimento, como o Gulp e Grunt. Frequentemente sempre aparece novas, como é o caso do WebPack, que é uma ferramenta de excelente de desenvolvimento e de build de projeto. Atualmente existe uma excelente ferramenta chamada Vite. Uma ferramenta simples, rápida  e repleta de opções para trabalhar com as tecnologias Front-End Atuais. Na minha opinião, é uma ferramenta simples e completa, principalmente quando cria um projeto.  Mas Como Criar Um Projeto Com Vite?

Site Vite
Site Vite

Antes de mais nada, o Vite é uma ferramenta para desenvolver um projeto Front-End JavaScript que  você pode fazer um projeto com vários frameworks como React, Vanilla, Vue, Svelte, Lit e afins. Além de ser fazer um Build muito rápido,  e o principalmente o Vite nos ajuda em muito em poupar  tempo configurando outras funções e scripts JS. Em contrapartida, por ser uma ferramenta muito boa, podemos dizer que é um sucessor do Vue Cli, que está em manutenção um bom tempo. Bem como que quem for iniciar um projeto com Vue 3, é indicado usar o Vite.

O que precisa para instalar o Vite?

Para criar um projeto com o Vite, você precisa basicamente  ter o Node.Js instalado em seu computador. Seja Windows,  MacOS  ou Linux. O comando para instalar vai ser o mesmo.

Se você tem um computador do Windows, pode usar o terminal do próprio Windows. Vou deixa logo abaixo uma lista de tutoriais para você que usa o Windows.

Aprenda a Como Criar Um Projeto Com Vite

Primeiramente, devemos saber onde vai ficar o projeto. No exemplo que vou usar, criei um diretório no disco C:\,  cujo o nome vai ser “projeto“. Isso não impede de você crie em outro lugar, como na pasta de documentos.

Pasta base do projeto com Vite
Pasta base do projeto com Vite

 

Em seguida, vamos usar um terminal ou um prompt de comando(CMD), se for Windows. Eu vou usar o Windows Terminal, que ensinei a instalar aqui neste blog. Vamos digitar o caminho da pasta, no caso  é.

cd C:\projetos
Digitando no terminal caminho da pasta base projeto Vite
Digitando no terminal caminho da pasta base

 

Em seguida, já dentro da pasta base, temos que digitar um comando simples para começar a criar o projeto.

npm create vite@latest
Comando NPM para a instalação do projeto do Vite
Comando NPM para a instalação do projeto

 

Em seguida, no terminal vai perguntar qual o nome do projeto, basta digitar o nome que você deseja e aperte Enter.

Nome do projeto com Vite escrito
Nome do projeto que vai ser usado

 

Na próxima etapa irá aparecer perguntar as características do projeto como tipo(Vue, js puro, React e afins). Neste exemplo vou usar o Vanilla, que é o JavaScript puro.

Escolhendo o tipo de projeto no Vite
Escolhendo o tipo de projeto no Vite

 

Em seguida, vamos escolher entre as opções TypeScript ou JavaScript. Escolhi a opção JavaScript que é uma forma de opção padrão e mais tranquila de trabalhar e aperte Enter.

Escolhendo o tipo de tecnologia no projeto no Vite
Escolhendo o tipo de tecnologia no projeto no Vite

 

Após escolher todas as características o projeto e apertar Enter, agora vai instalar o projeto e vai ser exibida uma mensagem que está tudo ok e uns comando para instalar os módulos do node e como rodar o servidor local.

Projeto com Vite instalado
Projeto com Vite instalado

 

Se fomos agora na pasta do projeto, vamos ver a estrutura básica de um projeto do Vite usando Vanilla. Reparem que ainda não tem os módulos do Node do Vite instalados.

Pasta de um projeto criado com Vite
Pasta de um projeto criado com Vite

 

Instalando Módulos Node do Vite

Agora, vamos instalar os módulos do node do Vite com o NPM. Primeiramente vamos entrar dentro da pagina do projeto pelo terminal pelo comando  cd

cd projeto-com-vite
Entrado dentro da pasta do projeto com Vite
Entrado dentro da pasta do projeto com Vite

 

Em seguida, vamos digitar o comando npm install, que nem foi exibido quando criamos o projeto com o Vite.

npm install
Instalando dependências NPM em projetos com Vite
Instalando dependências NPM em projetos com Vite

 

Logo após a instalação dos módulos, vai ser exibido uma mensagem que foram instalados os módulos.

Iniciando Servidor Local Com Vite

Para fazer o projeto rodar em um servidor local, vamos voltar naquela tela que terminamos de instalar e lá tem o comando. Basta digitar  npm run dev. Logo após digitar,  vai ativar este servidor local  e disponibiliza uma url para ao projeto com Vite funcione. Basta copiar e colar no seu navegador.

npm run dev
Iniciando servidor local no projeto com Vite
Iniciando servidor local no projeto com Vite

 

Logo após digitar o endereço  no navegador, vai carregar seu projeto  e já pode trabalhar nele.

Projeto Vite funcionando em servidor local
Projeto Vite funcionando em servidor local

 

 

O que você achou disso?

Clique nas estrelas

Média da classificação 5 / 5. Número de votos: 2

Nenhum voto até agora! Seja o primeiro a avaliar este post.

Blog Do mangia

Carioca, gamer e dev web, trabalha há quase 10 anos na área. Já desenvolvi grandes portais, blogs e paginas de vendas Atualmente estou mais focado na parte de front-end e usabilidade web.

Deixe um comentário

cinco + oito =