- [Instructor] In this video we're going to install Vue
on an existing site and create our first instance.
Here's a product page from H+ Sports,
one of the fictitious brands we use in courses.
This page features some sneakers
and we're going to use Vue to build
a simple interactive customizer
where you can choose size and color
and see the product image change.
This is the mockup, let's look
at the actual starting point, which is index.html.
Here it is with all the stuff stripped out.
So what we need to do first is get Vue running
on this page and just make sure that it works.
Over here in my code editor,
I'm going to put the Vue script tag
at the bottom of the page.
So we're going to use command, down arrow,
to jump all the way down to the bottom
where all the script tags should go.
Then we're going to use the scripts-snoppet.html file
that I've included with the exercise files
to save us a little effort.
Going to select everything that's in here,
with command-A, and I'll copy,
and paste this in just above my app.js script tag
which is our entry point for our Vue stuff.
So what have here is the script tag
that comes right out of the Vue documentation.
This is the developer build,
which includes nice console messages and what not,
and then after that, I have another script tag
which checks to see if we were actually able
to load Vue this way by checking
for Vue on the window object.
If it's not there, I use document.write
to add another script tag to include the local copy
which is in the node modules folder.
It's the same version of Vue
and it's also the developer build.
We're using the developer build
so we can get those nice messages and so forth,
but whenever you wrap up a project
and you're going to put it on the internet,
you want to trade out these vue.js tags
right here, with vue.min.js.
It works the same way from the CDN
and I've also included that production version
in the node modules folder for you.
It's smaller, faster to load
and doesn't include any of that error reporting.
There are also a couple of script tags that are similar,
to polyfill some features that you might need at some point.
Vue doesn't require these, I've just included them for you
just in case you run into issues running
these projects in older browsers.
But again, I don't really expect that.
So now that we've seen all these script tags and what not,
let's load up a browser and make sure
that Vue actually loaded properly.
Over here in Firefox I'm going to reload this page.
My little Vue indicator hasn't lit up yet
but if I open up the dev tools,
and check my console, I can see here it says
you're running Vue in development mode.
So I'm getting the console messages
that I expect when Vue is running
and when I love the Vue dev tools.
It's detected the version and says that it's ready.
So the only reason this is not showing up green yet,
is because I haven't created any components.
We'll be doing that, coming next.