Now, the very first thing we're going to do in this guide, is we're going to make sure that you have all of the correct dependencies installed on your system, and then we're going to generate the application. So to first make sure that you have the right dependencies installed, the two items that you're going to need are going to be Node and NPM.

And the way you can test to make sure that you have the correct dependencies is just by saying, node -v, and we're here in the terminal. So if you're working in either Linux or the Mac environment, then you can just open up your terminal application and start typing. If you are on windows, then you would open up either the command prompt, or powershell.

And so I'm going to type node -v, it's telling me I'm at version 9.7. If I say npm -v, it's going to tell me I am at version 6.41. Now it does not matter if you have a slightly different version, this is just a very quick way to make sure that you have Node and NPM installed on your system. If you did not have it installed, you'd get an error right there, and then you would just need to go and install them.

So now that we know that we have those correctly placed in, let's go back into the browser. And I'm going to provide a link to the Vue CLI package repository. This has all of the various instructions you'll need in order to install the CLI, and we're also going to walk through it.

Now, if you just typed in Vue JS into Google, then you'd be taken to this page right here.

This is the full Vue JS website, it's located at vuejs.org. And this is not where you'd want to go to build out the type of application we're going to build, we are going to build an application with the CLI. Now if you've never heard of what a CLI is, or you've never worked with a CLI based app, what it stands for is the Command Line Interface.

I know that may sound a little bit like a scary word if you've never used it before, but it's really not. All it means is that we have the ability, using the CLI tool to type commands into the terminal and have that perform work for us, that's really all it means when we're using the CLI.

If we were not doing that, we'd have to manually create the entire application, completely from scratch, and it would just take a little while longer, but it's perfectly fine if you wanted to do that. I'm not going to, because I want to use all these base settings that it provides and it's recommended from the Vue team that you do as well.

So the way that we're going to install this, is you scroll down right here and click on get started. Then there are a few different options. If you scroll down this has all kinds of helpful documentation, its got some explanations, it talks about their plugins and different things like that. But if you come over here, and click on installation on the left hand side, then you're going to see the full set of commands we're going to need to install this.

Now if you have NPM installed like we already tested, you can just copy this command here.

npm install -g @vue/cli

And if you have Yarn, then you can do this.

yarn global add @vue/cli

There's no difference whatsoever, I'm going to be using NPM throughout this entire course. So if you're following along, you might want to as well.

Now I'm going to switch back into the terminal. Now, you could just run this command right here, and we're going to walk through it just to make sure you realize what's going on. But also, you may have to type sudo in front of this.

sudo npm install -g @vue/cli

And what sudo means if you've never used it before, and this is only for Mac and for Linux, you would not need to do this on Windows. But what sudo says, is that we're wanting to run as the root user. So sometimes when you're installing a package from the outside world, from the NPM registry, and you're installing that on your local machine, sometimes Mac and Linux requires you to declare that you are the admin for the computer.

Because you wouldn't want to have just some random user installing packages on your system. So, if you get an error then you can add the sudo command there, which means you're going to have to type your password in.

So let's walk through what this command does. NPM, we've already walked through, stands for the Node Package Manager. But let's also take a look really quick, if you type NPM and then registry into Google, then you're going to be able to see right here what NPM actually is, it's the JavaScript package registry. And it has a full library of packages, it has probably tens of thousands if not more packages.

So if you want to even type in Vue CLI then you're going to see that the package that we're installing is just a regular NPM package. It's a set of JavaScript libraries, JavaScript code, that we want to run on our system. And we're not going to run this exact one, because this looks like it's an older version.

But if you do Vue/CLI this is going to be what we are going to be bringing in. This says exactly what it is, it's a command line interface for rapid Vue JS development. And it shows the weekly downloads, and also gives the commands and links to the documentation.

So when we say NPM, all we're saying is we want to run a command and install a package on our system. So I'm saying npm install, and then we already saw this name, this is the package name. But what does this -g represent? Well, it stands for Global. So whenever we're installing a package in a project, we wouldn't say -g, we would say --save. And that means that we're wanting to take the package from the registry, and we just want to slide it into our project so we can use it.

For the CLI though, we need this installed in the core of our system so that we can call it from anywhere. So that we can build a new project, so that is all that that means. Now if you hit return here, it's going to ask you for your password if you ran it with sudo, so type that in. Then it's going to go out to the NPM registry, we are going to be one of these 43,884 weekly downloads. So it's going to go grab that and install it on your system.

I'm going to pause the video, and we'll fast forward, and I'll come back when it's installed. And we're back, and you can see that it installed the Vue CLI with the version 3.04.

Once again, if you have a slightly different version, that's perfectly fine. Now in order to see exactly how we can build this project, I want to first make sure that you are in the correct directory that you want to install the project.

