- [Instructor] Whether you're starting a new project
or you have an existing project
that you're considering using Vue for,
getting set up is simple.
At the time I'm recording this course,
the Get Started button on the vuejs.org homepage
still points to the version 2 guide.
So instead, we'll click up here to get
to the version 3 guide and then click Get Started.
So, if I click this Installation button here
I'm presented with several different ways to get set up.
The first, Import from a CDN, really just means
adding a script tag to an HTML page.
And I could do that with the CDN URL,
or I could download it and host the script locally.
If you're familiar with the command line package manager,
NPM then you probably know that most JavaScript libraries
and frameworks that are still used today
are available as downloadable packages
that can be automatically installed with those tools.
Vue CLI, or command line interface,
is just a more sophisticated way
of installing Vue with a package manager
along with some other useful development tools
and some skeleton code to help you get started.
To keep things simple for now, we'll grab the URL
from the CDN page, but instead of using this script tag
I'm going to copy this URL and then use the URL
of the specific version that that redirects to.
So, in case, you are following along, you can ensure
that you're using the same version
that I'm using in the video, which is 3.0.7.
In the exercise files for this video you'll find index.hmtl.
This will be the starting point for our example project,
which will be a flashcard app.
This page pulls in a style sheet and a data file,
none of which is specific to vue.js.
The CSS just helps us see what's changing
a little bit better as we build
out the app and makes it a little prettier.
So don't worry about its content.
And the data file just contains an array
of JavaScript objects that represent flashcards,
each with a front and a back property.
So, the front is the name of an item,
or a concept and the back is its description,
sort of like questions and answers.
So, we'll add the script tag down here under the data file.
And then, in the next video, we'll talk
about how Vue can manage this section
of the document, this div, to dynamically render it
using some of the flashcard attributes from our data file.