Getting Started with Quasar

hello and welcome in this video I will show you how we can quickly create an application in viewed on chess using Queisser framework who don't yes is a third most popular library after angular and react to create single page applications other than SS SP a we can develop server-side rendering applications to improve the search engine optimization progressive web applications and mobile applications also main features which are provided by the beaut or chairs are UI binding virtual Dom to improve performance mechanism to build UI components and the straight management Wessel framework is based on viewed ojs to make our job much easier by providing various features out-of-the-box for example it provides numerous UI components helps to design layout and some utility packages in order to create application question for wide CNI tool to install the CLI we will be required North Georgia s if you guys don't have already know torch s it can be downloaded from North GA stored over G once we have not yes then we can proceed with installing the CLI to so I will use NPM I'm Glo installing it globally so I can execute it anyway to attain a few seconds to complete the installation yes the next step is to create the using the CLI to create project so whether it's a CLI tool and I'm using create command and then I have to give the folder name so it will ask a couple of questions first the project name the by default the frost underscore app that's fine we can change it if you want product name that is used for mobile apps as description or any CSS preprocessor there are three options available I normally recommend I actually myself have a preference with this one let's see SS then there is a strategy of importing the components in Queisser the third option it will import everything but when you import everything of course it will increase the build size second option everything you have to do manually whatever components you are using you have to import it manually third option is it will install whatever you are going to use it or components and use it will auto import that form since we are learning in the learning phase over I will go with this option then various features yes Lynch the view X that is our four state management exists Ajax library view - i18n for internationalization ie Elevens for years since we selected that es Lane so it will ask what type of pset we are going to use it I personally like this then the ID for Cordova our capacitor if we are building any mobile application once the project is ready if we want to execute npm install then we can go for that if we want to install execute this command manually one can choose the third option why we need this one actually npm install those who are already familiar with the nor DoDEA's actually if we want to install the dependencies then we have to execute this command npm install so so once the budget will be created it will automatically execute it if i use this command i can also go with a yawn but for this exercise I am using NPM it will take some time because you know it is installing the dependencies creating a project folders we are almost there once it is there we it will create folder first underscore app so that's the project created so we can see they are various files it now in order to run this project again I will use CLI tool where sir and I will use command death so it opened the browser with this web page localhost colon 8080 1 and this is a working application so very simple nothing special couple of slings that's the first project which we have created we have successfully created project using the wizard CLI so the next step is to configure ID so that we can edit over source code and debug it they have a variety of IDs available in the market but in this tutorial we are going to use widget studio code which is available open source and the free from the Microsoft so let's go for video studio code I'm going to search on my google very first link is the correct one so it is available for a variety of platform including Macintosh Windows and the Linux so you can download it as per your platform it's very simple and straightforward I already have it on my system so I'm not going to reinstall it so let me open the one in my system we just read your code so this is the home screen I need to open my project which we created in a previous lecture so I'm going on file open folder this is a project which I created in my exercises folder so I selected it and it loaded the project once this ID installed and the project is open as you can see there are a variety of options available but it also contains one very important option there is a terminal so it contains the built-in time in if I go there new terminal it opened it here and using this I can execute commands which are previously executed it using command prompt so it's my one prompt built-in into the widget studio and here it is so project execute it and is running now okay so we have setup we just be a quote open the project and executed the project using the terminal now but in order to use editor effectively for the source code editing and the debugging purposes we need to configure and we need to install various extensions how we will know about those extension if we go into the question where site go to the get started and on the left side if you see this is a section which provides various information how to configure which is to do code click on that so there are a section if we are using the standard eslint or if we are using prettier yes think if you remember while creating a project using quest CLI I choose the prettier format for the CTS land so that's why I will follow this section okay based on your selection you can choose either this one or this one depends how you created the project now for this one actually there are three extensions which are quite useful the first one is es linked es lint makes it possible to find the errors in the JavaScript code the prettier prettier makes a consistency in our source code and it provides a consistent look in the all the sections of the code Vita provides syntax highlighting Auto completion and many other features so these are three very important extraditions so let's install this one by one so this is why we just showed you a code editor this one is this extension section here I can choose the first one e as late this one so just install it I already have it otherwise I will have an icon like this strong and when I click this it will be stored after es l'ainte prettier code form it yes this one I will install this one but since it's already there so I don't need to do any action and the third one is beta once we install all these three sections and three extensions then we need to change our settings in the visual studio code in a second file this file is the open setting Jason and how I can find this one it will be available using ctrl shift P so if I here I press control shift P it opened the palette and the file name is open settings open settings yep very first one and I need to copy this one and paste it there okay and that's all just save it now my configurations are done for we just rhodium but all these are for source code editing it is for finding errors for syntax highlighting for formatting all the same okay so we configured or we chose to do for the source code editing next step is we need to configure our editor for debugging purposes so if we go into the same section we can find so we actually followed this section and if we go down there is a section debugger debugging our question project in which is to do code first thing we need a debugger form Chrome extension this extension will help us to debug the application which is running in the chrome while doing in the Visual Studio code so I mean we can put the breakpoints in widgets to do code and while the application is running in the chrome that is possible only through this extra nation so we need to set up this extension and the extension section search debugger foie gras and install it once you are done then we need to put you know a configuration file in the project configuration file every actually Queisser project have very important one file that is a quad or conf torch s and it's very complex file very lengthy I will explain this as we move it but for the time being we need to find a section the build and there we have to put it this one dev to source map so it will map the application running in the draw with the source code in Visual Studio code so for example if we will put the breakpoint in the widget studio code that the execution will stop in the browser because we have put that breakpoints individual code that happens if we correctly map it once this is done then we need to create our debugging consecration for that we need to go into the wrong section there is a large Dorchester open it and you can see there is a configuration element which is taking an array and then it takes an object and in object we specify configuration for each browser so you can see there is a confirmation for the browser already there because I already typed it there but you can copy it here and put it there like this okay so this is the setting we need it for debugging purposes now the next step is to run the application so that we can debug it so let's try out again in the terminal I will use quasi come online to execute my application or to run my application yes and application is running now on is rate zero you have to make sure that whatever is Airport you need to type the same port here in law and on Jason sometimes in some systems the eight zero eight zero port is already used so then in that case the question CLI will assign it another port for that which will be maybe eight zero eight one so whatever the port is there then you have to use the same port here okay so now our application is running we need to start over debugger before that I will put a breakpoint and maybe is in some JavaScript I will put a breakpoint here okay now execution should stop here so if I run my debugger and application stop there so it is working correctly and you can see there is also our debugger toolbar appearing in visual studio so I can execute it step by step so this is how we can debug application in which is to do code

Channel: Amer Sohail

Views: 487

Keywords: Quasar Framework, Vue.js, CLI

Id: mS4dwWPtFR8

Length: 18min 21sec (1101 seconds)

Published: Mon Mar 16 2020