So I have this code directory here that has all of the projects that I work on, so make sure that you change into whatever directory that you want to be in. If you are relatively new to the command line, and you want put it in your desktop, than you can say cd, give the little tilde(~) slash desktop and then you would switch to your desktop.

But I want to be in the code directory. So I'm going to say cd code, and this is going to take me back where I was before. Now your terminal may look a little bit different, it's because I use what is called the ZSH terminal. And by default Mac provides the BASH terminal. It's completely identical from the perspective of what we're going to be doing. We're not going to do a lot of work in the terminal in this course.

But I do get asked that question quite a bit on why this looks different than what may ship out with Linux or Mac. So now that we have that, let's see how we can install the project. So this is going to be the generator, I'm going to type vue create, and I could just give the name of the project, but that wouldn't be fun, and I wouldn't be doing my job as a teacher if I just had you follow commands without also giving you guidance on what they're doing.

So this is going to build a Vue project, but you may also in the future have to add some additional configuration options. And in order to see what those are, you can say vue create --help. And this is going to give you all of the various extra options that you can pass into that generator command.

So here you can see that it gives you some instructions, so it says create and then options, and then app name. So kind of like how we passed in that -g option into our NPM installation, we could do the same thing here. Now we're not going to have to do this for our own project, but you may have to have a situation for example, where you don't want to use Git, or where you want to clone something, or where you have anything like that. If you maybe have some presets, then you could go and you could skip this process. But that gets a little bit more advanced, so we're not going to go into that now.

So I'm just going to type vue create, and then give it the name of the project. So I'm going to call it the devcamp-devworkflow application. Now once I hit return, this is going to start asking me some questions, this is where the CLI is really cool, because it is almost like your little application assistant. And it is going to start asking us some questions, then it's going to build the app based on our answers.

Now when you're navigating and selecting your options, you want to use the arrow keys for moving up and down. So the very first question asks, please pick a preset?

Now if you want to select on of the items, you just press the return or enter key. But I don't want to go with the default, I want to manually select the features. So I'm going to hit return, and now it gives me some other more detailed options.

It asks if I want to use babble, and I do want to use babble, so I'm going to keep that selected. If you want to unselect something, such as I do not want to use a linter. Just navigate down there and press the space bar. And it's going to unselect that.

So we're going to use for this project, we're going to use babble, we're going to use the router, Vue X, CSS pre-processors, and we're going to talk about what each one of these are and we're going to be using them extensively through this course. So don't worry I'm not just going to go through here and not explain what these are. I'm just walking through what the instructions are.

We're not going to select any of these other items. So after you're done with that, press return and it's going to ask, do we want to use the history mode for router? Now this is kind of an advanced question for the very beginning of the application to be built. Let's just put yes, so just type a Y there, and then once the application is built in one of the later guides, I'm going to show you what this actually means.

So we'll say yes, and it says pick your CSS pre-processor. Now I use Sass for pretty much all the projects I build, so I'm going to select that one, but you could use Less or Stylus if you're familiar with those. And so I'm going to press return and it says where do you prefer placing your configurations for babble, PostCSS, et cetera?

Now you could put these all in a single file, but I wouldn't recommend that. I personally like to have all of my code separated as much as possible whenever I can. So the reason why I want to do that is because this allows me to just know exactly where a certain set of configuration options are. And you're going to notice that this isn't something that only is in reference to these configuration files.

Throughout this entire course I'm going to be showing you how we can break our files into smaller and smaller pieces to make the code be more organized. That's definitely a best practice when it comes to any kind of development. So I'm going to say in dedicated config files, hit return.

Then it says do you want to save this as a preset for future projects? I don't want to do that but if you're building a bunch of Vue projects then you might want to so you don't have to go through these questions each time. So I'm going to say N for no, hit return, and it's going to build it. I'm going to pause the video and fast forward while it's generating the project and we'll come back when it's done.

Okay, if you didn't get any errors, that means that everything worked and we can start testing this out to make sure that it's working. Now it gives us some instructions right here at the very bottom. So this tells us to change into the directory and then this is the command that will run the server.

So I'm going to say cd devcamp-devworkflow, and then from there I can say npm run serve. So what this is going to do now is it's going to take the entire application that was generated and it is going to compile it, put it together, and then it's going to start up a local server so that we can go access it in the browser. So you can watch as it's going through and then once it's done it will tell you that it compiled successfully.

Let me move this down just a little bit so you can see this. And so this is telling us it compiled successfully. And it also is telling us where we can go and access it, so you can go in your browser to localhost:8080. So let's switch back here, open up localhost:8080, and there you go, that is our application.

Now it gives us a little starter code and we'll walk through it in the next few guides. But you can see it even gives us things like routing. And if you scroll down it shows some of the plugins that were installed like babble and some other documentation links. So I definitely recommend for you to be able to go through there, explore the documentation a little bit and then in the few guides we're going to walk through what this built for us.