- [Instructor] Lets take a look at what we get when
we install a project with the View CLI.
So here I have a browser on the right hand side.
And my project open in Visual Studio Code.
And thankfully it has a built in terminal
so we can go here to the terminal menu
and select new terminal.
You can use a separate terminal if you want.
I'm going to issue an npm run serve command
just to see the preview of the application
running in this browser right here.
Now that its done I can hold down the alt key
and it'll open up this preview right here on a tab.
So now I can close the panel.
That command will still be running.
And as you can see the read me file
has all the different commands that you can run.
We've already run the npm run serve command
which is what allows us to see a
preview of the application here.
But you can also run a build command
by using npm run build.
That's going to prepare the project for your server.
So its going to compress all the files
minimize everything and create a separate folder for you.
And that's the folder that you would use in your server.
Now you can also if you've installed any tests
run the npm run test or npm run lint.
We didn't do any of those.
And it has a link to where you
can find more options in the reference.
So in addition to that with any npm projects
you get this nice package that Jason file.
Which has different options for the project.
Heres the different commands that we're actually
able to run here.
The npm run serve actually executes something called
vue cli service.
And then a serve command and these other commands
actually also do something with that service.
So this is actually referring to a module
that's been installed in the view modules folder.
So if you scroll down here you can see that
we have an at view installation.
And in there you have several things.
Including the View CLI service, right here.
A lot of the magic that you're seeing when
you run these commands is happening inside that project.
So its dependencies you can see that this project
of course requires View itself as well as a number
of sub plugins.
And later on ill show you how to install
additional plugins and other libraries that you might want.
And we'll do that with the regular npm install commands.
In addition to that you'll see some places where you can
configure your options a bit further.
Depending on how you installed View JS with the cli
you'll see different things here.
But this is where you can configure ES Lint
which is a linter.
A linter gives your editor a way of
checking for errors and then giving you feedback,
depending on what you have there.
So you can see also that you can set up
options for POSS CSS if you're using that
to prefix your application.
And then there's an option here for determining
how far back it should be writing some of the code for you.
And here we're saying that we want to be compatible
with the latest browsers.
So that's the package that Jason file
which is always really important.
In addition to that we get this package lock that Jason.
Which is a more detailed version of the package that
will Jason.
That has a list of everything in the nod modules folder.
And which versions of the project you're using.
Here is a babel config file.
Which again babel is the part of the modules
that are converting any sort of code that you write
in View JS.
So that its more compatible with
older versions of your browsers.
You can configure any options for babel here.
Then we have our typical gitignore file.
Which just shows you the things that are not going to be
uploaded to git or that are going to be included
when you upload this somewhere else.
And you can see that its a pretty typical
gitignore file this project does have a github repo.
So make sure you take a look at the working with the
exercises to learn more about that.
Here is the source folder which is the most
important folder.
This is where everything is going to happen
and we're going to cover the way that
View JS is going to use what's in this folder to build
your project in future videos.
But just remember that most of the things
that you're going to be doing are going to be
from this folder.
You'll notice that the entry file is going to be
this main dot Jason file.
And then you can see that there is a components sub folder.
This is where you're going to put your sub components.
And the app dot view file is where your main components
are going to sit.
In addition to that there's an assets folder.
This is where you would put any images or any Jason.
That your application actually needs in order to work.
In addition to that there's also a public folder.
This is for things that you don't really need
to do anything in View JS with so you could put
additional images.
Here's your index that HTML file.
So you could sort of put any HTML code that
is not going to be controlled by View JS in here.
There is one tag where your application
is going to load and its this tag right here.
But everything else can be your own code.
So if you were building this as part of some other web page,
you would just put in any scripts you want in here
as well as any CSS.
There's also a favicon which is the icon
that loads up in your tabs right here on a browser.
And you would just put anything else
you want in the public folders.
So that's kind of an overview of the files that
get installed in mostly the default installation.
You did see that when I installed things
I modified some of the basic settings.
So your folder may look a little bit different
if you ran the npm run build command
then you would see an additional folder here as well.
Lets go ahead and talk about how the View JS application
actually loads in the next movie.