Vue.js é uma biblioteca JavaScript acessível, versátil e performática. E apesar do site oficial dizer que Vue.js é um framework JavaScript Progressivo, eu já vou começar discordando 🙂
Entendemos por framework, aquela solução ‘fechada’ quando você já tem definido por exemplo a estrutura de diretórios, ou a forma como você faz uma requisição AJAX.
Já uma biblioteca é um pequeno arquivo (geralmente) com alguns facilitadores, mas para você construir um projeto robusto, sempre vai precisar de outras bibliotecas, pra executar outras funções.
Quer exemplos? Frameworks, podemos falar do AngularJS, Angular ou Ember.js. Já quando falamos de libs, podemos falar do React ou do próprio Vue.js.
Porém, vou te explicar mais abaixo porque ele pode se considerar um framework progressivo.
História do Vue.js
Foi criado por Evan You enquanto ele trabalhava no Google. Depois de trabalhar com AngularJS (a primeira versão do Angular) em vários projetos dentro do Google ele decidiu pegar os conceitos do que ele mais gostava do Angular, e criar uma versão mais leve e sem muita coisa extra que o Angular tinha.
Oficialmente a biblioteca foi lançada em 2014, ou seja, o AngularJS já estava estável, e nós já conhecíamos os seus problemas, o Angular 2 estava por vir e ninguém tinha muita certeza de como ele seria, eu diria que foi no timing certo.
Muitos inclusive dizem que Vue.js é o que o Angular 2 deveria ter sido.
Vantagens
- É Open Source;
- Mantido pela comunidade;
E porque ser mantido pela comunidade é bom? Pois ele não segue os interesses comerciais de nenhuma empresa, ele realmente tenta sempre atender da melhor forma os problemas diários dos desenvolvedores front-end.
- Curva de aprendizagem pequena
Você não precisa aprender Typescript, ou JSX. É HTML, CSS e JavaScript Vanilla.
- Flexibilidade
É realmente simples, você pode usá-lo com Typescript, se quiser, plugar outras libs e várias outras possibilidades. Você trabalha da forma como preferir, e sem muito trabalho de configuração pra isso.
- Framework JavaScript Progressivo
Lembra lá no início do texto que discordei dessa afirmação? Pois é, mas ela é verdade, porém, depende da forma como você usa o Vue.js. Ele pode ser considerado um framework, porque diferente do React ele tem bibliotecas oficiais. Essas bibliotecas – que são três das mais usadas em todas as aplicações Vue.js – são mantidas pelas mesmas pessoas que fazem o core da biblioteca. Então, se em um projeto, você usar essas libs (em projetos complexos é muito provável que use) você estará usando o Framework Vue.js
Essas outras bibliotecas são o Vue Router (toda aplicação robusta terá um router), Vuex que pra quem está acostumado com React, é uma lib similar ao Redux e ainda Vue Server Rendered que como o nome já pressupõe é uma lib para fazer Server Side Rendering (se você não entende muito sobre esse assunto, eu resumo pra você que é uma forma de melhorar o SEO nas SPAs, melhorar a performance do carregamento das SPAs e outros).
Como começar a aplicar? – Hello World
Como já falamos aqui em cima, Vue.js é bem flexível, então existem várias formas de você começar uma aplicação com ele. Você pode apenas importar a biblioteca no <head> por exemplo e começar a desenvolver em cima (like a jQuery. Não compare Vue.js com jQuery, por favor).
Passo 1
Vamos então criar nossa primeira aplicação em Vue.js usando a vue-cli. Atualmente é a maneira mais simples de começar uma aplicação.
Para isso é mínimo que você tenha o Node.js instalado (versão >= 6.x) pois faremos o processo através do NPM e também o Git.
Vamos começar instalando a CLI com o seguinte comando:
npm install -g vue-cli
Dependendo de como estiver sua internet, pode ser rápido ou não.
Para ter certeza de que foi instalado, digite o comando:
vue - V
V maiúsculo mesmo.
Passo 2
Para começar um projeto com a CLI agora, basta utilizar o seguinte comando:
vue init <template-name> <project-name>
Se você quiser listar os templates disponíveis, use o comando vue list. Já o nome do projeto, você vai escolher. Para esse nosso Hello World, vamos criar o projeto hello-felizardo com o template do Webpack.
vue init webpack hello-felizardo
Ele vai fazer várias perguntas, que eu já vou deixar respondidas no gif abaixo, mas vou explicando.
Clique na imagem para ampliar
Passo 3
Nesse momento não se preocupe se não entender tudo. Nós escolhemos o nome do projeto, escrevemos uma descrição para ele e dissemos quem é o autor (ele pega automaticamente do Git).
Depois escolhemos o tipo de build, nesse momento, apenas aperte Enter no default. Mas, de acordo com sua necessidade você pode mudar, eu atualmente não uso a padrão.
vue-router é a lib, que já falamos aqui em cima e quase sempre utilizaremos ela. Mas apenas para este exemplo, coloque n.
ESlint, outra coisa que sempre uso nos meus projetos, são padrões de código. Nesse momento também podemos dizer n.
Para as duas perguntas seguintes, de testes, também vamos dizer não. Mas veja como utilizando o CLI você tem total noção do poder de usar o Vue.js e realmente ter um framework progressivo.
E na última pergunta, utilizaremos o NPM. Eu costumo usar o Yarn nos meus projetos, mas como eu disse, estamos apenas fazendo um Hello World.
Passo 4
Vamos entrar na pasta do projeto, instalar suas dependências e rodar o projeto.
Para abrir a pasta do projeto:
cd hello-felizardo
Pronto, estamos agora dentro da pasta do projeto, se você quiser pode ir lá na pasta dar uma olhada e ver que vários arquivos já são gerados, pasta de build, pasta source (src) onde realmente nós desenvolvemos e inserimos a maioria dos nossos arquivos.
Para o desenvolvimento temos algumas dependências, então vamos instalá-las:
npm install
Pode demorar um pouco. Se der erro na instalação de algum pacote, repita o processo.
Por último vamos rodar o projeto, com o comando:
npm run dev
No fim ele vai dar a mensagem de em qual porta o projeto está rodando, basta abrir essa URL e tcharãn!
Pronto! Sua primeira aplicação em Vue.js já está rodando!
Claro, essa aplicação é o código mais básico possível de criar com o framework. Mas, é um ótimo começo, pois já tem uma estrutura de diretórios, e dá pra você estudar o código. Por falar nisso, olhe na pasta src > components e troque a mensagem “Welcome to Your Vue.js App” para Hello Felizardo!
Ficou com dúvidas? Deixa nos comentários!