Three Practical Examples to Learn Vue.js

2.2 Single-File Component Structure

In this lesson, we are going to create a Vue CLI project. Now, what this is going to give us is an environment where we can use modern JavaScript syntax and techniques. It will also allow us to almost instantaneously see the changes that we make. So whenever we modify a file and hit Save, we will see that almost immediately in the browser. We will also be able to write single file components, and have them loaded, and compiled, and bundled, and automatically injected into an HTML file so that we don't really have to do any of that. So the first thing that we need to do is set up our computer or our machine so that we can use the Vue CLI, and we need Node.js for that. Now, you may or may not have Node installed. And a way to find out is to go to the command line, type in node --version, and if you do have Node, then it's going to spit out your version. You can see that I'm using 10.13.0. If you don't have Node installed, then you will get a message saying that Node doesn't exist, or so on and so forth. So if you do have Node installed, you need version 8.9 or above. And if you do have version 8.9, I recommend just go ahead and upgrade to version 10 because the developers of the Vue CLI recommend version 10. So just go ahead and install version 10 and you're fine to go. Now, if you don't have Node installed, go to Nodejs.org, download the LTS version. At the time of this recording, it's 10.13.1, but whatever the LTS version is, go ahead and download and install it. Just take the defaults, it is a very straightforward installation. And then once you have that, go back to the command line, and we want to install the Node CLI. So we will do that saying npm install -g, that means that we are going to install something globally. And then we say @vue/cli, hit Enter. And this is going to take a little it, so just sit back, get a cup of coffee or get some water, whatever you want to drink, and let this finish. Once it is installed, we then need to create a project. Now, make sure that your command line is wherever you want it to be, I have mine at the vue-example directory, which is where I want it. And we are going to type vue create, and then name this something. I'm gonna call it vue-list because eventually what we are going to do is create a component for displaying a list of things. So this is going to then ask us several questions, and you may or may not see some of these things on your screen. For example, you won't see this tutsplus or tutsplus-norouter because that was actually from another course. But you will want to go to manually select features. So take that option and then you will scroll down. And where it says Linter and Formatter, just hit spacebar to deselect that, but keep Babel at the top, that's kind of key there, press Enter. And then do we prefer placing our config for Babel and stuff in dedicated config files or package.json? I'm going to go for the second option just because that's going to give us less files in our project. In a real project, I would probably take the dedicated config files because I like having it dedicated in that way. And then do we want to save this as a preset? If you aren't too sure, I'm not. And then this is going to create our project, and once again, this is going to take a few minutes. But once the project is created, we will cd into that directory because that is what the Vue CLI does, it creates a project inside of a directory with the name of the project. And before I run this npm run serve, I'm going to fire up my code editor, and then npm run serve. Now, this is going to run our project, and it's going to watch for any changes that we make so that whenever we make any changes, we will then see that immediately in the browser. So once this is done loading everything, it will tell us where to point our browser. And in fact, I already know where that is going to be, so I'm going to go ahead and do that, it's localhost and port 8080. And this is what you should see whenever you run a default project, or at least a project first up. Now, what we're going to do is use a split screen here so that we can have our code on the left and then see the results on the right. Now, there's a few things I want to do first. Let's delete the assets, and we're going to see some errors on the right hand side, which, just right there. Let's delete the components folder as well. And then we are going to delete this App.vue, and that will be the final thing that we delete. Now, we just deleted some very important things, which is why we are seeing these error messages. Let's open up main.js, this is the entry point for our project. And you can see here that it looks kind of similar to what we had in the previous lesson. But here we are using modern JavaScript syntax and techniques. So we have Vue as a module that we are importing, and we are going to then use Vue to create a new instance of that Vue. Just like in the previous lesson, we newed up the Vue constructor, we passed in an object that had an el property. Well, we don't have to do that here. Instead what we are going to do is define a render function that is going to render a component called App. You can see that we are importing this here. But we deleted that, so we are going to create it. So let's create a new file, and this needs to be inside of the source folder, and we're going to call this App.vue. So a single file component typically ends with the vue extension. And we have primarily two pieces, we have our template, and then we have our script. So here you can see where the JavaScript is to export an object, and that is what is being imported here in the main file, we are importing that JavaScript object. And then Vue is going to render this component so that we will then see it in the screen. So for our template in the previous lesson we had an h2 element that had a title that said Hello Vue.js. And then we also had a p element that had some content, so this is some content. Now, whenever I hit Save, we are going to see an error. Now, notice that our template is pretty much identical to what we had in the previous lesson. But if we look at this error, it says that the component template should contain exactly one root element. So here is something very important to remember, that in your template it is following XML rules. So even though our template is technically a root element, it is not the root element of our template. Instead what we need to do is wrap any element, really, around our h2 and our p element. And a lot of times, that's simply just a div element, so I'm going to use a div element as the container. And then we will have our title and our component. And whenever I save this, we see Hello Vue,js and then this is some content. So this a little bit more involved as far as setting up a project and writing single file components. But as you'll see in the following lessons, this is really a better way of developing Vue-based applications. And really, it has all of the pieces from the previous lesson, we have our template, we have our script, even though our script really isn't doing anything. And then we have the import of the Vue framework, and us telling Vue to render our template and display it in a div element with an id of app. Now, in case if you're wondering where that is, we need to look at the public folder and then index.html. And you will see that here we have just an HTML page, and there's a div element with an idea of app. Now, there's some other things that are going on behind the scenes, but this is essentially what's being used to display the HTML on the right hand side of the screen. So unlike the previous lesson where we had our template directly within the HTML body, our template is actually within a Vue component. So now, in the next lesson, we're going to take this a step further and we are going to create a list component, something that would definitely be useful in just about any application.