Como Criar Projeto VueJS

O que você vai ver aqui!

Introdução

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

O que é o Vue

Resumidamente, VueJS é um framework front-end progressivo que permite a construção de interfaces de usuário. Sobretudo, foi projetado para ser adotado de forma incremental. Além disso, 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, portanto você deve ter o NPM instalado (mas se você tiver instalado o NodeJs, o NPM vem junto). Porém, 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:

Link do vídeo: https://youtu.be/i9WWMSZtS8Q

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