Pré requisitos: conhecer git/github, Vue.Js e node.
E ai pessoal, tudo certo com vocês ?!
To aqui pra começar o ano movimentado e compartilhando conhecimento.
Primeiramente, quero situar vocês. Por que escolhi Vue.Js ?
Como já venho há um tempo estudando Js e trabalhando com Ionic e Angular, decidi enfrentar o desafio de estudar um novo framework, como um bom curioso, fui atrás do que o mercado estava usando e me deparei com React e o VueJs.
Dediquei um tempo para ler ambas documentações e optei pelo VueJs, pelo simples fato de achar ele muito mais fácil de aprender (pela documentação) e aplicar em um projeto de forma rápida, não me prendendo a várias dependências. Comecei a usar de fato em uma aplicação que iria pra produção, com isso, me forcei a conhecer melhor o poder do framework.
Breve Inrodução ao Vue.Js
Ele é um framework performático, acessível e versátil que nos ajuda a criar um código muito mais manutenível. Ele é progressivo, caso tenhamos uma aplicação server-side, podemos usar o VueJs em apenas uma parte da aplicação ou se preferirmos, podemos usar desde o início. Nos permite também criar componentes, cada um com seu HTML, CSS e JS.
O objetivo desse artigo não é mostrar uma introdução ao VueJs, isso você encontra muito bem explicado no site do framework.
Criando o Boilerplate Vue.Js
Bom nesse artigo eu vou tentar passar pra vocês algo que acho bem interessante e que pode poupar um certo tempo. Se trata da criação de um novo projeto usando uma arquitetura de pastas que você já está familiarizado e a cada inicio de projeto tem que fazer. Para minimizar esse esforço, podemos e vamos criar nosso boilerplate (é uma unidade de escrita que pode ser reutilizada repetidamente sem alterações).
Para quem não sabe, o VueJs já possui alguns boilerplates, vamos utilizar o boilerplate que já vem configurado o webpack e usar ele como base para o nosso. Para isso vá ao terminal (se você já tiver tudo instalado, caso contrário, instale seguindo a documentação) e digite o comando:
vue init webpack nome_do_projeto
Executando esse comando, irá aparecer uma série de perguntas, responda conforme a sua necessidade e familiaridade.
Após tudo ocorrer bem, vamos entrar na pasta e verificar nossos diretórios. Ele deve conter a seguinte estrutura:
Vamos dar uma olhada na pasta src/. Por padrão ela apresenta a seguinte estrutura:
Para o nosso caso, vou criar mais duas pastas contendo arquivos de exemplo.
No meu caso e para manter um padrão entre minhas aplicações, adicionei a pasta models e a services, contendo os arquivos User.js e UserService.js respectivamente. Para concluir a criação do nosso simples boilerplate, vamos adicionar todo o projeto dentro de uma pasta chamada template, só após isso, conseguiremos usar o nosso boilerplate com o comando vue init username/reponame nome_do_projeto. Com isso vamos subir a nossa aplicação para o github do jeito que ela está.
Para isso, basta criar um novo repositório no github e subir nosso boilerplate.
Com o upload concluído, vamos testar o boilerplate que acabamos de criar. Abra o terminal/cmd e digite o seguinte comando:
vue init iagocavalcante/boilerplate teste
Usaremos iagocavalcante/boilerplate pois foi o repositório criado nesse exemplo, caso você tenha feito o upload para o seu repositório, apenas mude o nome e repositório para o seu.
Para checar se tudo ocorreu como o esperado, acesse a pasta teste verifique os diretórios e arquivos criados e se dentro da pasta src/ exitem as pastas que criamos. Se estiver lá, tudo ocorreu perfeitamente bem e já somos capazes de melhorar e criar boilerplates ao nosso gosto e conforme nossas necessidades. Basta abrir a imaginação e aproveitar o conhecimento adquirido.
Por hoje é só pessoal. Se você tem uma ideia ou gostaria de acrescentar algo nesse boilerplate. Abra uma issue ou faça um PR no repositório.
