Pular para o conteúdo

Programando Soluções

Como Criar Projeto VueJS

Introdução

Neste tutorial, será abordado como criar um projeto novo utilizando o VueJS

O que é o Vue

De forma bem resumida, o Vue é um framework front-end progressivo que permite a construção de interfaces de usuário e foi projetado para ser adotado de forma incremental. Com ele, você pode separar o HTML em componentes ganhando mais organização para o projeto, facilitando a manutenção e entre outros benefícios.

Pré requisitos

  • Editor de código (Visual Studio Code, Sublime Text)
  • NPM

Iniciando um projeto Vue

A maneira mais fácil é utilizando o vue-cli, para isso você deve ter o NPM instalado (caso você tenha instalado o NodeJs, o NPM vem junto), se você ainda não tiver instalado, faça o download nesse link. Caso não tenha certeza se o NPM está instalado, abra o terminal e digite npm –version, se estiver instalado, deve aparecer a versão do seu NPM.

Para instalar o vue-cli, abra o terminal e digite o seguinte comando:

npm install -g vue-cli

Depois de instalado, é possível iniciar projetos com o Vue, para isso, abra uma pasta do seu computador, pode ser alguma pasta que você destina a projetos e digite o comando:

vue create meuProjetoVue

Quando executar esse comando, o Vue te dará duas opções de instalação, a opção padrão, ou a opção na qual você pode selecionar as dependências manualmente, para este tutorial, selecione a opção padrão.

Depois disso o seu projeto já estará pronto, e para conferir ele rodando, no terminal, a partir da pasta que você instalou, entre na pasta do projeto vue com o comando:

cd meuProjetoVue

E dentro da pasta digite o comando:

npm run serve

Com isso, pode demorar um pouquinho, porque o Vue está fazendo o build do seu projeto, quando finalizar ele vai subir o servidor no endereço http://localhost:8080

Ao acessá-la você verá a tela de início do seu projeto Vue

Conclusão

Pronto, agora está tudo configurado para você utilizar seu projeto Vue, vale lembrar que qualquer alteração que você fizer no projeto, o Vue irá compilar novamente sozinho, e irá atualizar a tela sem que você precise apertar F5.

Se preferir, gravei um vídeo sobre o assunto, veja em https://youtu.be/i9WWMSZtS8Q

Estarei a disposição para dúvidas e sugestões, obrigado e até a próxima!!

Este conteúdo te ajudou de alguma forma?

Usamos cookies para lhe proporcionar a melhor experiência possível no nosso site. Ao continuar a usar este site, você concorda com o uso de cookies.
Ok