In Web Development
How To Install Vue 3 - read the full article about Vue Js update, Web Development and from TechCheck on Qualified.One
Youtube Blogger
whats going on guys? today, im going to show you how to install Vue 3, give you a quick overview of Vue 3, and how Vue works in general. So well start off in our command line. Well run npm install, dash g for global and vue cli. This could take anywhere from 20 seconds to about 20 years.
and for me it was the latter so ill probably just fast forward this and pick it back up where it finished and so its done seems theres a new major version of npm available thats unrelated to view 3 and this tutorial youll see it added a million packages and it was successfully installed to create a new project well type view create and the name of the project ill just call it tech check says your connection to the default yarn registry seems to be slow would i like to use this for faster installation i assume this wont happen when youre starting a new view project ill go ahead and say yes and it seems that i already have a project called tech check asking if i want to overwrite merge or cancel ill go with cancel and ill try this again this time ill do view create intro project so itll ask you if you want to go with view 2 or view 3 or manually select features ill go ahead and show you that and now here you want to hit spacebar to select any of these and the router would be one that would be good to add choose a version of view you want to start the project with we want to do view three pick a linter slash formatter config ill just do the error prevention only and ill just do lent on save and where do you prefer placing config for babel and eslint etc ill have their own dedicated config files instead of the package.json and save this as a preset no thank you pick the package manager ill go with yarn i usually use npm but my works been using yarn so im trying to use yarn more nowadays thats now going to create a project with all the options that we specified this also might take a hundred years so it successfully created the project we can change directory into the project im going to run code period open up my code editor see in our source file here we have the app.view see cant find a typescript config or a javascript config thats okay ill do yarn serve to run the dev server thatll be on localhost 8080.
localhost 8080 and here is our project so this is our app component see it looks like theres a hello world component thats inside this app component and this is that component there this is where were importing it into the app.view and then we register a component right here and we also have some basic styles main js this is how we create the app then we import our app component and then we send the app component into create app and then we mount it to an id of app that id is in a div which is in the public folder index.html youll see a div down here with the id of app so thats whats getting rendered to the browser and then the javascript injects your view project into that div so we have this hello world component and were sending in a prop that has a message of welcome to your vue js app in our hello world dot view component this is a big part of what were seeing on our page theres the message were sending in with the double brackets there and thats how you would send in a property and then those double brackets or how you would display that property itll show the value of it so were naming the component and the properties is that message property were sending in thats a type string were specifying there so you have the script underneath the template tag your template tag being whats being displayed the script is where you would register components or properties etc and then you also have a style tag where you have styles notice it says scoped here and thats means that it is scoped to this component only instead of it being global styles so this video was more about the installation of view and then a quick general overview and then ill make another video where we do a little more coding and manipulation but thats how you would get up and running with you thats all for today thank you for watching you
TechCheck: How To Install Vue 3 - Web Development