Setting up and running a Vue project

- [Instructor] Now that we're a little more familiar with the Vue Library and some of the benefits it provides us with, let's get started creating the view front-end for our full stack project. All right, now the first thing we'll need to do here is install something called the Vue CLI. And what you're going to want to do there is open up a terminal, and you can do that by pressing Control J or Command J, depending on your operating system. And inside that terminal, what we're going to want to do is globally install the Vue CLI package by saying npm install dash g and then the package name is @vue/cli. Now if you hit Enter, that's going to install that globally for us. And what this is going to allow us to do is create new Vue projects just by running a simple command. So let's wait for this to finish. And once it's done, what we're going to do is create a new Vue project. This is where all of our front end code is going to be, by simply running Vue. Create, and then the name of our project. And since we're going to have both the front-end and back-end here, we'll call this front-end project front dash end. So if we hit Enter, that's going to bring us through a series of prompts asking us what features of Vue we want. The first question here is which version of Vue we want to use. We're going to select Vue three here. And then it's going to ask us which package manager we want to use. And I'm going to select NPM here, but Yarn is perfectly fine to use as well if you want to use that instead. So I'm going to use NPM and hit Enter. And that will generate a new Vue project for us. So this is going to take a minute or two but once it finishes, we should see that we now have this front-end folder over here in our file tree. And if you open that up, you can see that it has a lot of files in here, as well as some other directories. And we'll be discussing the actual structure of this and what all these files are very shortly. But for now, just know that that is our front-end project. So, the first thing that we're going to want to do now that we have this new project is run it, just to make sure everything is working on our end. And the way that we're going to do that is we're going to start off by changing directories into that new front-end directory. And you can do that in your terminal by typing CD front dash end. That'll bring us into the front-end folder here. And you can see all the contents of this folder just by typing ls by the way. And you can see everything that we see inside of here, printed out in our console. And in order to run a Vue project, what we're going to want to do is reuse the command npm run serve and hit Enter. And what that's going to do is it's going to build our project, and it's going to serve it on a development server so that we can see it in a browser. All right? Now what you'll see printed out here is that it says that our app is running on http local host 80 80. However, this is only if you are running it locally on your own computer. If you're using Code Spaces, what you're going to need to do is go to the Ports tab, right? This basically maps all of the ports that are running in Code Spaces to an actual URL you can visit. And you're going to want to take a look at this local address property of Port 80 80. And if you go over to this little world icon next to that and click on it, what that's going to do is it's going to open that up in a browser. And sure enough, we see the Vue app we just created running in our browser. And here, let me just take that out of full screen so you can see this is in fact running in our browser. And now if we go back to our project what we should be able to do is make changes to our code. And you can do this just by going to front-end. And if we go to say the source folder and open up app dot vue, we'll talk in more detail about what all of these are by the way, shortly. What you should be able to do is make a few changes, right? So for example we have this Image alt Vue logo thing, that is the logo that we were seeing on our site. What we can actually do is just delete everything inside these template tags and replace them with whatever we want. I'm just going to use an h1 heading and we'll say something like, hello from Vue! And if we close out the tag, you'll notice that this actually doesn't work, right? If you save this and try and reload the page chances are you'll see an error and you will see an error in the console here as well. And that's just because there are two more changes that we need to make in order for this to work. And we'll take a look at that next.