- [Instructor] Modern web development takes a bit of setup.
So let's talk about the requirements
that you'll need to have to get this project working.
Now first, you're going to need to
install and download Node.js.
You can get to this at this URL.
This is the engine that is going to
run all of our automation.
The next thing you'll need is to install Git,
which you can get at this URL.
Now this is used to manage your project,
so we'll need to make sure we have that,
and if you're on a PC, part of the installation will
allow you to install something called Git Bash,
that's going to let you run Linux style commands,
that I'll be using on this course.
Now whenever you're working with Vue.js,
there is a special extension
that's available for Google Chrome,
it's going to make development a lot better,
so here's where you can get that.
Also if you're using Visual Studio code,
there's an extension called Vetur,
that makes development easier.
Finally, you're going to need to install the Vue CLI.
It's the command line interface
that makes it easy to setup Vue.js projects.
Now you can do that from any terminal application
on a PC you can use Git Bash,
and we're going to run some of these commands right here
in order to get things going.
So first we're going to install the CLI
using this command on a terminal,
and then I usually like to put things on the desktop
so we can CD to the desktop like this,
and finally we'll need to create an application
by using the Vue create command
and then give it a name of the project that we want to use.
Now if you're on a PC, in order to do this with Git Bash,
you'll need to run this command slightly differently,
so you'll need to run this winpty Vue command,
and then the rest of it is the same,
create vue-spas for single page application.
So let's go ahead and take care of that.
I'm going to use an application called Hyper,
but you can use the MacOS terminal if you don't have that,
and first I'll start by going to the desktop,
that's where I like to put things,
but you can put them wherever you want,
if you want your project to be somewhere else.
And then I'm going to say the Vue create,
and put in vue-spas.
Now again if you're on a PC,
you want to use the other command,
which is winpty vue.cmd, and then create vue.sps as well.
So I'm going to hit return,
and you're going to go through a series
of installation questions here.
Now I'll choose manually select features in here,
because I want to customize what I am installing.
And so from here,
what you're going to do is pick some additional pieces
of vue.js that we want to have in here.
I'm going to add the router,
which I'm going to need for this project,
and I'm going to add CSS pre processors.
You're going to see why later, but I'm going to use the
SAS version of Bootstrap for this project.
So to activate one of these,
I'm hitting the space bar after hitting
the up and down arrow keys to get to the selection.
So I'm going to hit return now that I have everything selected,
because we're using the router,
it wants to know if we want history mode for router.
You do have to have proper setup in your server,
so I don't want to assume that you have that,
so I'm going to hit no right here,
and then here it's going to ask you
how do you want to process things?
I'm going to choose node-sass
because I'm a little more familiar with it,
but you can choose whichever one of these you like.
Next you can pick a linter which will check your code
for potential errors and it can also help you
standardize the way that things are broken down,
how many characters are in a line.
I like to use the combination of ESLint and Prettier,
you can choose whatever you like in here as well.
Here's a couple of options for linting
I'm just going to leave it at the first one, lint on save,
and then where do you prefer placing config files?
This is up to you.
It doesn't really matter.
I'll make my files be a little shorter
by putting everything in my package.json file.
And finally it's going to ask
if you want to save this as a preset.
If you think that you're going to use this in the future,
you can put yes.
I'm going to put no.
And then hit return.
This is going to take a while to install the project,
now this installation is the perfect time
to go have a cup of coffee or your favorite beverage.
Once it's done, you want to go ahead
and CD to the vue-spas folder,
and if you want to you can run the NPN run serv command.
We're not going to do that quite yet,
I want to do one more modification to my files,
so I'm going to open this up in an editor,
and I want to go into this file called Git ignore,
and add a line right here.
Now the Git ignore file tells Git to ignore certain files.
So it's not going to upload certain things.
Now it's always nice to get this Git ignore file
straightened out at the beginning of a project,
so I'm going to add a line right here,
it's going to say src/db.js.
And this is going to be a file
that I'm going to use for firebase when I install it,
but I'm getting it out of the way right now
because again, it's a little bit better to do Git ignore
when you set up the project.
I'm going to save that,
and that's all we need to do for right now,
like any web project, setting up Vue.js takes a bit of time,
and there's quite a few installations.
But getting things just how you like them
will make your life a lot easier when you get the coding.