Olá Devs! hoje mostro como iniciar um projeto vue.js em 2023 de forma simples e rápida, com o ambiente de desenvolvimento vite
Links Ăšteis
- Vitejs - Next Generation Frontend Tooling
- Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
- Pinia | The intuitive store for Vue.js (vuejs.org)
Iniciando o vite
Para podermos iniciar um projeto com vite precisamos ter o nodejs instalado no computador, a partir daĂ Ă© preciso abir o cmd(prompt de comando), e iniciarmos o projeto com npm ou yarn(se vocĂŞ tiver instalado):
$ npm create vite@latest$ yarn create vite
Configurando o projeto
Após digitar um dos comandos do tópico anterior, você irá se deparar com uma tela parecida com a da imagem acima, aqui você terá que digitar o nome do projeto no campo “Project name”, logo em seguida terá que escolher a tecnologia do projeto, então basta usar as setas do teclado para cima ou para baixo para mudar a seleção e selecionar vue
Selecionando a linguagem
Quando você selecionar Vue como tecnologia do projeto, terá que selecionar qual será a linguagem do projeto, se será javascript ou typescript, mas isso fica a seu critério.
Instalando dependĂŞncias
Assim que selecionar a linguagem e der enter, a configuração terá acabado, agora precisamos instalar as dependências do nosso projeto, ou seja, os pacotes npm que vão criar nosso projeto, isso inclui o vuejs e outras, para isso basta rodar o comando cd nome_do_projeto assim você entrará na pasta do seu projeto direto pelo cmd, após isso executar o comando yarn install ou npm install que instalará todos os pacotes necessários para nosso projeto.
Iniciando servidor local
Quando terminar de instalar todas os pacotes, é só rodar o comando yarn dev ou npm run dev para iniciar o servidor local na sua maquina, com o servidor iniciado, o seu cmd terá uma tela parecida com a da imagem acima, feito isso basta acessar a url http://localhost:5173/ em seu navegador
Quando acessar a url do seu servidor local, será aberto uma pagina parecida com esta da imagem acima, contendo alguns exemplos de coisas que dá para fazer com o vue.js
Projeto no editor de cĂłdigo
Ao abrir seu projeto no editor código de sua preferência, verá que temos um código bem simples, apenas com um componente “HellowWorld.vue” com demonstrações simples do vue.js, A partir daqui você já pode começar a criar sua página do seu jeito.
BĂ´nus
No inicio do post, coloquei alguns links que podem lhe ajudar com seus projetos vue.js, incluindo o Tailwindcss que ajuda e muito no desenvolvimento de estilos e diminuindo o tempo que passamos escrevendo css, Pinia que é um gerenciador de estado global para o vue.js que ajuda para na hora de criamos estados que precisam ser acessados em toda a aplicação, e junto coloquei também a documentação do Vite, caso surja alguma dúvida
Links Ăšteis
- Vitejs - Next Generation Frontend Tooling
- Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
- Pinia | The intuitive store for Vue.js (vuejs.org)
Post criado e publicado com đź’™ por LuĂs DavĂ
👾Portifólio 🚀Github 📸Instagram
Top comments (0)