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.

    31 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.

    • gamefly free trial

      Admiring the commitment you put into your site and in depth information you
      offer. It’s great to come across a blog every once in a while that isn’t the same unwanted rehashed material.
      Excellent read! I’ve bookmarked your site and I’m adding your RSS
      feeds to my Google account.

    • Heya! I just wanted to ask if you ever have any issues with hackers?
      My last blog (wordpress) was hacked and I ended up losing several weeks of hard work due to no data backup.
      Do you have any methods to protect against hackers?

    • gamefly free trial

      I am truly grateful to the holder of this web page who has shared this enormous post at at this time.

    • gamefly free trial

      I’m not sure why but this weblog is loading very slow for me.
      Is anyone else having this issue or is it a problem on my end?
      I’ll check back later on and see if the problem still exists.

    • gamefly free trial

      Aw, this was a very good post. Spending some time and actual effort
      to make a great article… but what can I say… I procrastinate a
      whole lot and never manage to get nearly anything done.

    • gamefly free trial

      Hi friends, its enormous paragraph concerning teachingand
      fully defined, keep it up all the time.

    • gamefly free trial

      I don’t even know how I ended up here, but I thought this
      post was great. I don’t know who you are but
      certainly you’re going to a famous blogger if you aren’t already 😉 Cheers!

    • gamefly free trial

      Hi everybody, here every person is sharing such know-how,
      thus it’s fastidious to read this blog, and I used to visit this weblog everyday.

    • gamefly free trial

      I used to be recommended this website by way of my cousin. I’m no longer sure whether this put up is written by way of him as no one else recognise such specified about my difficulty.
      You are wonderful! Thank you!

    • gamefly free trial

      Hi there to every body, it’s my first pay a quick visit of this web site; this webpage contains awesome and in fact good material designed for visitors.

    • gamefly free trial

      Hey I know this is off topic but I was wondering if you knew of
      any widgets I could add to my blog that automatically tweet my newest twitter updates.
      I’ve been looking for a plug-in like this for quite some time and was hoping maybe
      you would have some experience with something like this.
      Please let me know if you run into anything. I truly
      enjoy reading your blog and I look forward to your new updates.

    • gamefly free trial

      I am sure this post has touched all the internet viewers,
      its really really pleasant article on building up new website.

    • gamefly free trial

      If you desire to grow your familiarity just keep visiting this website and be
      updated with the most up-to-date gossip posted here.

    • gamefly free trial

      I think this is one of the most important info for me.
      And i am glad reading your article. But should remark on some general things,
      The site style is ideal, the articles is really excellent
      : D. Good job, cheers

    • cheap ps4 games

      you’re in reality a just right webmaster. The website loading pace is amazing.
      It sort of feels that you are doing any distinctive trick.

      Also, The contents are masterwork. you’ve performed a excellent job
      in this matter!

    • This is the right web site for anyone who wishes to understand this topic.

      You know so much its almost hard to argue with you (not that I
      really will need to…HaHa). You certainly put a brand new spin on a topic which has been written about for a long time.
      Wonderful stuff, just excellent!

    • Hey! I just wanted to ask if you ever have any problems with hackers?
      My last blog (wordpress) was hacked and I ended up
      losing many months of hard work due to no backup.

      Do you have any solutions to protect against hackers?

    • Hello, I enjoy reading all of your article. I wanted to write a little comment to support you.

    • quest bars cheap

      I every time spent my half an hour to read this website’s articles or
      reviews every day along with a mug of coffee.

    • quest bars cheap

      Hello there! I could have sworn I’ve been to this
      site before but after checking through some of the post I realized it’s
      new to me. Nonetheless, I’m definitely happy I found it and I’ll be bookmarking and checking
      back often!

    • quest bars

      Hello i am kavin, its my first time to commenting anywhere, when i
      read this paragraph i thought i could also make comment due to this sensible post.

    • http://tinyurl.com/

      Hi there, I check your blog on a regular basis. Your writing style is awesome,
      keep doing what you’re doing!

    • ปั้มไลค์

      Like!! Great article post.Really thank you! Really Cool.

    • Lino Strahle

      What i do not understood is if truth be told how you’re not actually much more neatly-appreciated than you may be right now. You’re so intelligent. You realize therefore considerably when it comes to this matter, made me in my view imagine it from numerous numerous angles. Its like women and men aren’t involved except it is one thing to accomplish with Lady gaga! Your own stuffs nice. All the time care for it up!

    • Hi everyone, it’s my first go to see at this website,
      and paragraph is really fruitful in favor of me, keep up posting these posts.

    • quest bars cheap

      Hi there! Do you know if they make any plugins to safeguard against hackers?
      I’m kinda paranoid about losing everything I’ve worked hard on. Any
      suggestions?

    • Kelneer

      Best Price Cialis 20mg Usa Cialis En El Vademecum order cialis online Ampicillin Amoxicillin Dosage Lilly Cialis In Canada

Leave a Reply

Your email address will not be published.