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 ?

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.

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.

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:

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.