Quasar Framework é uma poderosa ferramenta para desenvolvimento híbrido com um incrível suporte a criação de aplicações para multiplas plataformas, como Web (Chrome, Firefox, Opera…), Mobile (Android e IOs) e Desktop (Windows, Linux e Mac) .

Antes de qualquer coisa tomei o cuidado de acrescentar um QUASE no título, porque completo mesmo é a documentação, mas aqui eu fiz um “apanhado” de informações e dicas para você iniciar no Quasar.

Se voce curte Quasar se inscreva na minha Newsletter, eu mando e-mails vez por outro par avisar sobre novidades aqui.

O Quasar (se pronuncia kweɪ.zɑɹ ) inova não inovando, quero dizer que ele junta diversas ferramentas e conceitos e de forma tão incrível que eu nem consigo dar adjetivos (bons adjetivos) para criar projetos híbridos em tantas plataformas quantas você possa ou precise.

Básicamente ele lida de forma transparente com:

Electron – Cria aplicativos para desktop.Cordova/Capacitor – Cria aplicativos para mobileVue.js – Se define como “framework Javascript progressivo”SPA – Single Page Application (um aplicativo construído de forma a ser carregado de uma vez e com navegação sem reload da página).PWA -Progressive WEB Apps (Aplicativos da Web Progressivos – tradução livre – é uma técnica que permite que uma página web “vire um aplicativo nativo” progressivamente) SSR – Server-side Rendered (Aplicativo SPA pré-renderizado do lado do servidor – ótimo para SEO, por exemplo)Material Design – Padrão/Linguagem de design (visual) criado pelo Google

Antes de trabalhar com Quasar eu já conhecia MUITO BEM cada uma das ferramentas/conceitos que ele usa, isso foi fantástico para meu aprendizado, mas não é um pré-requisito obrigatório (porém recomendo) saber TUDO, já que ele traz toda a integração prontinha pra você.

É mais simples usar o Quasar do que cada uma das tecnologias separadas.

Erik Figueiredo

Em outras palavras, o Quasar traz tudo pronto pra você trabalhar e gerar o seu código para diversas plataformas de uma vez só e o mais rápido possível, essa é a premissa.

O que eu preciso para trabalhar com Quasar no Vue.JS?

Para trabalhar com Quasar você vai precisar:

Ter o Node.js instalado com o NPMJá ter uma noção de como trabalhar com Vue.js

Trabalhar com o Vue.js é bem simples, o próprio site tem um guia traduzido para português pela comunidade brasileira de Vue.js.

Essa tradução é um projeto open-source e não remunerado, não custa nada entrar aqui e dar uma estrelinha no repositórios deles no GitHub, mostre pro mundo que o Brasil também manda bem:

https://github.com/vuejs-br/br.vuejs.org

Eu sei que quem não sabe Vue.js pode querer desanimar um pouco em continuar este artigo ou o até mesmo aprender a usar o Quasar, mas acredite que quando eu digo que é simples, É SIMPLES MESMO.

Um pouco sobre o Vue.js

Para dar uma base para quem ainda não viu nada de Vue, vou dar uma introdução ao assunto aqui.

O Vue.js é um framework focado na simplicidade, ele traz “menos” recursos no seu Core principal, mas que são poderosos e fazem do framework mais extensível e ilimitado.

Por conta dessa “pegada expansível” muitos “filhos” surgiram, como o Vuetify e o próprio Quasar Framework que são bibliotecas e frameworks ou o próprio Eue Router e Vuex (que não vou explicar agora).

Outro ponto legal é que, diferente do Angular e do React, o Vue não tem uma grande empresa por traz, então se você ouviu falar dele antes, saiba que o mérito é dele mesmo e de ninguém mais.

Componentes do Vue.js

O Vue.js trabalha com a ideia de componentes, onde cada elemento se torna um “plugin” que poderá ser “injetado” dentro de outro.

Cada Componente define uma parte da página e traz suas próprias regras e configurações.

Em um SPA, o Componente TAMBÉM cria cada “página”, mas também pode definir uma parte específica, como uma lista de dados carregados via Ajax, um banner slider, uma tabela… QUALQUER coisa.

