Quasar Framework,
o Ionic do VueJS!
Rodrigo Alves
▪ Tutor web, NextU –
NativApps
▪ Front-End UI/UX
developer – Beeders
▪ Freelancer Full Stack JS
Why Vue?!
• Angular já teve sua época
de ouro (mas ainda tem
um Sr. Legado), React
atualmente está no topo
do hype, e o vue.js está
crescendo forte como
terceiro principal lib
javascript.
• Muito simples e produtivo
• Alta performace
OK, legal, vou trabalhar com vuejs, mas e a
UI, como fica?
Vou sair fazendo componente por
componente na mão?
Bootstrap para vue ?
Opa Vuetify parece interessante, até que
encontro esse cara:
Getting Started - CDN
Starter Kit (Recommended)
$ quasar init <folder_name>
Vue CLI 3 plugin
#Make sure you have vue-cli 3.x.x:
$ vue –version
#If you don’t have a project created with vue-cli 3.x yet:
$ vue create my-app
#Navigate to the newly created project folder and add the cli plugin.
$ cd my-app
$ vue add quasar
Ei véi! Isso tá com cara de Ionic!
Adicionando com Ionic
$ ionic generate component foo
$ ionic generate page Login
$ ionic generate page Detail --no-module
$ ionic generate page About --constants
Adicionando com Quasar
$ quasar new layout User
app:new Generated layout: src/layouts/User.vue +0ms
app:new Make sure to reference it in src/router/routes.js +2ms
$ quasar new page Profile Posts
app:new Generated page: src/pages/Profile.vue +0ms
app:new Make sure to reference it in src/router/routes.js +2ms
app:new Generated page: src/pages/Posts.vue +1ms
app:new Make sure to reference it in src/router/routes.js +0ms
Bora codar com Quasar
$ quasar dev
Description:
Starts the app in
development mode (hot-
code reloading, error
reporting, etc)
Usage:
$ quasar dev -p <port number>
Options:
--theme, -t App theme (default: mat)
--mode, -m App mode
[spa|ssr|pwa|cordova|electron] (default:
spa)
--port, -p A port number on which to
start the application
--hostname, -H A hostname to use for
serving the application
--help, -h Displays this message
# Developing a SPA
$ quasar dev
# ...or
$ quasar dev -m spa
# Developing for SSR
$ quasar dev -m ssr
# Developing a PWA
$ quasar dev -m pwa
# Developing a Mobile App (through Cordova)
$ quasar dev -m cordova -T [android|ios]
# Developing an Electron App
$ quasar dev -m electron
# build for production
$ quasar build
# build for production with specific theme
$ quasar build -t mat
$ quasar build -t ios
$ quasar build -m pwa -t mat
Theming...
# Material Design
$ quasar dev -t mat
# iOS theme
$ quasar dev -t ios
I’ve got the power!
• beneficiar de uma ótima experiência, fornecida pelo Quasar
CLI
• compartilham a mesma base de código para um leque de
plataformas
• permite escrever código ES6
• obter um código otimizado, minificado, da melhor maneira
possível
• permite escrever SFC (Componente em Arquivo Único - para
Vue)
And Show Me The Code!
Shut up!
Estrutura do
projeto
That’s all, folks!
Site oficial:
https://quasar-framework.org
Meu site pessoal:
http://rodrigoalves.hol.es

Quasar framework

  • 1.
  • 2.
    Rodrigo Alves ▪ Tutorweb, NextU – NativApps ▪ Front-End UI/UX developer – Beeders ▪ Freelancer Full Stack JS
  • 5.
    Why Vue?! • Angularjá teve sua época de ouro (mas ainda tem um Sr. Legado), React atualmente está no topo do hype, e o vue.js está crescendo forte como terceiro principal lib javascript. • Muito simples e produtivo • Alta performace
  • 6.
    OK, legal, voutrabalhar com vuejs, mas e a UI, como fica? Vou sair fazendo componente por componente na mão? Bootstrap para vue ? Opa Vuetify parece interessante, até que encontro esse cara:
  • 8.
  • 9.
    Starter Kit (Recommended) $quasar init <folder_name>
  • 10.
    Vue CLI 3plugin #Make sure you have vue-cli 3.x.x: $ vue –version #If you don’t have a project created with vue-cli 3.x yet: $ vue create my-app #Navigate to the newly created project folder and add the cli plugin. $ cd my-app $ vue add quasar
  • 11.
    Ei véi! Issotá com cara de Ionic!
  • 14.
    Adicionando com Ionic $ionic generate component foo $ ionic generate page Login $ ionic generate page Detail --no-module $ ionic generate page About --constants
  • 15.
    Adicionando com Quasar $quasar new layout User app:new Generated layout: src/layouts/User.vue +0ms app:new Make sure to reference it in src/router/routes.js +2ms $ quasar new page Profile Posts app:new Generated page: src/pages/Profile.vue +0ms app:new Make sure to reference it in src/router/routes.js +2ms app:new Generated page: src/pages/Posts.vue +1ms app:new Make sure to reference it in src/router/routes.js +0ms
  • 16.
    Bora codar comQuasar $ quasar dev Description: Starts the app in development mode (hot- code reloading, error reporting, etc) Usage: $ quasar dev -p <port number> Options: --theme, -t App theme (default: mat) --mode, -m App mode [spa|ssr|pwa|cordova|electron] (default: spa) --port, -p A port number on which to start the application --hostname, -H A hostname to use for serving the application --help, -h Displays this message
  • 17.
    # Developing aSPA $ quasar dev # ...or $ quasar dev -m spa # Developing for SSR $ quasar dev -m ssr # Developing a PWA $ quasar dev -m pwa # Developing a Mobile App (through Cordova) $ quasar dev -m cordova -T [android|ios] # Developing an Electron App $ quasar dev -m electron # build for production $ quasar build # build for production with specific theme $ quasar build -t mat $ quasar build -t ios $ quasar build -m pwa -t mat Theming... # Material Design $ quasar dev -t mat # iOS theme $ quasar dev -t ios
  • 18.
    I’ve got thepower! • beneficiar de uma ótima experiência, fornecida pelo Quasar CLI • compartilham a mesma base de código para um leque de plataformas • permite escrever código ES6 • obter um código otimizado, minificado, da melhor maneira possível • permite escrever SFC (Componente em Arquivo Único - para Vue)
  • 19.
    And Show MeThe Code! Shut up!
  • 20.
  • 26.
    That’s all, folks! Siteoficial: https://quasar-framework.org Meu site pessoal: http://rodrigoalves.hol.es