Baixar para ler offline
![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](https://image.slidesharecdn.com/quasarframework-180817130514/85/Quasar-framework-16-320.jpg)
![# 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](https://image.slidesharecdn.com/quasarframework-180817130514/85/Quasar-framework-17-320.jpg)
Carregado porRodrigo Alves
Quasar framework
O Quasar Framework é uma alternativa ao Ionic para Vue.js, focada em facilitar a criação de interfaces de usuário e aplicações de forma produtiva e performática. Ele permite o desenvolvimento de aplicações para diversas plataformas usando uma única base de código e oferece comandos simples para iniciar, desenvolver e construir projetos. Além disso, o Quasar oferece suporte a temas, modo de aplicação e otimização de código, tornando-se uma ferramenta poderosa para desenvolvedores front-end.
![Melhorando o desempenho do seu WordPress [WordCamp São Paulo 2015]](https://cdn.slidesharecdn.com/ss_thumbnails/wordcampsaopaulo2015-151130144513-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
Quasar framework
- 1. Quasar Framework, o Ionicdo VueJS!
- 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