Aqui eu vou criar um componente que diga olá a um usuário qualquer, bem simples e que você poderá reaproveitável em qualquer lugar apenas com uma tag HTML e/ou atributos.

Para começar, vamos criar 3 arquivos no mesmo diretório:

index.html – nossa páginascript.js – exemplo 1script2.js – exemplo 2

O arquivo index.html é bem simples.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
</head>
<body>
<div id=”app”></div>

<!– Vue.js para desenvolvimento –>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script src=”script.js”></script>
</body>
</html>

Note que eu usei a url do Vue.js para desenvolvimento, quando for publicar o projeto você deve trocar para a de produção:

<script src=”https://cdn.jsdelivr.net/npm/vue@2.6.11″></script>

O primeiro exemplo é o script.js:

// nosso componente
const helloComponent = {
// template HTML que vamos imprimir no navegador
template: <div>Olá <strong>{{ name }}</strong> - <a href="" @click.prevent="answer()">Responder</a></div>,
// deve retornar um objeto com as variáveis
data() {
return {
name: ‘Erik’ // veja no template a parte {{ name }}, essa variável será impressa lá
};
},
// são todos os métodos/ações usados no componente
methods: {
// este método é usado no template, na tag a
// note o atribute @click, ele define que o método deve ser executado
// quando um evento de click acontecer, você pode usar qualquer evento do DOM
// o .prevent é um modificador e é opcionall, ele diz que não deve ser executado
// a ação padrão do evento (que no caso, é navegar para outra página)
answer() {
const answer = prompt(‘O que você vai dizer?’);
console.log(answer);
}
}
};

// aqui eu inicio (finalmente o Vue)
new Vue({
// informo que é para aplicar o vue na tag com id app
el: ‘#app’,
// este é o template que vai aparecer dentro da tag, substituindo QUALQUER conteúco que exista.
// note a tag <helloComponent/>, ela tem o mesmo nome que eu registrei no “components”
template: <main>
<h1>Minha página</h1>
<helloComponent/>
</main>,
// os componentes que vão ser usados (no caso, só temos 1)
components: {
// esse “atalho” é o mesmo que escrever “helloComponent: helloComponent”
// o nome é o mesmo que usei na tag <helloComponent/>, não é acidente.
helloComponent,
},
});

Eu documentei bem o código para você entender, aqui sem os comentários:

const helloComponent = {
template: <div>Olá <strong>{{ name }}</strong> - <a href="" @click.prevent="answer()">Responder</a></div>,
data() {
return {
name: ‘Erik’
};
},
methods: {
answer() {
const answer = prompt(‘O que você vai dizer?’);
console.log(answer);
}
}
};

new Vue({
el: ‘#app’,
template: <main>
<h1>Minha página</h1>
<helloComponent/>
</main>,
components: {
helloComponent,
},
});

Mas o legal de usar o Vue é criar componentes reutilizáveis, para isso eu preciso:

Que o nome venha de uma fonte externa, assim vou poder personalizar a mensagem para quem eu quiser.Poder usar o Componente em um HTML já existente, sem que o Vue.js substitua todo o conteúdo da div #app.

A primeira coisa a fazer é adicionar suporte a uma propriedade (na verdade, eu chamo de atributo da tag HTML), a ideia é eu poder fazer isso:

<hello name=”Erik Figueiredo”></hello>

E ele imprimir isso no navegador:

Para adicionar o suporte a propriedade name eu apenas infomo ela na configuração props e removo a variável da data (que agora pode ser removida, já que não temos nenhuma outra variável).

Eu copiei o conteúdo do script.js para o script2.js, assim vou ter como consultar e comparar os códigos.

const helloComponent = {
props: [
‘name’,
],
el: ‘.hello’,
template: <div>Olá <strong>{{ name }}</strong> - <a href="" @click.prevent="answer()">Responder</a></div>,
methods: {
answer() {
const answer = prompt(‘O que você vai dizer?’);
console.log(answer);
}
}
};

O bootstrap do Vue também é mais simples agora, só informamos o el (elemento que irá renderizar o Vue) e o Componente é informado externamente, aqui o script2.js completo:

