1.2 Prerequisites

Lets start by making sure we have all the required bits and bytes installed on our development machine before we get started. Now obviously, we are going to spend the time in this course building an application, a web application with Vue.js. Now obviously, we're gonna need to install Vue.js, but we're gonna get there momentarily. Now we're also gonna be using a UI framework in this course, know as Semantic UI. Now you can think of Semantic UI as a kind of, similar idea as to Bootstrap, or other UI frameworks out there, but I really have been using this a little bit more lately and I've started to really enjoy it. It's very easy to use, it's very quick to get up and running, and it's very easy and quick and simple to be able to start prototyping applications with it. Even if you don't have much experience creating user interfaces or user experiences. So I highly recommend taking a look at this, and I'm gonna show you a little bit on how to use it in this course. Now you're also gonna need a text editor that you know your way in and out of, and that is pretty flexible and capable of handling different types of files. Preferably with some syntax highlighting, would be good, but it's not required. So something that would understand HTML, JavaScript, CSS, things like that, because that's what we're gonna be dealing with mostly in this course. Now I'm gonna be using the Atom editor, so I would recommend you using that if you'd like to follow along, but it's not required. You could use any text editor that you're happy using, another one that I would recommend to take a look at if you have an already is Visual Studio Code. It's a much lighter weight code and text editor that's cross platform that allows you to do a lot of different development has a lot of extensions and plugins. For support for different types of languages, but it's much, much more lightweight and streamlined and faster than their full-blown Visual Studio IDE. So once again, if you've never used it, I would highly recommend you taking a look at it if you have the time. Okay, so these are the different things that we're gonna be using throughout this course. But we're gonna be spending most of our time working with Vue.js and how to use it in a basic web application. So that you can really take advantage of its flexibility and its performance to create client side applications that really can very quickly and easily start to wow your end users, with just using a little bit of code, so it's actually pretty cool. So let's go ahead and get started by installing a lot of these basics pieces to the puzzle. Now I already have Atom installed so I'm not gonna worry about that, but the next step would be to use Vue.js or to install Vue.js. So if you were to click on Get Started on the home page and come over to the right hand side under Guide, we will be using the 2.X version in this course. If you would come under Essentials and click on Installation, you'll notice that there's quite a few different ways to actually install this and use it. There's the dev tools, you can use the direct script include if you wanna either download it Or use the CDN and you can get more information on the CDN below that. You can use NPM to install it if you want, just install the Vue in and of itself or you can use the CLI. And actually, what we're gonna be using in this course is the CLI. I've really started to like to use the CLIs for different frameworks these days, simply because there's a lot of good scaffolding that comes out of the box with these CLIs. That really gets you up and running quickly now, that's very helpful and beneficial in large scale applications, as well as in simple prototyping applications. So, I'm gonna show you how to use the Vue CLI in this course, and that's what we are going to get started with right now. So, the first thing that I wanna do is I wanna open up my terminal, and in this case I'm using iTerm, but you could just as easily using any sort of batch cell or a command prompt on a Windows machine or anything on a Linux machine, that should all be just fine. So the first thing that you're gonna want to do is you're gonna wanna make sure that you have installed the vue-cli. Now, I'm gonna use npm to do that so I wanna say, npm install and I wanna do --global to make that I install as globally, and I want to install the vue-cli. So now, what's gonna happen is npm is going to run out and grab the latest version of the vue-cli. It's gonna download it and all of its dependencies and make sure that everything is installed properly on my local machine. Now this could take a few moments if you've never done it before or if there's a lot of changes and updates to the Vue CLI that its gonna need to pull down. So you might need give this a couple moments, but for the most part, it shouldn't take more than a few minutes. And as you can see here, I'm all done in about 19 seconds but I've also already had this installed before, so for me it's not gonna take too long. So let's go ahead and clear our window here, now the next thing I wanna do, is I want to use the CLI to create a new Vue.js project. So the way that I'm gonna do that is I'm simply going to go to my Desktop. And within my Desktop, I'm going to run a command using the Vue CLI. I'm gonna say vue, and then I'm going to use the init command and now, there's a couple of ways that you can create Vue applications, but one of the more popular ones these days is using webpack. So there's gonna be some extra added tools and build processes put into play because we're using the web pack template, but I'm gonna show you that in just a moment. And then we need to give it a name and in this case we're just going to call this quizzer. Now the main motivation behind this is when I've been working with my children lately, we've been using an application online for their school that allows you to create vocabulary words and definitions. And you can add and remove these words and definitions from these different groupings, and then you can create quizzes for yourself. And it's a very nice little study tool to be able to use, and so I thought well, why don't we try to imitate and emulate some of that functionality with Vue.js. So let's go ahead and hit the Enter button now and we're gonna see that in my case the target directory already exists because I have created this once before. Do we wanna continue, let's go ahead and say Yes we do want to continue. So it's going to download that particular template, the web pack template that we asked it to do. And now it's gonna take us through some questions to see what are some of the configurations that we want to use for this particular project. Now you can follow along with mine, or you can do your own, it's absolutely fine either way. But there's a couple things in here you need to pay attention to. So we wanna know what the project name is, so it's by default going to use what we provided, in this case quizzer. And you could change it if you want, but I'm just going to hit Enter, cuz I'm gonna keep the default. And then we can give it a description, it's gonna call this by default a Vue.js project, I'll leave that as a default. It's gonna ask who the author is so that's me, and then it's gonna say how do we want to build Vue? So there's a couple different ways you can do this, we can install the runtime and the compiler or we can do the runtime only. So we're gonna use the runtime and the compiler because this is a very powerful thing that's going to kind of install everything for us to kinda get this thing up and running. So that we can see all of the updates that we're doing happening in real time. Which is pretty cool and very beneficial especially when you're first getting started. So let's go ahead and use that, then we're going to say do we want to install vue router? Now vue router is another interesting topic, but we're not gonna be talking about that very much in this course, so let's just say no we're not going to install that. I'm not worried about linting my code in this particular course we really wanna just focus on the basics of Vue.js, so I'm gonna say no. I'm not gonna be writing any unit tests so I'm not going to do any of those. Now, you can obviously do any sort of unit testing you could add the linting if you want, but we're not gonna cover those topics in this particular course. Okay, so now you can see here that we have made it through the installation process using the webpack template. And now it says to get started we simply go into our directory, we run npm install so that we can install all of our Node modules, and then we simply npm run dev, very interesting and very simple, so let's go ahead and try that out. So we're gonna say change directory to quizzer, we're going to use npm install. It is going to run out and get all of the required node packages and all of their dependencies and install them locally within our directory. And then once that's done, we simply run npm run dev. So let's go ahead and run that, and then what should happen is we should have a new tab or a new window open up, and whatever our default browser is and we should see this landing page, right here. Welcome to Your Vue.js App and you can see here that we're running by default on localhost 8080. So now, basically what we have here is a default application up and running using Vue.js, and just to show you how cool and fast this really is I'm simply going to go back to my terminal here. I'm gonna open up a new tab, and I'm simply going to navigate back to Desktop, and I'm gonna go into Quizzer. And then I'm gonna open up Atom in that directory so I can see what this particular directory looks like. So once I'm in here, you can see now the basic project structure that's been created for us using the webpack template. Now most of this you're not gonna have to worry about, there's some build artifacts in here that are gonna be doing some of the building processing for us for using web packs. So we're not really too concern about that cuz it's just going to work. So you don't have to worry about that too much there are some configurations in here. So when you saw when we ran npm run dev, this is the version of the configuration that we are using since we are running in dev. Once again we're not too concerned about that, so we're not going to worry our heads with that. Now we have our node modules folder which is what was populated when we ran npm install, it went out and got all of the required packages, downloaded and installed them. Once again, not gonna be very concerned with that, where we're gonna be spending most of our time is actually gonna be in here in the source folder. So now you see in the source folder we have assets is where you're typically going to see your images. Which is where that logo.png fell, where you see this giant V over here for view, so that's, that particular image. And then, we also have our components, now we'll talk about components and what components are throughout this course, but just imagine that if you wanted to create some sort of reusable. Piece of functionality that included markup, that included scripting and that included styles that you wanted to use throughout your application. Within a Vue application you would be creating a component, and that's what this Hello.view is right here, but once again We'll be getting into that a little bit later. And then finally in here we have our app.view file which is basically our starting point, our beginning view component that we are gonna be using, and then we have our main.js file. Which kind of starts to wire everything up and create our new instance of Vue and then kind of ties it into our market that we're running, using our app component which was defined right here in our app.view file. Okay, so we have all that stuff taken care of, now we also have static folder here which is where we can put our static files, if we want to be able to stir those things up. But for this course, I don't think we're really gonna need to use that so I'm not worried about that as well. And then we have a lot of configuration files for .gitignore, our editor, and just a number of other things that we're not really gonna have to worry about. One file that we are gonna be interested in though is gonna be this index.html since this is the initial file that's gonna get loaded when we navigate or send the get request to port 8080 on local host which is what you saw up and running right over here, okay. So that is basically the beginning of creating a very simple Veu.js application unto the box using the web pack template using the Veu.cli. So it's pretty simple it's pretty straightforward and every time you do it, it's gonna be basically the same unless you start adding in the lintels or unit testing or things like that. And you'll see more stuff in here but for the most part, we're gonna be living in this source folder here like I said before. So now that we have this kind of up and running, we're ready to start getting into building our very simple Vue.js application