Pages

Saturday, 6 June 2020

关于Quasar

Quasar CLI Installation

Make sure that you have Node >=10 and NPM >=5 installed on your machine.
WARNING
Do not use uneven versions of Node i.e. 11, 13, etc. These versions aren’t tested with Quasar and often cause issues due to their experimental nature. We highly recommend always using the LTS version of Node.
# Node.js >=10 is required.

$ yarn global add @quasar/cli
# or
$ npm install -g @quasar/cli
TIP
If you are using Yarn, make sure that the Yarn global install location is in your PATH:
# in ~/.bashrc or equivalent
export PATH="$(yarn global bin):$PATH"
Under Windows, modify user’s PATH environment variable. If you are using yarn then add %LOCALAPPDATA%\yarn\bin, otherwise if you’re using npm then add %APPDATA%\npm.
Then we create a project folder with Quasar CLI:
$ quasar create <folder_name>
TIP
Some advanced scenarios require to use a custom starter kit (eg. testing or personal presets). In those rare cases, you can use --kit option. Read more about this into create command description. Remember that the recommended way to go is through writing a Quasar App Extension though.
Note that you don’t need separate projects if you want to build any of the available platforms. This one project can seamlessly handle all of them.
To continue your learning about Quasar, you should familiarize yourself with the Quasar CLI in depth, because you will be using it a lot.

How it works

Quasar CLI is made up of two packages: @quasar/cli and @quasar/app. The first one is optional and only allows you to create a project folder and globally run Quasar commands. The second package is the heart of it and it gets installed into every Quasar project folder.
Once a project folder has been generated, Quasar CLI will only help in running @quasar/app's commands globally. You don’t need it for anything else at this point. To ensure full independence from Quasar CLI you can write npm scripts (in your package.json) to run Quasar commands. It is @quasar/app (which is specific to each project) that will run all the CLI commands.
Example of adding a few npm scripts into your package.json:
// package.json
"scripts": {
  "dev": "quasar dev",
  "build": "quasar build",
  "build:pwa": "quasar build -m pwa"
}
The above will allow you to run $ yarn dev or $ yarn build without the need of a globally installed @quasar/cli, should you wish to do so.
Alternatively, you can even use npx to run quasar commands without the need of a globally installed @quasar/cli.
$ npx quasar dev
from https://quasar.dev/quasar-cli/installation
----

Quasar Framework - Build high-performance VueJS user interfaces in record time 

Quasar Framework

Build high-performance VueJS user interfaces in record time: responsive Single Page Apps, SSR Apps, PWAs, Browser extensions, Hybrid Mobile Apps and Electron Apps. If you want, all using the same codebase!
    
Join the chat at https://chat.quasar.dev  https://good-labs.github.io/greater-good-affirmation/assets/images/badge.svg
Please submit a PR to https://github.com/quasarframework/quasar-awesome with your website/app/Quasar tutorial/video etc. Thank you!

Supporting Quasar

Quasar Framework is an MIT-licensed open source project. Its ongoing development is made possible thanks to the support by these awesome backers.
Please read our manifest on Why donations are important. If you'd like to become a donator, check out Quasar Framework's Donator campaign.

Proudly sponsored by:

Documentation

Head on to the Quasar Framework official website: https://quasar.dev

Stay in Touch

For latest releases and announcements, follow on Twitter: @quasarframework

Chat Support

Ask questions at the official community Discord server: https://chat.quasar.dev

Community Forum

Ask questions at the official community forum: https://forum.quasar.dev
-----
 A list of awesome things related to Quasar 


Awesome Quasar Awesome

A list of awesome things related to Quasar

Resources

Official Resources

External Resources

These resources have not been created by Quasar Team, nor do we maintain them or financially benefit from them.

Official Community

Local Communities

These communities are not maintained by Quasar Team.

Tutorials

Video Tutorials

