Veja nesse artigo
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!!