- [Instructor] Most modern JavaScript frameworks
assume that you're using certain tools
along with them.
Vue has pretty minimal requirements
in this regard,
and you don't really need much for this course.
But I want you to know what's available,
and the pieces that we'll actually need and use.
So first off,
Vue requires ECMAScript 5,
which is the version of JavaScript
that pretty much every browser supports
out of the box,
certainly since 2012 or so.
If you know and are comfortable with ES6,
of course that's fine,
but you don't need it.
And the example code in Vue's documentation
doesn't use it.
This is one of the areas where I think
that Vue is very approachable for people
who are new to JavaScript frameworks.
Vue's templates are written in HTML,
with custom attributes
to add on special behaviors,
but still it's just HTML.
To start out,
you write them as strings of HTML
in your JavaScript files,
or as regular tags in your HTML files,
depending on how you want to use them.
Strings of HTML in your JavaScript
can get a little tedious to manage
when they get long,
but working this way does mean
that you can avoid any build steps,
and they work fine for small or medium projects.
So that's what we'll be doing in this course.
To install Vue,
or indeed any JavaScript tool,
you'll almost certainly be using Yarn or npm,
the two popular JavaScript package managers
or dependency managers.
I use both,
usually going with Yarn when it's up to me.
Dependency management means
that these tools handle downloading
and installing whatever is needed
by the thing you want to use,
so they can run properly.
With Vue there are no extra dependencies needed
just to use it.
If you wanted to contribute code on GitHub,
of course there are a lot of extras.
But these tools give you
a command line interface,
letting you install it for your project
in one step.
Installing with npm or Yarn also gives you
a package.json file,
which tracks what you've installed,
what versions and so forth.
Many text editors and IDEs can read
those package.json files
to discover what you're using
and help make writing code easier.
Vue is also quite easily installed
with a script tag using a CDN,
the same way you might install
something like jQuery.
In this course,
we'll install with a script tag
and use a copy I've pre-installed
using Yarn as a fallback
when you're working offline.
The Yarn installed files are
in the node_modules folder,
including the Yarn.lock file that goes with it,
for those of you who've used Yarn before.
As you get more advanced in your use of Vue,
you'll probably end up building
single-file components that can encapsulate
the HTML, JavaScript,
and CSS needed to make a component work.
These are really convenient to write
when you're creating lots of components,
but they use a custom format
that has to be pre-processed
before a browser can consume them.
The Vue project offers a command line utility
called Vue CLI for doing that work,
and for doing a lot of other useful stuff with Vue.
It includes webpack,
the JavaScript bundling tool
that's quite popular,
but a little tricky to configure pre-configured,
to handle Vue components.
You can also create a project
that has a nice layout of files and components
to get started building serious Vue apps,
and there are a lot of plug-ins available
to make things like unit testing easier as well.
If you're coming to Vue after trying REACT,
this is a lot like Create React App,
but set up in a way that you should never need
to eject your project.
The tool is entirely optional,
and you won't use it in this course,
but you can find out more about it
at 'cli.vuejs.org'.
The main take-away from this section
other than introducing these tools to you,
if you're not aware of them already is this:
Vue doesn't need much,
and we can start out with nothing
but a script tag.
As your needs grow,
or if you're just curious,
there are tools available to help you.