AuthorLinksDescriptionQuasar
Patrick MonteiroYouTubeIntroduction to the Quasar Frameworkv0.17.18
Danny ConnellYouTubeQuasar Framework: Create a Vue js app & deploy to web, mobile app & desktop app in 30 minutes!v0.17.20
Danny ConnellYouTubeQuasar Framework V1 Course Preview: Create a Real-World, Cross-Platform Appv1.0.0-beta.19
Patrick MonteiroYouTubeBuilding a multiplatform application with Quasar Framework. (pt-br)v1.0.5
Program With EricYouTube serieQuasar Vue.js Tutorial
Tobias MesquitaMediumQuasar - SSR and using cookies
Danny ConnellYouTubeQuasar Framework: Icons & Splashscreens for Web, iOS, Android, Mac & WIndows apps Instantly!
Danny ConnellYouTube serieQuasar Framework: Vue.js Cross Platform App
Danny ConnellYouTube serieQuasar Framework: Vue.js Chat App - with Vuex & Firebase (for Web, Mobile & Desktop)
Danny ConnellYouTube serieQuasar Framework: Animated Winner Picker App!
Andre MadarangYouTubeQuasar Framework for Vue.js
codeguruYouTube serieQuasar framework - Building production web app using GraphQL, AWS Amplify, and Quasar
Impeccable NinjaYouTubeSign and align Cordova apps created with Vue and Quasar
Do not forget to watch official video tutorials.

Articles

AuthorLinksDescriptionQuasar
hawkeye64MediumgithubBuilding an Electron File Explorer with Quasar (and Vue)v0.17.18
Patrick MonteiroArticleE2E Test with Cypress in the Quasar Framework(pt-br)v0.17.18
Patrick Monteiro (pt-br) and William Comnisky (en)website (en)Quasar Framework with Social Login using Hello.jsv1.0.3
Navicstein Rotcivdev.toDeploying an app from Gitlab to Heroku using the Quasar framework and Sailsjs
Jeff Galbraithdev.toPublish your Quasar SPA on Github.io with History Mode
Xkontidev.toCreating Quasar Framework project with Typescript support
Pratik PatelMediumAdding Charts in Quasar
Pratik PatelMediumAdding Charts in Quasar using UMD (Unified Module Definition)
nothingismagickMediumUse Sass Variables in Javascript
farwishArticleQuasar BEX preview guide (Chinese)
farwishArticleDeploy Quasar SSR combine with pm2 and Nginx for proxy (Chinese)
Do not forget to read an official blog.

Community App Extensions

NameDescription
qmodeltdQModelTd is an UI app extension for Quasar that simplifies the usage of editable or selectable QTd
remote-dev-toolsVue remote devtools for Cordova and Electron apps made with Quasar
alpaca-formsAlpaca form builder built for Quasar
draggableA Quasar extension that makes elements draggable and movable with keyboard.
swipe-to-closeA Quasar Framework app extension that allows you to close dialogs by swiping.
qdatetimepickerQDatetimePicker for Quasar
qribbonCustomisable ribbons with a component builder. Allows ribbons at the top, corners, bottom etc.
http-authenticationHTTP authentication using the Vuex store with basic login, registration and password reset pages.
system-environment-variablesLoading of system environment variables for deploying on CI environment.
easy-formsA component to easily generate (Quasar) forms by only defining a "schema" object.
easy-tablesA component to easily generate (Quasar) tables by only defining a "schema" object. (based on the same schema as easy-forms)
vuelidate-rulesA Quasar Framework app extension that allows you to use Vuelidate methods as internal Quasar rules in fields of a form
QGridQGrid is a Quasar App Extension. It allows you to filter data for each column, Drag and Drop Rows and also allows you to filter data using header filters.
QHierarchyQHierarchy is a Quasar App Extension. It allows you to display data in hierarchy structure on your page.
QDraggableTreeQDraggableTree is a Quasar Framework app extension that allows you to drag and drop the nodes in the Quasar QTree
APIWrapperAn out of the box API client that wrap axios with common features like: Vuex store integration, masive requests, homogeneous responses, concurrency...
Quasar Tiptapgithubdemo

