- [Instructor] Vue has some of the most
comprehensive tool sets of any library,
so let's take a look at some of the installation options.
First, you're going to need to decide
how you want to set up the project.
Vue is one of the only modern frameworks
that allows you to use it
with a single script tag in your HTML
versus a complex but more app friendly build process.
It's one of the reasons it's called a progressive framework.
If you're just getting started,
it's perfectly fine to use the script tag with this URL.
It's also fine to include Vue like this
in an existing project or HTML page.
Now, if you want to create an app
where Vue is running the whole thing,
then it's best to learn the app build process.
You can install this using the terminal with this command,
but there's a better way.
Vue.js has an official CLI project.
A CLI is a command-line interface,
normally a terminal tool that sets up a process
that helps you build an application.
You can find more information
about the Vue CLI at this URL.
You can install CLI using npm, the Node package manager
that comes when you install Node.js
with a command like this.
If you prefer using the Yarn project,
you can use this command instead.
There are two ways to create a project.
You can use a terminal command,
or use a GUI, or a graphical user interface.
Once you've installed the CLI,
you can create a project using the CLI command vue
and then use the create option
with the name of the project you want to create.
So you would put in here whatever you wanted this to be
and that could be something like awesome-app.
There's also a separate GUI that you can use
by issuing a vue and then a ui command.
Now, the GUI is a nice visual way
to set up your build process.
Before you start with Vue.js,
you want to install the developer tools,
which are available for either Chrome or Firefox.
There's also an Electron tool that helps you
if you want to test the view in mobile platforms,
and you can find the Chrome developer tools at this URL,
the Firefox developer tools here,
and the Electron platform at this URL.
Everyone gets started by using a simple script tag
and eventually grow to try the CLI tools.
In this course, we'll get started with the script tag
and then move on to the CLI in later videos.
Finally, let's take a look at a couple of pages
where I've created samples
of what a Vue.js file should look like.
Let's start with this starter piece of code at this URL.
In this page, you'll see that I've created
a link to Vue.js right here,
and I've added a couple of things
that I'm going to be using in this project.
I've added a copy of the Bootstrap framework on this line
as well as a copy of Font Awesome,
just in case I want to any icons.
In addition to that, I've created a couple
of sections that I'll be updating with code.
First is where the template part of the code will go,
which will be right here.
So we'll inserting things in here.
Usually this div has an id of app,
and then there is a section for you to type in the script.
The script will go in here.
And most of the time you won't see me typing
in the script tags themselves.
I'll just be typing in the code that goes in here.
In addition to that, just to make things nice,
I've created a container class since I'm using Bootstrap
as well as added a little bit
of a margin on the top of the page.
Now let's take a look at a sample code pen
that I'll be using to allow you to get
to these files in a quicker manner.
If you go to this code pen,
you'll notice that there is a single div tag,
and you can't really see the script tag at all.
CodePen automatically inserts that for you.
And so what I'll be doing most of the time is typing
in my template between these two divs,
and then type in any scripts on this JS part
on the right-hand side.
Now, because I think that the default CodePen style is
pretty dark and difficult to look at,
I'm going to log in
and give you a slightly different look to this.
I'm going to change this view
so that it appears on the left side.
We'll have a little bit more room for the page
and our code will appear here at the top and bottom hover.
When you pull this up,
it's going to look a little bit different for you.
If you want to know where all the other code
for this page is, you can go to settings in CodePen,
and if you look at this HTML section,
this is usually where you add additional classes
that you want to be available to the entire page.
And then if you go to the CSS tab here,
you'll see that here's our link to Bootstrap
and also our link to Font Awesome,
and then our link to Vue.js is actually here
in the JS tab on this line right here.
But other than that, the code here is pretty identical
to the starter code that I gave you on GitHub.
Now, this is going to make some
of the exercises and examples a lot easier to work with.