- [Narrator] In this video we are going to create our
first vue instance to confirm that everything is working
properly.
We need a little bit of html bar from the mock-up and
a little bit of java script to do this.
So once again, here's my index.html where all the stuff
is going to go.
Of course we have nothing.
So what I'm going to do is borrow a little mark-up from
the mock-up.
So we can use our original styles as much as possible
without having to alter anything to make it look right.
So over here in my editor, visual studio code,
going to open up my mock-up file and I'm going to use the
"go to line" command, which is ctrl + g by default.
And I'm going to jump down to line 114.
I just happen to know that that's where I need to go.
And I've inserted a little spot here where the vue
components will go.
Note that this is a div with the id "vue-root".
But the mock-up itself, all the static html is in a div
with the class customizer. So we'll just remember that
and go over to our index.html file.
I'm going to jump down to the same line with ctrl + g
for "go to line".
So my vue components are going to go in here.
I'm going to open up this tag and I'm going to create that
div that has the customizer class.
So in visual studio code, I can just type the class
and then hit tab, and the built-in emit tool can expand that
out for me into a nice div.
Inside this I'm going to just add a little template slot for
a message.
The way we do this in view is with mustache-style double
curly braces like this and I'm going to call it message.
Maybe just with two s's.
Okay, I can save that and let's reload just to see
what happens.
Here's my index.html, I will reload that and you can see
all I get is just the double curly braces and message here.
It's just literally putting what I have in the page back
out to me. Because I haven't done any vue stuff yet.
So let's open app.js our entry point; all the main
java script files we'll be writing in this course will have
one of these immediately invoked function
expressions to keep everything that we're doing out of the
global name space and I've made sure to enable strict mode
as we always should to avoid creating accidental global
variables and whatnot.
Now we'll get rid of this comment and we'll actually create
our vue instance.
So the way we do this is with new vue.
Passing it a configuration object.
So this is just blank right now and I'm going to assign this
to a variable. We'll call it product customizer.
So this configuration object is going to need at least one key.
Which is where on the page to place this vue instance.
That key is "el" for element.
We're going to use vue-root, selected by an I-d.
The other thing that I'm going to need to pass is data.
This is also going to be an object.
And what I called this was message; so I'll copy that,
paste it in over here, and we'll say
"product customizer will go here".
And now I can save this and switch back to the browser
and try it out.
So if I reload, I get my message here,
my vue dev tools have lit up green.
So now I know that it's working.
And if I open the dev tools with command, option, I,
and try the view tab here, I can see that I have my root
component, which is my view instance.
And here's my data, which is the message
"product customizer will go here".
Great, so everything is working now and we can proceed with
building something real.