- [Illustrator] Okay, So we've got our view project
set up now.
before we get started building our app.
I just want to give you a brief walkthrough
of all of the files that the Vue CLI created for us.
And this will hopefully help orient you a little bit
in navigating the project.
So let's head back over to the IDE and again
I'm using VS code here
and I'm just going to stop our app from running for now
and open up our project in the ID.
That's going to be repos for me
and FSV Front End and we'll open that.
And over to the left here we can see all the files
that the Vue CLI generated for us.
So, first of all, we have this public folder here
which contains the index.HTML file.
This is what the user will be sent directly when they open
up our view site.
And the actual view app that we create will be rendered
in there side of here inside of this div id app here.
And don't worry too much about the actual mechanics
of this behind the scenes.
That's something that the Vue CLI takes care
of behind the scenes for us when we run or build the app.
So let's see, besides the source directory
which we'll get to in a minute
most of what's out here is just configuration files
for various tools that we're using in our Vue projects,
such as for IES Lund and Babble.
And then we have our package.json
and package-lock.json files
and depending on your local NPM configuration
you may or may not have this package lock file.
If you don't, don't worry too much about it.
And then we have our read me file,
which tells us a few of the most important commands
for our Vue project.
So anyway, getting into our source directory here
which is where we're going to be spending most of the time
in this course,
the first thing that we're going to be looking at here
is the main.JS file.
And this is where the magic happens, so to speak.
This is where the call that actually
creates our view instance
and kicks off the process for rendering our app is found
and we won't be making too many changes to this file
in the course, but it's still a good thing to know.
And besides that we have our assets directory
which contains any pictures, SVGs,
or other assets that our app needs.
We'll be putting the pictures of our sites products
in here in a while.
And then we have the components folder
which at the moment just contains this helloworld.vue
example component to show us the basic structure
of what components look like in this setup.
And this is definitely worth taking a look at
since the way that Vue CLI sets up our Vue project
and components is a little different
than what you might be used to.
If your only experience with Vue
is from the introductory tutorials on Vue's website.
So basically the view components
that we're going to be creating in this course
are going to have three main parts which are demonstrated
in this helloworld.vue file.
They're going to have this template part here
which contains the basic HTML structure of our component,
which we can insert data into.
And if you don't know how to do that yet
we'll see exactly how this works very shortly
and later on, we have this script section of our component,
which is where we define the code portion of our components,
such as what data they should display,
what actions they can perform, their life cycle and so on.
We'll see how these things work later on as well.
And it's also where we export our components
so that it can be imported
and used by other Vue components.
And finally, we have the style section
which is where we can add styles for our component.
And one thing to note here is that by default,
the styles we put inside this component
will affect the styling of other components.
That is if we leave this scope thing off
that'll affect the rest of our components
in our application.
However, if we want to restrict the styling
to only the component whose file we define it in,
then we need to add this scoped attribute to the style tag,
and this will prevent the styling from affecting
any other components in our application.
So that's the components folder and the basics
of what our component files will actually look like.
The last file that we're going to look at,
is this app.vue you file here.
The app.vue file contains the app component
which is the sort of root level component
of our view application that will contain
all the other components.
And this component generally contains
the structure that we'll see on all pages
in our applications such as the navigation bar
and the footer.
And we'll see how to do this shortly as well.