Vamos iniciar uma série de VueJS,  para começar é necessário que você tenha seu ambiente de desenvolvimento pronto, para acompanhar a série. Vamos precisar instalar 2 coisas para iniciar seu desenvolvimento Vue:

  1. Instalar o Node.js
  2. Instalar o Vue CLI

O que vamos aprender?

  1. Preparar ambiente VueJS
  2. Criar nosso primeiro projeto Vue

Siga nosso passo a passo à risca para ter o resultado final esperado. Vamos lá.

  1. Instalando NodeJS

1)Acesse o site do NodeJS nodejs.org e baixe-o:

2) Clique o instalador e depois em Next

3) Aceite os termos e click em Next

4) Clique mais uma vez em Next

5) Next novamente

6) E finalmente clique em Install

7) Depois que a barra de progressão completar está tudo pronto, seu Node foi instalado com sucesso.

Viu como foi simples e fácil? Fiz o passo a passo da instalação mesmo sendo simples, para não ocorrer nenhum tipo de problema. Espero que me entendam.

  • Instalando VUE CLI

Agora vamos instalar nosso VUE CLI, que será responsável para criar nossos projetos VUE.

1)O primeiro passo é abrir nosso CMD:

2) Com o CMD aberto, digite o seguinte comando:

npm install -g vue-cli

Após esse comando o VUE CLI está instalado e pronto para ser usado.

  • Criando primeiro projeto VUEJS

1)Primeiro crie uma pasta chamada ‘www’ dentro do seu diretório C:// (recomendo que crie nesse diretório, mas você pode escolher o diretório de sua preferencia)

2) Abra seu CMD e entre no diretório da pasta que você criou para colocar seus códigos, no meu caso criei C://www. Vou usar o comando cd c://www para acessar o diretório:

3) Agora que estamos no diretório que vai ficar nossos códigos, digite o seguinte comando:

vue init webpack-simple meuprojeto

Agora o vue-cli vai pedir algumas informações do seu projeto como: nome, descrição, autor, licença, se você vai usar sass ou não. Poder precionar ENTER em todos, caso não queira informar nenhuma dessas informações.

 

Veja que o vue-cli já da as instruções que você precisa seguir, que é entrar no diretório do projeto criado, usar o comando npm install, e depois usar o comando npm run dev para rodar seu projeto vue.

4) Pronto seu projeto vue está rodando, veja que ele abri o projeto automaticamente em seu navegador padrão:

Viram como é simples?

Agora basta escolher o editor de texto de sua preferência e abrir seu projeto. Indico fortemente o uso do Visual Studio Code, pois ele tem plugins muito bons para Vue e frameworks JS em geral.


Samuelson
Samuelson

Apenas um desenvolvedor que resolveu compartilhar o que aprendeu, procuro passar a realidade do desenvolvimento de software com exemplos práticos e sem enrolação. Trabalho com desenvolvimento de SREP (Sistemas de Registo Eletrônico de Ponto) e integração de leitores biométricos de acordo com os padrões da portaria 373/2011.

    4 replies to "Primeiros passos com VueJS"

    • Allan Welerson

      Muito interessante, nunca tinha prestado muita atenção no vuejs, mas parece realmente muito bom, vou acompanhar

      • Samuelson

        Isso ai Allan, pretendo lançar em breve uma série de vídeos sobre Vue.js no canal.

    • Vasconcelos

      Muito bacana Samuelson, eu nunca tinha lido nada no seu blog, li esse post pelo celular no ônibus. Muito massa cara, parabéns

      • Samuelson

        Valeu fera.

Leave a Reply

Your email address will not be published.