Tutorial Vue.JS: como criar um sistema

Quando o criador do Vue.js, Evan You, estava trabalhando em um projeto no Google Creative Labs, ele precisava de um protótipo de interface para interfaces de usuário muito grandes. Obviamente, escrever muito HTML repetitivo é demorado e consome muitos recursos, e é por isso que Evan começou a procurar algumas ferramentas existentes para esse fim.

Para sua surpresa, ele não encontrou ferramentas, bibliotecas ou frameworks perfeitamente adequados para seus propósitos de prototipagem rápida! Naquela época o AngularJS era amplamente utilizado, o React.js estava apenas começando, e frameworks como o Backbone.js eram usados ​​para grandes aplicações com arquitetura MVC. Nenhuma dessas estruturas complexas é adequada para o tipo de projeto que precisa de algo realmente flexível e leve para prototipar interfaces de usuário rapidamente. Quando você percebe que a coisa certa não existe e você é capaz de criá-la, essa é a hora de fazê-la!

Foi aí que surgiu a ideia de criar um framework que facilitasse a prototipagem rápida, fornecendo uma maneira fácil e flexível de vincular dados reativos e componentes reutilizáveis. Ele agora pode ser usado para criar aplicativos da Web complexos escaláveis ​​e responsivos.

Como qualquer bom framework, o Vue.js está sempre crescendo e evoluindo, oferecendo cada vez mais recursos do que sua primeira versão. Atualmente, ele fornece uma maneira fácil de anexar e criar plugins, escrever e usar mixins e adicionar comportamento personalizado. Ele pode até ser usado para construir aplicativos de uma maneira tão flexível que definitivamente pode ser considerado um framework capaz de suportar a construção de aplicativos web complexos.

O Vue.js permite que você vincule facilmente seu modelo de dados à camada de apresentação. Ele também permite que você reutilize componentes em todo o seu aplicativo sem precisar criar modelos ou coleções especiais e registrar eventos em objetos. Você não precisa seguir nenhuma sintaxe especial e não precisa instalar nenhuma das infinitas dependências que as estruturas tradicionais exigem.

Seus modelos são objetos JavaScript simples que podem ser vinculados ao que você quiser na visualização (texto, texto de entrada, classes, propriedades, etc.). Também vale a pena mencionar que você pode separar a camada View do estilo e lógica do JavaScript ou pode colocá-los no mesmo arquivo e estruturar seus componentes e lógica no mesmo local.

A usabilidade é mais simples: basta adicionar o arquivo vue.js ao seu projeto e usá-lo. Alternativamente, você pode usar vue-cli (a interface de linha de comando para Vue) com Webpack e a família Browserify, que não apenas compila todo o projeto, mas também suporta hot recarregamento (recarregamento automático quando o código muda. Verdadeiro).

Todos os IDEs modernos e populares têm suporte a plugins, então fique à vontade para escolher o IDE que melhor se adapte às suas preferências. Você pode usar qualquer pré-processador que desejar, além de poder usar o ES2015. Vale a pena mencionar que o Vue.js pode ser usado com seu framework favorito, mesmo com o framework que você está construindo. A escolha é sua, Vue.js te dá tudo.

Para entender melhor como o framework funciona, tentaremos desenvolver um aplicativo que liste os livros que você deseja ler. Servirá como referência prática para a aplicabilidade dos recursos fornecidos pelo framework. Esta seria uma implementação simples que permite que itens sejam incluídos e removidos, semelhante a uma lista de tarefas ou aplicativos com a mesma finalidade. Para melhor linearizar o conhecimento, apresentaremos a implementação em três etapas: 1) Desenvolver o exemplo usando apenas HTML, CSS, Bootstrap, JavaScript e jQuery; 2) Migrar o exemplo para Vue.js; 3) Criar reutilizável com base no exemplo componente Vue.js.

Instale Vue.JS e Quasar
Se você não tiver, basta baixá-lo e instalá-lo antes da próxima etapa!

Após executar as etapas acima, tanto o Vue.JS quanto o Quasar estão prontos para uso.

Como já disse neste tutorial do Vue.JS, usá-lo ajuda a acelerar a criação de sistemas.

É como usar o framework deles, então ao invés de perder tempo criando toda a arquitetura do sistema, deixe o Quasar fazer isso por nós, apenas execute o código abaixo.