const helloComponent = {
props: [
‘name’,
],
el: ‘.hello’,
template: <div>Olá <strong>{{ name }}</strong> - <a href="" @click.prevent="answer()">Responder</a></div>,
methods: {
answer() {
const answer = prompt(‘O que você vai dizer?’);
console.log(answer);
}
}
};

Vue.component(‘hello’, helloComponent)

new Vue({
el: ‘#app’,
});

Adicione a tag hello no HTML e também troque o script para o 2:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
</head>
<body>
<div id=”app”>
<hello name=”Erik Figueiredo”></hello>
</div>

<!– Vue.js para desenvolvimento –>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script src=”script2.js”></script>
</body>
</html>

Claro que eu só queria demostrar o Vue.js para você ter uma base para o Quasar, o Vue é muito mais que isso…. MUITO.

Vamos para o prato principal.

Instalando o Quasar

Finalmente, o Quasar.

Para instalar o framework você vai usar o NPM (ou o Yarn, se preferir).

npm install -g @quasar/cli
yarn global add @quasar/cli

Você não precisa copiar as duas linhas, só a primeira para o NPM ou a segunda se preferir o Yarn.

Agora é só você escolher um diretório para criar seu projeto e rodar o comando a seguir:

quasar create <nome do diretório para o projeto>

Perguntas já respondidas para o quasar create.

O Quasar fará algumas perguntas, eu respondi todas com enter sem digitar mais nada (veja imagem acima), é importante você entender todas, mas dado o tamanho que este artigo vai tomar acredito que essa pode ser uma lição de casa, da pra usar o tradutor do Google para cada pergunta e pesquisar as opções. Você vai aprender muito!

Quando o comando terminar de rodar você poderá executar o comando a baixo para que ele faça o build em modo desenvolvimento e abrir no navegador para você ver.

quasar dev

Você deve ver a tela a seguir quando o processo terminar, o Quasar ficará aguardando alterações suas e quando isso acontecer irá atualizar o navegador para você sozinho!

Tela do quasar no navegador.

Comandos do Quasar

O cliente de linha de comando (ou CLI, para os íntimos) do Quasar é bem completo e poderoso, na verdade é a principal ferramenta quando desenvolvemos, é através dele que podemos:

Iniciar um novo projeto QuasarSubir um servidor de desenvolvimento que mostra as alterações ao vivoFazer o build para as mais diversas plataformas (Electron, Cordova /Capacitor ou WEB)Usar o sistema de scaffold (para criar páginas, components, pages e vários tipos de arquivos Vue para o Quasar).Adicionar ou remover suporte a “modes” que é como o Quasar chama as diferentes plataformas que ele suporta.

Antes de continuar, vamos ver alguns dos principais comandos.

O comando responsável por criar um novo projeto é o quasar create <diretorio>, sendo que o parâmetro <diretorio> é onde o projeto será criado, eu gosto de usar um ponto para informar que o projeto será criado no diretório atual (que deve estar vazio).

Assim que for criado o projeto, o CLI do Quasar mostrará outras opções. Eu copiei elas abaixo pra você e traduzi para português, assim da pra ter uma ideia do que cada item faz.

$ quasar

