Criando minha primeira app com Vue

Javascript

Continuando a série sobre frameworks ou libs para front, como introdução estou explicando apenas como criar e subir um projeto pela primeira vez, caso tenha perdido os posts anteriores, aqui estão eles:

Portanto, nesse post, vou criar uma app (projeto) com Vue ou VueJS, depende de como você costuma chamá-lo.

Conhecendo o VueJS

O VueJS é um framework progressivo de JavaScript, com ele conseguimos construir (criar) app's e SPA's, focando apenas na criação de nossos componentes e páginas, pois o mesmo já vem configurado e possuí diversos recursos para nos facilitar no dia à dia.

Mas como podemos criar nosso primeiro projeto com o VueJS? Para isso, assim como Angular e React, o Vue também possuí seu próprio cli para ser usado em linha de comando, assunto que veremos no próximo tópico.

Instalando o cli do VueJS

Podemos realizar a instalção do cli de duas maneiras, sendo elas: npm ou yarn:

Instalando com yarn

Para instalarmos o cli com o Yarn podemos executar o comando yarn global add, assim o mesmo ficará instalado de forma global na máquina, ou seja, poderá ser acessado em qualquer pasta através do terminal:

yarn global add @vue/cli

Instalando com npm

Além do Yarn, também podemos instalá-lo pelo Npm:

npm install -g @vue/cli

Ou de forma abreviada:

npm i -g @vue/cli

Obs: Repare que também instalamos o cli de forma global com o npm, para isso, passamos o parâmetro -g no comando de instalação.

Criando a primeira app

Pronto, agora já temos nosso cli (client) instalado, portanto, já podemos começar a trabalhar em nosso projeto e na construção da primeira app que será o famoso Hello World, para isso, podemos utilizar o comando create:

vue create minha-primeira-app

Após a finalização do comando, uma pasta chamada minha-primeira-app (mesmo nome passado para o create) deve ter sido criada na pasta atual onde o comando foi rodado.

Mas, e se eu já tiver uma pasta e querer utilizá-la como base para a app?

Utilizando uma pasta já existente

Para essa necessidade, podemos utilizar o mesmo comando create, porém, com uma diferença nos seus parâmetros, se quisermos criar uma nova pasta, simplesmente informamos o nome da pasta (que será o nome do projeto), caso queira utilizar uma pasta já existente, podemos passar um . no lugar do nome:

vue create .

Repare que primeiro devemos navegar (cd nome-da-pasta) até a pasta, depois rodar o comando, a única diferença é que a primeira pergunta do comando é:

Generate project in current directory? (Y/n)

Traduzindo: Deseja gerar um novo projeto na pasta atual? Sim ou não. Para confirmar digite Y e para negar a execução do comando, digite n, assim que decidir qual parâmetro informar, basta apenas teclar o enter.

Após o término do comando, o projeto estará pronto para uso.

Se você deve ter reparado, para ambos os casos, informamos para o Vue utilizar as configurações padrão, caso queira e tenha a necessidade, você pode optar por personalizar as configurações do projeto, alguns exemplos:

  • TypeScript
  • Router
  • Vuex
  • Pré Processadores
  • Linter / Formatter
  • Testes
  • etc...

Subindo a app

Após ter nosso projeto (app) criado, já podemos rodá-lo, mas como podemos fazer isso? A princípio precisaríamos de um servidor que iria servir a nossa app, porém, o Vue já cuida de tudo isso para nós, se você reparou, ao término do comando create temos a seguinte saída:

Saída do comando create

O próprio comando nos informe como podemos rodar a app:

cd minha-primeira-app
yarn serve

Ao término do comando, seu navegador deve abrir sozinho com a página padrão do Vue, isso porque o projeto já vem um servidor embutido que é executado através do yarn serve.

Página padrão do Vue

Pronto, já temos uma app Vue criada e rodando.

Hello World com VueJS

Para finalmente fazermos nosso Hello World devemos abrir o projeto (pasta minha-primeira-app) em algum editor de texto e alterar o conteúdo do seguinte arquivo: src/components/HelloWorld.vue, vamos trocar o código padrão criado pelo Vue.

<template>
  <h1>Hello World</h1>
</template>

Repare que mexemos apenas na tag template o resto ficou de forma igual. Após a mudança devemos salvar o arquivo, voltando à página carregada pelo navegador temos:

Hello World com VueJS

E finalmente nosso primeiro Hello World está feito, veja que não foi necessário recarregar a página como de costume, isso porque o projeto já vem com um sistema de Live Reloading.

Gif do Hello World finalizado

E aí, gostou? Já conhecia o VueJS? Não deixe de comentar.

Para receber novos posts por email, se inscreva na newsletter logo abaixo.

Matheus Castiglioni

Matheus Castiglioni

Apaixonado pelo mundo dos códigos e um eterno estudante, gosto de aprender e saber um pouco de tudo, aquela curiosidade de saber como tudo funciona, tento compartilhar o máximo de conhecimentos adquiridos e ajudar todos aqueles que sou capaz.