- [Instructor] Let's work on installing
a more realistic application in this chapter.
So to do that, we're going to want to look at a few things.
First of all, we want to add routing
so that we can have what's called a single page application,
it's really more a single page
that behaves as if it had several pages.
Next, I'd probably want to add some additional modules,
you never really work with the standard modules that
get installed with abuse, WCLI.
So I'll show you how to do that in this chapter.
And then in addition to that,
we may want to add some pre-processors,
I really enjoy using Sass,
especially with bootstrap, because it was built with Sass,
and adding it would give you some additional features.
Now, I also want to make sure
that I have the best tooling available for vue,
which means things like setting up the prettier module
to more consistently format my code,
and making sure my editor was ready to use vue JS.
They may also want to install unit and end to end testing.
But those are advanced features
that I'm not going to cover in this course.
So let's go ahead and use the cli.
So I'm going to use hyper once again.
I'll make sure I'm in the desktop once again,
you're probably there already
if you've been following along,
but always good to be there.
And then I'm going to issue a vue create.
I'll call this one vue-shop.
It's going to ask me the same question.
So I want to go manually select features,
I'm going to add the router,
as well as CSS pre-processors.
Now in here, I want to make sure that I choose vue3.
And I don't want history mode.
And I'm going to choose Sass and SCSS with dart-sass.
And finally, I'll use ESLint and Prettier.
As the linter/formatter.
I do want to lint on save.
So I'll choose that one.
And I'll keep it in dedicated config files
for this project.
Now, I don't want to save this
because I'm always doing these courses.
But you may want to save the sort of presets
that you like here,
because it's convenient to come back to those.
All right my installation is done.
So I'm going to get out of the installer.
And I want to show you also want to install some tools
in order to work with vue applications,
you're going to want to install
at least the Chrome Developer Tools extension.
I'm using Google Chrome,
or a Google Chrome browser for my project.
So you can find that at this URL.
So make sure you click on
this add to chrome to add the extension.
You also want to install some additional
Visual Studio Code extensions.
And the ones that you want are called Vetur,
which offers special features
to make developing with Vue JS a lot easier,
you can find that at this URL, also prettier,
which is the companion to the tool that we installed,
as well as ESLint.
So make sure you can install those
by going either to the marketplace.
And these are the links to the marketplace,
or you can install them directly
from your Visual Studio code editor.
Now for linting, we're going to be using eslint,
and I'm going to modify some of the configuration files
to make sure that it's a little bit easier to work with.
Now here are the changes that I'm making
from the default installation.
Now you'll see first that I use no multiple spaces.'
This is nice because it deletes anytime you add
too many spaces on your code,
sometimes I tend to hit like space a couple of times,
and it just cleans everything up
and keeps the space inconsistent.
The next one is vue/no-multiple-template-route.
And in vue2, you have to have a single dev
or a single container inside your templates.
That's no longer the case in vue3.
So we're making sure that we turn that off
for our projects.
Now the next two,
I would probably leave out in most projects.
But because of the way that I'm doing this course,
sometimes I set things up in one video
that I don't complete until the next
and this will give you a cleaner experience.
However, on a real project,
you may want to leave these out of this file.
So I'm going to copy these.
And I'm going to switch over to my project
which are open in Visual Studio code.
So I'm going to open this.eslintrc file,
and in this rules section,
I'm going to paste those additional rules.
And let's go ahead and save that.
Now I also want to modify the formatting settings
and to do that I'm going to need to create
a prettierrc file
so it's actually a period prettierrc yes, there are two r's
and I want to add these features.
Now for our formatting tabwidth is going to be set
to two spaces.
This is going to make it easier
to see more code on these videos.
Since I work with a limited screen width,
you may want to switch that to four spaces or four tabs
to make sure that it's a little more readable.
Now I do like single quotes instead of double quotes,
especially in JavaScript,
because it's easier to put double quotes
inside single quotes if you do need them.
This arrow parents is a nice way
of cleaning up your code by removing parentheses
when your arrow functions don't need them.
The next one is a little bit controversial.
I'm getting rid of any extraneous semi colons,
this is a pretty nice setting,
because it'll automatically get rid of semi colons
that it doesn't need.
So if you're sort of used to using semi colons,
you can not use that.
And then there is the trailing comma option.
So the same thing for the trailing comma,
if you don't need it,
it's just going to go ahead and take it out for you.
So for example,
if we actually put an extra comma here at the end,
I'm just asking it to get rid of it,
session JSON documents.
And the last one is bracket spacing,
you can make your curly braces and brackets
a little bit shorter with this setting.
So this one I'm going to have to create
because it isn't in my project,
going to copy that from here.
And remember that you can find the URL for the slides
at the beginning of these videos.
And then I'm going to come in here
and create a .prettierrc
And I'll paste that in there.
Now finally,
you want to modify your Visual Studio Code settings.
And this is just going to make sure that Visual Studio code
is going to work well with some of the other extensions
that you add it.
So here's the settings that I would use for that
here your just telling it that
you want to validate files
that are JavaScript files,
HTML files and vue files.
Notice there's no JavaScript.
And that's because the way that vue works,
you actually insert your CSS in the same file,
that is your vue component,
then you want to set up some options
for automatically reformatting,
whenever you save, you want to make sure that
you check against the vetur.validation.template.
So it's going to check the code that you're writing
to make sure that it is valid Vue JS code.
And so it's going to look at a template that it has.
And the last one, just make sure that your editors
eslint is also fixing and saving things
whenever you hit the save button.
So this one goes into a that vscode file,
and then it's going to be called setting.json,
there's actually a way of creating these,
you can either go to your settings,
so preferences settings on a Mac,
I think it might be under File on a PC,
but you could also just create it.
So I'm going to make a folder here,
the folder is going to be called vscode.
And then in here, I'll create a file.
And this file is going to be called settings.json.
And I'm going to paste those items right there.
And you want to also make sure
that you've installed the extensions.
So let's go ahead
and make sure that we are in the extensions,
and we're going to look for Vetur.
So that one looks like it's installed ESlint also.
And that one also looks like it's installed
but not enabled so let's go ahead and enable this one.
And then finally,
we'll make sure that prettier is installed as well.
So it looks like this one is already installed and working,
you may want to do this for your own machine.
Finally, I'm going to go back to the Explorer.
And I want to make sure that I modify my Git ignore file.
That's because as you can see the VS code folder
and the node module folders are both grayed out.
That means that they're not going to publish on GitHub.
And this one, I actually want to publish on GitHub.
So that it shares my setting files with you or anybody
that gets the project.
And that's a good way of sharing settings,
as long as a group of people
are working on the same project.
So I'm going to make sure that I do that.
And that's pretty much all you need
to make sure that your project
is working exactly how I'm working with it on this course.