/ _ _ _ __ _ ___ __ _ _ __
| | | | | | |/ / __|/ _ | ‘|
| || | || | (| __ (| | |
___,_|,|/,|_|

Executando @quasar/cli v1.0.5
Executando @quasar/app v1.5.6

Exemplo de uso
$ quasar <comando> <opções>

Ajuda para um comando
$ quasar <comando> –help
$ quasar <comando> -h

Opções
–version, -v Imprimir versão da CLI do Quasar

Comandos
dev, d Inicie um servidor de desenvolvimento para seu aplicativo
build, b Faz build do seu aplicativo para produção
clean, c Limpa todos os artefatos de construção
new, n Cria rapidamente arquivos page/layout/component/… rapidamente
mode, m Adicionar/remover modos Quasar para seu aplicativo
inspect Inspecionar a configuração gerada do Webpack
ext, e Gerenciar extensões de aplicativo Quasar
run, r Executar comando específico fornecido por uma xtensão de aplicativo Quasar
describe Descrever uma API Quasar (componente)
test, t Execute o comando quasar/testing
– requer a instalação da extensão de aplicativo @quasar/testing
– este é um comando alternativo para facilitar o uso
info, i Exiba informações sobre sua máquina e seu aplicativo
help, h Exibe esta mensagem (em inglês)

Se o comando especificado não for encontrado, “quasar run”
será executado com os argumentos fornecidos.

Comandos fornecidos pela instalação global @quasar/cli:

upgrade Verifica (e opcionalmente) atualiza os pacotes Quasar
de uma pasta do projeto Quasar
serve Crie um servidor ad-hoc nos distribuíveis do App

Básicamente é isso, os principais comandos do Quasar segundo ele mesmo.

Componentes do Quasar

O Quasar tem muitos Componentes, MUITOS! E eles são o grande show da ferramenta toda, são eles que você usa para desenvolver e agilizar seu dia.

Antes de continuar, vale ressaltar que os componentes do Quasar não passam de componentes do Vue, só que já prontos pra usar.

É bem inviável descrever TODOS aqui, mas eu vou dar um geral sobre o assunto e te ajudar a seguir em frente sem mim.

Todos os componentes são configurados usando props (que vimos acima quando falei sobre o Vue.js), Slots (esse é novo) e Eventos.

Os eventos são mais específicos e vou deixar para outra oportunidade, vou falar sobre Slots a seguir.

No Vue.js, quando lidamos com conteúdo externo a ser adicionado dentro de um componente (o conteúdo ta tag HTML) usamos slots, é um nome complicado para um recurso muito simples.

Para ficar por dentro, basta acessar o link a seguir, você só precisa conhecer a feature do Vue, não virar mestre nela (embora eu recomende, conhecimento nunca é de mais), a ideia é você saber sobre o que eu estou falando.

https://br.vuejs.org/v2/guide/components-slots.html

Para conhecer TODOS os componentes e ver exemplos de uso acesse a documentação oficial no site a seguir e depois clicando onde diz Docs.

https://quasar.dev/

Como acessar a documentação oficial do Quasar.

E em seguida, clicar no item Vue Components do menu da esquerda.

Link para lista de components do Vue.

Todos os componentes tem uma sessão Usage que mostra exemplos de uso.

No momento em que eu escrevo este artigo, estes são os componentes que o Quasar suporta.

Não tem segredo, é conhecer para usar. Com certeza o Quasar tem algum componente prontinho para o seu projeto.

Uma dica legal, é que você precisa ativar cada um que for usar, mesmo que você possa ativar facilmente todos os Componentes, ativar um por um ajuda a ter um “build” final mais limpo e leve, assim o Quasar só carrega o que você precisa.

Tipos de arquivo do Quasar

No Quasar temos, básicamente, 5 tipos de arquivos que você pode usar para criar seus projetos.

pages – As páginas do projeto, cada um vai responder a uma URL;layouts – São os “templates”, ele encapsulam as páginas em layouts com menus, headers e footers, por exemplo.components – Num primeiro momento são parecidos com as páginas, mas eles servem para criar recursos reaproveitáveis, como os componentes nativos do Quasar (que falei no tópico anterior), mas que não foram implementados ainda.boots – São arquivos javascript que são executados no início do projeto e podem ser usados para os mais diversos fins, um exemplo é para configurar e iniciar o Axios (cliente de requisições HTTP – faz requests Ajax).stores – São usados para “armazenamento de dados centralizados” da aplicação, MUITO útil. É fornecido pelo Vuex. * Recomendo que de uma olhada quando tiver tempo.

Builds do Quasar – App para produção

Como já foi dito antes, o Quasar suporta várias plataformas e dois tipos de builds, desenvolvimento e produção.

Se você ainda não entendeu o que é o “build”, saiba que é simplemente o processo de transformar o esqueleto do Quasar em um aplicativo pronto para uso.

Fazemos tudo pelo CLI.

Como disse acima, os dois tipos de builds existentes são o para desenvolvimento e o para produção.

Para desenvolvimento existe o comando quasar dev, nele vemos o aplicativo funcionando no navegador e que atualiza sozinho enquanto trabalhamos.

Para produção (resultado final) existe o quasar build, nele precisamos informar para qual plataforma vamos “buildar” (Sim! Eu conjugo verbos do inglês no português, me processa), se você não informar a plataforma final ele vai criar o mais básico: SPA.

Aqui a documentação (que pode ser obtida em inglês usando o comando quasar build –help).

$ quasar build –help

Descrição
Cria distribuíveis do seu aplicativo.

Uso
$ quasar build
$ quasar build -p <número da porta>

$ quasar build -m ssr

atalho para “quasar build -m cordova -T ios”

$ quasar build -m ios

atalho para “quasar build -m cordova -T android”

$ quasar build -m android

passando parâmetros e/ou opções extras para

executável “cordova”:

$ quasar build -m ios — alguns parâmetros –e opções –aqui

Opções
–mode, -m Modo de aplicativo [spa|ssr|pwa|cordova|capacitor|electron] (padrão: spa)
–target, -T Aplicativo de destino
– Cordova (padrão: todos instalados)
[android|ios|blackberry10|browser|osx|ubuntu|webos|windows]
– Capacitor
[android|ios]
– Electron com pacote “electron-packager” (padrão:seu sistema operacional)
[darwin | win32 | linux | mas | tudo]
– Electron com pacote “electron-builder” (padrão:seu sistema operacional) – nota do erik: prefiro o electron-builder
[darwin|mac|win32|win|linux|all]
–publish, -P Também aciona hooks de publicação (se houver algum especificado)
– Tem um significado especial ao construir com o modo Eletron e usar electron-builder
–debug, -d Build para fins de depuração / desenvolvimento
–skip-pkg, -s Constrói apenas interface do usuário (ignora a criação de executáveis ​​Cordova/Capacitor/Electron)
– Cordova (ele preenche apenas a pasta /src/cordova/www)
– Capacitor (ele preenche apenas a pasta /src/capacitor/www)
– Electron (apenas cria a pasta /dist/ electron/UnPackaged)
–help, -h Exibe esta mensagem

SOMENTE para os modos Cordova e Capacitor:
–ide, -i I – Abre a IDE (Android Studio/XCode) em vez de finalizar com a
compilação no terminal/console

SOMENTE para o modo Elétron:
–bundler, -b Qual pacote vai usar (electron-packager ou electron-builder)
[packager|builder]
–arch, -A Arquitetura do aplicativo (padrão: seu sistema operacional)
– com “electron-packager”:
[ia32|x64|armv7l|arm64|mips64el|all]
– com “electron-builder”:
[ia32|x64|armv7l|arm64|all]

SOMENTE para electron-builder (ao usar o parâmetro “publish”):
–publish, -P Opções de publicação [onTag|onTagOrDraft|always|never]
– consulte https://www.electron.build/configuration/publish

Você pode ter notado que cada aplicativo/modo tem suas particularidades e que o Quasar tenta resolver isso para facilitar nossas vidas, mas no fim das contas aprender cada um deles pode ser a diferença entre você e seu “concorrente”.

Conclusão

Este artigo é apenas um guia para você se localizar enquanto aprende, estou planejando uma série de artigos práticos construindo um projeto do ZERO, então em breve teremos mais conteúdos sobre este assunto com exemplos mais práticos.

Se você quiser ser avisado quando estes artigos sairem, assina a newsletter:

Enquanto isso, da uma olhada na série de artigos sobre PHP:

Aqui o primeiro artigo da série: Projeto PHP do zero, vale a pena? – Série PHP sem framework – parte 1

O post Quasar Framework – GUIA “quase” completo para iniciantes apareceu primeiro em Blog Erik Figueiredo – Dicas para desenvolvedores.

Este artigo foi importado automaticamente por fazer parte do Planetário Dev. Quer fazer parte deste HUB de conteúdos? Faça parte do Planetário e veja as vantagens.

Não tem site ou blog? Seja um autor do site e ainda pode ser remunerado.

Leia também: