The reason for that is because we're going to be writing quite a bit of vue code and our component here at the very bottom of the file is going to start getting pretty large. So it's going to be incredibly rare that you would ever have this all in one file, so I think it's good practice to move all of this out right now.

So the way we can do this is if you come to your projects root directory here and you can click on a new file I'm just going to call this app.js you can call it whatever you want. The fact that I have a selector called app is not the reason why we're doing it, it's just to make it nice and easy.

So what I can do is come inside the script, you don't want the actual script tag because thats HTML. I can come here grab all of this

index.html

new Vue({
  el: '#app',
  data: {
    name: 'Kristine'
  }
})

and then paste it in our new app.js and then all I have to do is call this app file. So now instead of having this beginning and closing ending script tag like that, we can just import it. So you can see a script src and then from there say app.js hit save.

index.html

<script src="app.js"></script>

and before we go in we fix our CSS let's just make sure that this is working so you can see that that still is binding the name properly, so all of that is working correctly.

Now let's come and let's add a css file so I'm going to say styles.css and now inside of this index.html file we're going to grab all of our code inside our embedded CSS styles and we're just going to go and grab all of that.

So let's come up here and select it and then come up to just about the very top, cut all of that out. It looks like I also got the ending style tag there to, so I need to get rid of that. Let's hit save and so that looks like it's working. Now we just need to go and I'm going to pull in the styles, so I'm gonna say link and then, and oop I got a little bit aggressive on that delete.

So here's our link tag and we're just going to say styles.css hit save.

index.html

<link href="styles.css" rel="stylesheet">

Now if I switch back you can see we still have all of our styles so everything is working properly.

But if you look on the right-hand side you can see that we have knocked out and rearranged about half of the code, so that's going to make it much easier.

Now one question before we get back into the vue code is that you may be wondering why I put the script tag all the way down here at the bottom? Well, the reason for that is because our vue code needs to be able to make sure that all of the HTML is rendered.

So imagine a scenario where our helpful little app element here had not loaded but then the vue.js code went to the DOM and it looked for an ID with app. If that had not loaded yet then we would have a little bug, none of our vue code would be bound and this component wouldn't be bound to the dom and so because of that it would be of no use to us.

So the best practice is to have that JavaScript call all the way at the bottom. And in addition to that, you need to make sure that your vue library is also called before the custom vue code you write because if you try to say new vue the only way that the system knows how to do that is because it has access to this file.

So that's the reason why I arranged it the way I did. So now that we have our code file and our project cleaned up we can get going on learning about vue.

Resources

• Source Code