Vue.js — Construindo um SPA (Single Page Application) com vue-cli, vue-router, vue-resouce e Vuex (Parte 1)

Olá caros amigos Devs, hoje venho aqui com mais um post falar mais um pouco sobre esse nossa tão amada biblioteca Vue.js, seguindo ai nossa série, dessa vez vamos começar a construir uma aplicação SPA (Single Page Application), ou seja, teremos uma aplicação web completa acontecendo em uma única página sem a necessidade de novas requisições no servidor.

O Vue.js por si só, assim como o React e a contrário do AngularJS não nos permite criar uma Single Page App, pois o propósito da lib é lidar apenas com o desenvolvimento de componentes de interfaces interativas. Maaaaassssss, basta incluir alguns plugins ao projeto que teremos poderes quase que ilimitados para criar nossa SPA, e esses plugins são:

• Vue-Router: Levando em consideração que uma SPA é um aplicação que acontece em uma única página sem a necessidade de ficar carregando páginas novas no servidor a cada mudança de recurso, precisamos de alguém para lidar com essa transição de recursos internamente, o Vue-Router é o responsável por essa tarefa, ele que controla quais componentes serão carregados de acordo com o recurso solicitado pelo usuário. Embora o Router do Vue tenha um propósito parecido com o Router dos frameworks backend, são coisas totalmente distintas, trabalhando em camadas totalmente distintas da aplicação.
• Vue-Resource: O propósito do Vue-Resource é lidar com as requisições AJAX que precisamos fazer ao servidor para comunicar com o nosso backend (receber e enviar dados, fazer operações no banco de dados e etc…). O Vue-Resource tem suporte a Promisses, URI Templates e Inteceptors (Request e Response).
• Vuex: Vuex é uma arquitetura de aplicações para gerenciamento de estado centralizado em aplicações Vue.js. Foi desenvolvido inspirado no Flux e também no Redux, mas com conceitos simplificados e com uma implementação que foi feita especificamente para utilizar as vantagens do sistema de reatividade do Vue.js. Basicamente o Vuex é responsável em lidar com o gerenciamento de estado da aplicação, proporcionando assim uma comunicação e compartilhamento de dados entre os componentes. Veja mais em http://vuex.vuejs.org/pt/intro.html

Com esses 3 plugins acima atrelado ao Vue.js teremos condição de criar nossa SPA que será uma vitrine virtual (uma espécie bem modesta de e-commerce), para startar o projeto vamos usar o Vue-cli.

Vue-Cli

Vue-cli é uma interface de linha de comando que além de facilitar o start de um projeto Vue (Criar um scaffolf) nos trás várias ferramentas que com certeza vai enriquecer muito nosso workflow, além de já nos dar uma estrutura baseada e SFC (Single File Component), onde nossos componentes serão arquivos únicos coma extensão .vue, e não se preocupe, o vue-cli também já trás configurado o Browserify juntamente com o Vuefy, além de outras ferramentes para testes automatizados, jshint e transpiler.
https://github.com/vuejs/vue-cli

Startando um projeto com Vue-cli

Mãos a obra, vamos iniciar nosso projeto, se você ainda não tem o vue-cli instalado basta instala-lo usando o comando:

npm install -g vue-cli

Agota vamos criar nosso projeto, a sintax para start de um projeto n vue-cli é simples:

vue init <tipo-template> <nome-do-projeto>

Como irei usar o browserify, o meu start ficou assim:

Assim que a gente starta o projeto ele pede pra ir confirmando algumas informações, coisa que você já vimos no npm, bower e etc…

Pronto, nosso app está inicializado, basta entrar na pasta e rodar o comando:

npm install

E em seguida para testar o projeto rode:

npm run dev

Para visualizar o Hello Vue acesse http://localhost:8080

Arvore de diretórios

Antes de finalizar essa parte gostaria só de sinalizar sobre a arvore de diretórios que o Vue init cria:

Por enquanto iremos trabalhar muito dentro da pasta src, e nossos componentes ficarão na pasta src/components. O arquivo App.vue será responsável em conectar todos os componentes, enquanto o main.js será o cara que irá chamar o Vue.js e dar as coordenadas para o Browserify deixar tudo legível pro navegador (Ele quem vai gerar os arquivos da pasta dist/). Não se preocupe, conforme o decorrer dos posts vou explicando de forma mais detalhada cada um desses arquivos.

Por hoje é só, no próximo post, iremos colocar a mão na massa e criar nosso primeiro componente (Lista de produtos), além de deixar uma estrutura de servidor (json-server) pronta usando o Atmo.

Como sempre, alguns dos conceitos aqui apresentados são tão novos pra mim quanto pra muitos que estão lendo, então, críticas, dúvidas e sugestões são sempre bem vindas. Até a próxima.