Other Community Components and Tools

For older Quasar versions or not supplied through a Quasar App Extension
NameLinksDescriptionQuasar
Quasar Geolocation ExamplegithubdemoSample app to demonstrate usage of geolocation with Quasar Frameworkv1.9.8
Quasar 3D ModelgithubdemoSample application with a 3D file renderer (.stl, .obj, .json, .dae, .ply, .gltf)v1.1.2
Quasar Apex ChartsgithubdemoProject using Quasar framework and ApexCharts 📊 📈 📉v1.1.2
Quasar Barcode ReadergithubdemoBase code for a code reader application: EAN, CODE 128, CODE 39, EAN 8, UPC-A, UPC-C, I2of5, 2of5, CODE 93 e CODABAR with QuaggaJS and Quasar Framework(no dependency on cordova)v1.1.2
Quasar QRCode ReadergithubdemoA simple Javascript-only QRCode generator and reader (no dependency on cordova). Great for web and PWA solutions.v1.0.6
Quasar Speech APIgithubdemoExample project using Speech Web API to transcribe speech into text and synthesize text into speech.v1.0.6
QInputEx ComponentgithubThe Advance Input Component for Quasar is used as single-line input box for date, time, password, color, select etc.v1.0.0-beta.1
Quasar SnippetsgithubMarketplaceQuasar components' snippets for VSCode that can increase your productivity working on Quasar projects.v0.17.x
Quasar Steem Beneficiariesgithub
npm
A Quasar/Vue component for easily adding beneficiaries support to your Steem dapp.v0.17.16
Quasar calendargithubA full calendar display in multiple formats that accepts event data and display it in month, week, multi-day, single day and agenda viewsv0.15.6
Laqu-lgithubA complete starter kit that allows you create amazing apps that look native thanks to the Quasar Framework. Powered by an API developed in Laravel Framework using the easy GraphQL queries language. And ready to use the Google Firebase features.v0.15.10
Quasar CloudgithubAn online file manager project (like dropbox) showing usage of axios, vuex, validation, authenticationv0.15.10
APIWrappergithubnpmA package designed to wrap up the most common features of an api client implementation, with common features like: Vuex store integration, masive requests, homogeneous responses, concurrency...v1

Projects Using Quasar

