Preview
Video Player
00:00
00:00
Add Vue to a Project
2:17Learn the different ways you can add and use Vue.js in a coding project.
The first thing we'll need to
do is add VUE to our project.
0:00
To follow along with me, download the
project files from the link on this page
0:03
and open them in your
preferred text editor.
0:07
I'm going to use Visual Studio code, but
Atom is another free and popular choice.
0:09
I've included links to both
in the teacher's notes.
0:14
Let's start by googling vuejs docs
to find the Vue.js documentation.
0:17
You can also go directly to vuejs.org.
0:23
Your search may look a little different,
but
0:27
one of the first hits should
be the documentation.
0:29
Click the link.
0:31
Make sure on the left side that
you're looking at the guide for
0:33
the most recent version of Vue.
0:36
For this course, I'll be using Version 2.
0:39
In the left menu, I'll choose Installation
to view the installation instructions.
0:41
Especially when you're
newer to programming,
0:47
docs can often seem jargony and
inaccessible.
0:49
Vue's docs, however,
are pretty awesome and easy to read.
0:52
Using docs becomes easier with time and
0:56
practice, it's pretty
much a skill in itself.
0:58
So I encourage you to
refer to them frequently.
1:00
As you can see, there are a few different
ways to introduce Vue to a project.
1:03
One fairly straightforward way
is to download the Vue file and
1:07
include it with your scripts as you
would any other JavaScript file.
1:10
For larger-scale apps that
require more complex scaffolding,
1:13
Vue has a CLI, or command line interface.
1:18
This basically means you can run a command
from the command line and the files and
1:22
folders you need are automatically
created for you.
1:25
Right now, we'll use perhaps the fastest
and easiest way to get up and
1:28
running with Vue, a CDN, or
content delivery network.
1:31
This means that the Vue file is
hosted by a third-party service,
1:35
which we can link to in our
project using the provided URL.
1:39
At the bottom of the index.html in
the project files, I've already included
1:43
a link to the version of Vue
that we'll use in this course.
1:47
Future versions of Vue might introduce
breaking changes, so if you plan to code
1:51
along with me, it's important to use
the same version of Vue that I'm using.
1:55
Beneath the CDN link,
let's link up to this app.js file
2:00
And that's it,
we're ready to use Vue in our project.
2:13