O documento descreve o Quasar Framework, um framework para construção de aplicativos single-page, com renderização do lado do servidor e aplicativos progressivos para web. Ele fornece componentes para web, mobile e desktop, além de ferramentas como o Quasar CLI.

1. Quasar
Framework

2. Quem sou
Patrick Monteiro
27 anos
● Engenheiro da Computação
● Especialista em desenvolvimento Web
● Desenvolvedor Front-end na Kovi
● Organizador da comunidade Vue.js Norte

3. O que é o
Quasar
Framework?

4. Quasar Framework
Single Page
Applications(SPA)
Serve Side Render
Apps(SSR)
Progressive Web
Apps(PWA)
Hybrid Mobile
Apps(Android/iOS)
Electron Apps(Windows,
Linux, Mac)

5. Quasar Framework

6. Principais
Características

7. Principais Características
● Todas as plataformas de uma só vez
● Os maiores conjuntos de componentes da web, rápidos e responsivos.
● Melhores práticas recomendadas integradas por padrão
● Migração progressiva de seu projeto existente
● Experiência única através do Quasar CLI
● Incrível comunidade em constante crescimento
● É facilmente personalizável (CSS) e extensível (JS)
● Pacote de idiomas
● Ótima documentação

8. Principais Características

9. Principais Características
● CLI -um desenvolvedor vasto e poderoso e um ambiente de construção
para desenvolvimento e distribuição de aplicativos entre dispositivos.
● UI - é o que chamamos de enorme biblioteca de componentes de alta
qualidade no Quasar.

10. Principais Características
● CLI global - (@quasar/cli) realiza tarefas como criar projetos e fornecer
distribuidores de aplicativos localmente com um servidor da Web ad-hoc.
● App CLI - realiza a maioria das tarefas necessárias em um projeto de
aplicativo Quasar, como oferecer o ambiente do servidor dev (para HMR e
muito mais!), Adicionando inicialização ou componente modelos de
arquivo para o seu projeto ou descrição de APIs para componentes e,
claro, a parte mais importante, desenvolvendo seu projeto para os vários
ambientes que o Quasar suporta (por exemplo, Web, PWA, Web + SSR,
PWA + SSR, Cordova, Electron etc.) .

11. Principais Características
Existem 3 formas de usar o Quasar:
● UMD/Standalone(incorporado em um projeto existente através de CDN,
integração progressiva)
● Desenvolvimento com Quasar CLI(a experiência premuim)
● Plugin Vue CLI 3

12. Quasar CLI

13. Quasar CLI
O Quasar CLI permite que você crie novos projetos em pouco tempo, gerando
um aplicativo base, preenchido com tudo o que você precisa para começar a
trabalhar em seu aplicativo.
O trabalho pesado é feito por ele, então você não precisa se preocupar com
tarefas redundantes.

14. Quasar CLI
O que vem incluído no Quasar CLI ? (quasar dev)
● Babel, então você pode escrever código ES6
● Webpack + vue-loader
● Estado preservado em hot-reload
● Estado preservado em erro de compilação
● Lint-on-save com ELint
● Possibilita desenvolver diretamente em um emulador de dispositivo ou um
telefone real conectado à sua máquina
● Desenvolver diretamente numa janela Electron com as ferramentas de
desenvolvedor incluídas

15. Quasar CLI
E para produção ? (quasar build)
● Javascript minificado com UglifyJS
● HTML compactado com html-minifier
● Css compactado e extraídos de todos os componentes em um único
arquivo com cssnano
● Tratamento de cash eficiente

16. quasar.conf.js

17. quasar.conf.js
● Componentes, diretrizes e plug-ins Quasar que você usará em seu site /
aplicativo
● Configuração do pacote de Idiomas do seu site/app
● Biblioteca de ícones que você deseja usar
● Porta do servidor de desenvolvimento, modo HTTPS
● Animações CSS
● Lista de arquivos de inicialização (src/boots)
● Opções do manifesto do PWA
● Suporte para IE11
● Estender configurações para Webpack

18. Quasar UI

19. Quasar UI