NameLinksDescriptionQuasar
Kudos - Company profile templategithubwebsiteFree template for company profile made using Quasar Framework and Vue.js! It is a fully responsive template which you can use for your company or may be for your own portfolio website.v1.9.15
Expense TrackergithubwebsiteA simple application to track expenses and split bills.v1
Quasar ScrumgithubwebsiteA Free Quasar Scrum Template : Agile process framework for managing complex tasksv1.9.12
Quasar AdmingithubwebsiteA Free and beautiful Quasar Admin templatev1.9.3
Quasar ShoppinggithubwebsiteFree and Open source eCommerce UI template written in Vue.js/Quasarv1.9.3
Quasar CRM AdmingithubwebsiteA free and beautiful Quasar template for CRM needs.v1.8.5
AlighierigithubwebsiteA distraction-free writer toolv0.14
P.volvewebsiteVideo workout subscriptionlanding pages, also includes weight tracking, photo upload, etc. for subscribersv0.15.9
BrotheldandroidiosBrotheld (Bread Hero), a german app for hobby bakersv0.14
MyClinicandroidiosApplication for displaying and managing medical clinic examination room statusv0.14
WeacastgithubwebsiteOpen source platform to gather, expose and make use of weather forecast datav0.13.10
CryptoPricegithubandroidAn app to inform us of price (USD & EUR) of the main crypto-coinsv0.14.4
Quran AppwebsiteandroidQuran Lite with English translationv0.14.4
SHUhelpergithubwebsiteOpen source university online community and toolkitsv0.14.7
2018 Quarterly Tax EstimatorandroidiOSMac App StoreEstimates quarterly taxes and taxes to save per paycheckv0.14
Go2SeewebsiteRussian online travel servicev0.14.7
Guitar WorkshopwebsiteE-commerce shop, library, streaming video player, real time chatv0.15.9
Karrot (Foodsaving Worldwide)githubwebsiteA web-app to support foodsaving groups worldwide, with the goal to save our common resources as much as possiblev0.14.8
onvif-nvt-snapshot-vue-samplegithubAn onvif-nvt (package) sample project for snapshots and PTZ using Vue 2.5 and Quasar 0.14.7v0.14.7
Finca Reportwebsite/android/iosSistema de informacion para el cultivo de palma africanav0.15.3
SoFootandroidiosSO FOOT is an iOS & Android mobile football news application, seen differently. With original and offbeat content, the app is based on real time and smart content feed to make it simple and accessible with a scroll.v0.14.7
PaintTubeTVwebsiteShop, library, streaming video player, real time chatv0.15.9
MyBibouandroidiosMyBibou is an iOS & Android mobile application that simplifies the life of parents for successful family outings. The app geolocates users on a map and give them relevant information based on their needs and situation.v0.14.7
BudgexpwaBudget and expense trackerv0.15.1
BoolywebsiteA people-matching toolv0.14.6
TakistaandroidgithubTo Do Lists Managerv0.13.4
Blinga!websiteandroidiosA points program and guide for selling products and services in cities.v0.14.0
Charging StationsgithubCharging stations viewer hybrid appv0.14
Carpool 3DwebsiteCarpool 3D Truckv0.14.7
The Amusing DevelopmentwebsitePortfolio websitev0.14.7
HabotgithubA chatbot for openHAB using machine-learning natural language processing from OpenNLPv0.14.6
TMdbwebsitegithubQuasar app with The Movie DB catalogv0.14.7
Take Actionandroidiosv0.14.5
Voting DaapgithubE-votingv0.14
KanttumwebsiteTeacher training without complicationv0.14.8
Stock ScannergithubWorking Demo of Barcode/QR code scanner using VueJs+Quasar+Cordovav0.13.4
ShockProiosMaintenance Interval Trackingv0.12
My Spellswebsite5e Personal Spellbookv0.13.9
TigrisgithubMicro-learning for professionalsv0.13
Pilgrim and Wanderer's SongbookandroidiosMobile Application Songbooks has been created for one of the biggest Protestant Church.v0.15.12
dockJobgithubdocker hubJob scheduler with a web UI - designed to run inside a container.v0.15.5
Your Daily WalkwebsiteSubscription ecommerce, workout video calendar, streaming video player, real time chatv0.15.9
ChronocrossandroidProductivity tool that combines Pomodoro Technique and Eisenhower Matrix.v0.15.10
Jornal PelicanoandroidMobile application for a Navy Web Journalv0.14.1
VuenotegithubVuenote is the simplest note app.v0.15.10
SifàpwaSocial platform for buyer groupsv0.15.10
Realworld ConduitgithubMedium.com clonev0.15.10
vue-quasar-adminwebsite,githubadmin-dashboardv0.15.14
letsbutterfly(tm)pwaReal estate platform in your pocket. https://letsbutterfly.comv0.15.10
quasar-documentation++githubAll-in-one Quasar Documentationv0.16.0
Dolphin NotewebsiteA Simple and Elegant markdown note application.v0.15.14
QuicknotewebsiteA Simple and Elegant markdown quicknote DApp.v0.15.14
T9N ManagerwebsiteTranslation manager for developersv0.16.0
KicktrackwebsiteAndroidiOSFoosball score keeperv0.16.0
Musical DatawebsiteAccess Spotify's data of your favorite music.v0.16.0
NebidewebsiteCross-platform Nebulas smart contract IDE.v0.16.0
Nick ZuccarelliwebsiteA portfolio website for Nick Zuccarelli (a.k.a: me!)v0.16.0
jQuizzerandroidSimple Java 8 Quiz / Trainer Appv0.16.0
SA Email BuilderwebsiteEmail template builder responsive v5v1.0.0-rc.2
Boid.comwebsiteA blockchain based social computing platform. Homepage and web/electron app are pure Quasar.v0.16.4
Dappos Ethereum POSgithubwebsiteA Point of Sale (POS) app like Square! For Ethereum payments. Open in a Mobile wallet and receive customer's payments with an intuitive UI.v0.17
INTIwebsiteOnline white-label ticketing system with CRM and custom ApplicationsLatest
FastientPWAA journaling and stats tracking application for extended fasts.v0.17.10
SquyncSPAMusic library.v0.14
CidadeMOBpwaandroidios(Brazil) Application that offers services of the city hall for citizensv0.17.13
GH FollowerandroidSimple app to get push notifications on a GitHub repository new releasev0.17.5
Omnia LivestreamSPAFree & affordable livestream provider for churches and ministries. Livestream to your website, Facebook, and YouTube, worldwide CDN, and Auto-Archiving.v0.15.14
RomiPWAAndroideCommerce applicationsv0.17.9
Just Go Vote!website/PWAiosandroidApp makes it easier for people to vote, and encourages them to do so in the upcoming mid-terms.v0.17.17
StemQstemq.ioQuestions and Answers app dedicated to STEM topics and rewarding contributors with Steem cryptocurrency.v0.17.16
Tenpin ToolkitiOSAndroidApp featuring a collection of tools to help tenpin bowlers and coaches develop their skills and improve their games.v0.17.17
Trainero.comwebsiteiOSandroidAll-in-one App for a Personal Trainer with +35000 users world-widev0.17.18
HyperSignYoutubeGitHubHypersign is a cryptography based SingleSignOn Solution that enables users to securely access [Web/Blockchain/Federated] applications without providing their access credentials [usernames and passwords].v0.13
schild.reportgithubGerman articleThis electron app is a report generator that works with schild data (German student administration)v0.17.18
P4wnP1_aloawebsitePentesting Framework for the Rapsberry Pi Zero Wv0.17.16
CineMatchwebsiteiOSandroidA list app to organise films, tv shows and make shared watchlists!v1-beta.15
RankUpwebsiteRankUp is a website that allows you to find teammates on cooperative and competitive video games like Overwatch or Rainbow Six Siege (more to come), build your team, and stay updated about video game newsv0.17.19
Email SnippetsmaciosReplying to the same emails over and over again? Do it in a snip with Email Snippets! Just choose your snippet to copy it to your clipboard, then paste into your Email app.v0.17.20
Counter CalculatoriosNeed a counter / tally app that also lets you do those difficult calculations? Counter Calculator is the app for you!v0.17.20
Map Marker GeneratorwebsiteA Free Online Tool To Generate Custom Map Icons On The Flyv0.17.19
spoonacularwebsiteAndroidiOSspoonacular food companion, meal planner, and shopping listv0.17.20
+EconomicasAndroidiOSAn unofficial student made app for public univeristy students from the Faculty of Economic Sciences, University of Buenos Aires, Argentina.v0.16.4
+FADUAndroidiOSAn unofficial student made app for public univeristy students from the Faculty of Architecture, Design and Urbanism, University of Buenos Aires, Argentina.v0.17.9
Monocle ReaderwebsiteA modern and elegant RSS Reader. Feedly meets Pocket.v0.17.23
Blue Moon Camera and MachinewebsiteCustom E-Commerce with realtime POS system inventory integration via API.v0.17.22
NotaCL Note-taking like chat messagesAndroidNote taking with multiple chat rooms with different colors.1.0.0-beta.2
Johnson Lai's PortfoliopwaPortfolio Website for Johnson Lai.1.0.0-beta.11
mempalwebsiteAn app that helps you to remember everything you read and learn.v0.17.20
Agency «Day & Night»websiteApartment agency.v1.0.0-beta
Kawal Pemilu (PILPRES)androidElection Guard In Indonesia.v1.0.0-beta.17
CashierappsourceAn app for creating ledger/hledger transactions1.0.0.beta24
ExorcismgithubDesktop wallpaper manager1.0.0-rc.6
SunEnginegithubwebsiteCMS+ site engine with blog, articles and forum functionalities. Asp.Net Core on server side.1.2.x+
TimesheetgithubwebsiteSelf-hosted application to manage project reporting. Golang, Gin used on server.1.9.2
HavideawebsiteSocial network for creative people.1.0.0-rc.5
Stelace Heroes PlatformgithubwebsiteOpen-source template featuring Stelace platform runner with Quasar UI and super heroes in NYC.1.0.0
Gas Station Gamblers: California ScratchersAndroidwebsiteThe smartest way to pick a California Scratcher!1.0.0-beta26
issue bloggithubwebsiteA blog tool powered by GitHub issues.1.0.0
61 Financial AppAndroidiOSA replica of 61 Financial Web Appv1
VugifygithubwebsiteConvert Vue HTML syntax to Pug.v1.0.0
CuppaZeePWAA tool to help players of the Geolocation game Munzeev1
Prokarman Free Resume BuilderWebsiteA free resume builder to craft resumes for your dream jobv1
Content HubWebsiteSpread the word about your business everywhere online and track your impact.v1
GistorgithubwebsitePowerful UI for your Gist snippets stored on GitHub.v1.2.x
PrivygithubAndroidAn educational crypto-toolkit that steps through the math for password security, RSA keypair generation, and hashing algorithms.1.0.0-beta.17
LandHogitlabPWASecurely maintain your own search history across multiple search engines.1.0.0
WebbygitlabPWADiscover a better internet. Find and favorite Blockstack dapps1.2.1
NeolinkwebsiteOnline store.v1
ColobanwebsiteAndroid, Windows, MacOSCollaborative task manager + Messsenger: Audio and Video calls to your colleagues and friends, TODOs on the fly during conversation, Kanban, Calendar for easy tasks management, Offline mode, Multiplatform and many more!v1
Growth JournalwebsiteAndroid, WebGrowth Journal: Become a better you.1.2.6
KetoShareAndroidwebsiteA recipe and eatery sharing app for the Ketogenic dieting community, especially in Singapore.v1.11.1
Vertical KitPWAClimbing Ropes catalog. Find your perfect rope.1.5.4
MicroIoT StudiogithubwebsiteMicroIoT Platform web UI management toolv1.5.0
SimulstorewebsiteSimulstore is an Industrial AppStore. Tools for Engineering Calculations and Digital Twin Applicationsv1.5.5
Api DocgithubAn open source Crud API documenterv1.5.11
SAM9000 APMPWAProject Management, File Sharing, Document and Email Management AI Poweredv1.5+
Learn music theory with SonidWEBiOSAndroidEasily learn music theory in a fun a structured manner!v1.5+
QuackergithubBrowser Extension to clean website ADsv1.0.0+
ChaoXinDongSSRBeauty picture lovers communityv1.9.9
Poker2winSPAEthereum Dapp poker game for bet, i18n supportv1.6.0+
Dashblocks TemplategithubwebsiteA Free and Open Source Quasar Material Admin Template focusing on beautiful Dashboards and In-App Analyticsv1
Github MethodgithubwebsiteCool habit tracker based on Github conceptv1
AftermangithubCreate beutiful docs in markdown and HTML from postman collectionv1
OffsoSSRBeautiful search application user interfacev1.9.0+
FotrinogithubwebsitePhoto galleryv1.11.1
31010SSRCryptocurrency market quant user interfacev1.11.3+
@winwin/hexo-editorgithubwebsite demoAn online editor for Hexo blog.v1.8.6
The COVID-19 GameAndroidWebsiteSnapFirefoxFight the COVID-19 infection with your white blood cells!v1.11.3
Groovechat.fmwebsiteA collaborative listening app for Spotify, alowing several people to listen to a playlist at the same time.v1.11.3

from https://github.com/quasarframework/quasar-awesome

No comments:

Post a Comment