Após executar as etapas acima, tanto o Vue.JS quanto o Quasar estão prontos para uso.

Como já disse neste tutorial do Vue.JS, usá-lo ajuda a acelerar a criação de sistemas.

É como usar seu framework, então ao invés de perder tempo criando toda a arquitetura do sistema, vamos fazer o Quas instalar o quasar

Após executar o comando acima, serão feitas algumas perguntas para criar seu projeto, como nome, autor…, basta preencher adequadamente.

instalação do quasar

Sabe o que é mais incrível no Vue.js?

Sua aplicação já está pronta para o desenvolvimento, agora é só entrar na pasta e executar o sistema com o seguinte comando e você verá sua aplicação rodando sem problemas!
Basta executar o código abaixo para fazer isso por nós.

quasar dev

projeto do quasar
compilação
quasar app

Sabe a coisa mais legal no Vue.js?

Se você analisar, não levamos 2 minutos para preparar um aplicativo, o que é uma das melhores coisas do Vue.JS.

Estrutura de código

Ao criar um projeto em Vue.JS com quasar, toda a arquitetura do sistema está pronta!

Agora é só conhecer e começar a jogar, então vamos lá.

Pastas em vue.js
A primeira parte que veremos é a pasta do roteador.

Dentro você encontrará um arquivo chamado routes.js.

Como o nome sugere, este é o arquivo responsável por criar rotas para a aplicação.

Super simples, você tem um componente, um canvas, representado como “pai”.

Ou seja, conterá a tela onde estão localizados todos os outros componentes (ou seja, “filhos”) que você criar.

Pense no componente “pai” como o cabeçalho do aplicativo.

Aplicações do Quasar

Hierarquia em um aplicativo

Ou seja, a cada tela que você criar, basta colocar a criança indicada na imagem como está.

Lembre-se de que você pode ter outros pais.

Comece a desenvolver a partir daí.

Tutorial Vue.JS: Criando sua primeira tela
Vamos criar uma tela de login para nosso aplicativo para que possamos abordar vários tópicos em Vue.JS e você pode continuar a partir daí.

Na pasta pages, criaremos o seguinte arquivo Login.Vue.

login.vue

Para explicar melhor o HTML, escrevi o código a seguir, a primeira parte da página Vue.JS mencionada no início do artigo.

HTML Vue.js

A imagem acima do HTML produz a seguinte saída:

Conecte-se

Agora precisamos criar funções para logar e limpar o formulário, para isso passamos para a segunda parte da página Vue.JS, o script.

Obs: Troque login por login
Até agora, não criamos uma implementação da funcionalidade de login.

Para tornar este artigo mais interessante e informativo, vamos pedir ao nosso amigo Google que nos ajude com esse recurso de login?

FireBase

Aí vem outro amigo como o Quasar: Firebase.

O Firebase é um conjunto de ferramentas que nos ajudam a criar aplicativos de alta qualidade.

Vamos usar uma de suas ferramentas, auth, a pessoa responsável pela nossa autenticação.

Para fazer isso, você precisa ir ao Google para criar uma conta Firebase, é grátis. Então crie um projeto!

Quando você termina de criar o projeto, basicamente em seguida, em seguida, eles fornecem um conjunto de credenciais como este:

FireBase

Copie essas credenciais, pois precisaremos delas em nosso aplicativo. No seu projeto do Firebase, clique em autenticação e ative o método de login com email/senha

Provedor de login Vue.JS

Eu criei qualquer usuário de teste.

Criar usuário

Perfeito, agora podemos voltar ao código e preencher nosso formulário de login.

Precisamos instalar o firebase em nosso projeto, para esse tipo npm install firebase.

Agora que o Firebase está instalado, vamos configurá-lo em nosso aplicativo.

Veja como também pode ser simples:

Aplicativos no Firebase
Complete a forma:

Abordagem sistêmica

Por fim, nosso aplicativo possui uma arquitetura bem montada automaticamente, uma aparência limpa de quasar e autenticação 100% segura do google firebase.

Veja como é fácil este tutorial Vue.JS?

Sua implementação e enquadramento.

simples? Pode ser. poderoso? Muito.

É adequado para grandes aplicações? Claro que sou.

Você pode acessar o projeto no GitHub se quiser.

Agora é a hora de mergulhar nessa maravilha.