So the first thing to do is to open the terminal. So if you're on Mac OS or any Linux machine, you can open up the terminal. But if you're on Windows, you open up the command prompt. So before we even jump into the terminal so the first thing node js.org. So if you go to node j s.org. Here you'll find download for Mac OS.

But if you're on Windows, you'll get download for Windows or if you're on any other Linux distribution, you'll get your particular Linux distributions version. So you need to download this and install that I already have it installed so I'm not going to install it again. And then we can install UCLA using node. So for installing the UCLA you need to type the following command. So npm install hyphen G. So npm install hyphen g at Red UCLA, so hyphen g indicates that it's global. So installed for the whole machine, and accurate view slash D Li means that it did view is the main package and slash c li is a subset of the package.

I already have this installed, so it should not take me much longer. Alright, so once it's installed, so now We have the view CLI installed in our system. So now we can use vcli to create view projects. So to create a view project, we need to go into a specific directory where we want to create a view project. For me, it's in here. So here I'm going to create a new view project.

So for creating a view project, you need to type the following command, its view, create, and the project name. So for me, the project name would be x project. One thing to note here is that UCLA doesn't accept capital letters in the in your project name. So if I go ahead and give a capital T, I will get an error name can no longer contain capital letters. Previously, it was possible in UCLA to but since moved on to UCLA three, it has not been possible. So as soon as we hit enter, we get the following option to select a preset.

So a preset is nothing but a collection of packages that come along with the project. So just to see what all features or plugins that we have Have a variable, we can go to manually select features. So first thing we have available is babble. So babble is used for JavaScript compatibilities. So if you're running a new version of JavaScript on an older browser, and the browser does not support the newer features of JavaScript, they will will convert the newer versions of JavaScript into the older version. For example, if you convert a six syntax into years five, etc, TypeScript, you know, types devote or it is pw a support progressive web apps.

So if you want to create a progressive web app, you might want to have it checked. router. It's a view router, this is used for navigation inside of the view application. So as of now a lot like that, but we can select it in the future. View x is a state management library for view, CSS preprocessors are nothing but sass and less. So if you're not familiar with sass or less, these are CSS preprocessors that, that help us to write better CSS.

So this is not absolutely necessary, because you can also write normal CSS in view. But if you want to write if you want to have sass or less support, you can select that I'm going to select that linter Yes, lint. I'm not gonna say That unit testing and testing. So these are a couple of testing features, which we'll also talk about in the future. So once we have selected all the required features, we can select Enter. And since I've selected the sass or since I've selected the CSS preprocessors, it's since I've selected the CSS preprocessors, it's asking me, which one I want to use, either sass or less, I want to use sass.

You can have separate config files for each of the features that we install, or we can have all of them in one package file. I'm going to have separate package files. Alright, so what the CLA has done for us is it has created a new project here, instead of NPM. I'm using yarn, so I'm getting yarn so so if you're using NPM, you'll get NPM run serve. So we'll go into the artists project. And yarn.

So if you're wondering what is Yarn Yarn is very much similar to NPM. So it's kind of like a much more efficient version of NPM. It's fine if you don't have it. So the difference is NPM scheduled stuff and complete one after another, whereas yarn does the more badly making much more faster. So typing yarn serve, and we launched a local server, like the one we launched in the previous lectures. So our local server is hosted at localhost 8080.

So this is what you see when you set up your first Vue JS application. There's nice little logo here and says, Welcome to your Vue JS app, and links to documentation, baybel CLA documentation, essential links for the community chat, Twitter news ecosystem in the ecosystems, we can see that viewed out of UX, which we discussed earlier view dev tools, which we'll discuss in the previous lecture. Okay, so let's see what kind of files are inside of your project. So for that, I can do code space dot it's an extension for VS code. So VS code if you don't know Visual Studio code, it's a it's a neat little code editor. I'm using VS code you can use sublime or atom or anything is fine.

So but if you're using VS code, you need to go to extensions and install one of the Login, which is called as viewed. So if you did is kind of like a view support for the VS code, it's White Pine View, by invoices. When you come to the files, you can see that we have a lot fewer files in what you normally have the node modules is a regular one. in public, we have the index dot HTML. And inside the index HTML, we have the app div. So like we discussed in the previous lecture, we have an app div.

So this is a div, which we'll be working with. In x folder SRC, this is where most of the important files exist. So we have our main.js. So inside the view instance, it's a little bit different right? render ammount. In the previous videos, what we discussed was, in the view instance, we're going to give an element right in element we're going to specify whether it was class or whether it was an ID.

But here we have render, and we have a mount. The reason why is that it's rendering a component. Instead of rendering a div it's rendering rendering a component. If you can see here we are importing view as a plugin, I mean view as a library. I'm also importing view app as a component. So these dot view files are called as components.

So in terms of view, so mostly in front end frameworks how developers deal with stuff is that we deal with them in components. So, for example, a website has a header, body and footer. header is a component bodies are competent, and cooter is a component. So what happens is that when you have this header and footer as a separate competence, instead of having to rewrite your code, extensively, you can just reuse the competence already existing. So here the reader component is actually mounting the app component onto the index HTML. So the app component is the root component for all the activities are going to happen in your application.

So inside this component, you can see we have other components, we are importing components, and we are declaring them. So let's go with this dot view file in detail. So a dot view file consists of three parts, it can serve template, it can serve a script, it can serve style. So this is what makes the dot view files so much more easier to work with. So we have all the templating scripting and styling in one place for a single component. Generally when you're working with anger, each component has multiple files, right?

So each angle component has four files, HTML, CSS, TypeScript, and JavaScript. But here we have all three in one, this might not see much of an advantage right now. So when you're scaling up and your project is getting bigger and your components are increasing in number, it's going to be very much easier to maintain. So the first thing that template so in the template, we have a div of ID app. And inside the div we have an image, the image is logo, which you can see here. Under that we have this custom component, hello world with a message Welcome to Vue JS app.

So I can just change the message and I can see instantaneous so this hello world is a custom component. And this message is called as a prop. We'll discuss more about props later. So to use a custom component, you have two steps. First step is import the custom component input hello world from components slash hello world. So conference slash hello world done.

So, inside the export default section, you need to write components, and HelloWorld. So one thing, as we discussed with you, most of the things is going to be structured in a object format. So even when you if you have a data property, you'd have it in object format. Similarly, if you have the components, you need to have that conference as an object. And inside the conference, you're going to declare what are the components you want to use. So in our case, hello world, then you can use the component.

So if I just comment it out, you can see how much of the data was accessed from that component. So we can go to hello world dot view. And we can see that so everything that is here, is being rendered in our app dot view. So in terms of making the Hello World component, automatically gets reflected into the app view component, and automatically gets updated onto the main page style is CSS. There's nothing special about that. So you can use whichever language you're covering With and even in script, you can use script with JavaScript or you can use script with TypeScript.

So these are kind of like the main files, which you need to know about before starting a new project. And this is your package Jason, it consists of all the scripts and all the dependencies that you're using. In our case, we're using view. So that's it for this video. In the next video, we'll discuss as promised about competence and methods inside a new view project. And we're also going to look at use cases like how to use competence and how to use methods.

So most of the upcoming developers have a little bit of confusion when to use computed properties and when to use methods. So we're going to look at that with some more examples so you can understand the right context to use these kind of like properties.