Vue JS 2 Tutorial #1 - Introduction

Howdy gang and welcome to the first lesson of what I think is quite possibly the best Vue.js 2 tutorial series on YouTube. But then I am biased. Okay, then so first things first. What is Vue.js? Well, it's a front-end framework and we can use this framework to create JavaScript driven applications for the web. Now because it uses JavaScript all of this code can be run in the browser. So there's no need to reach out to a server to reload pages or to load other pages. So we end up with this really seamless web application and in that way is very similar to React or Angular. So what makes Vue.js a bit different? Well, first of all, it's very lean. It's about 16 kilobytes the production version. So it loads really quickly and it's also got a very high runtime performance. Now the cool thing is that despite that it still maintains a lot of the features you'd expect from a front-end framework such as components, filters, forms, data binding, etc. Yeah, routing is a separate package which we have to install on top of this, but even then it's very lean indeed. Okay, so in this series, I've kind of split it up into two sections. The first section I'm going to show you how to install Vue.js the easy way using a CDN, a content delivery network. So we're going to get up and running very quickly and I'm going to show you the basics such as conditionals, events, data, etc. Then when we understand the basics, we're going to move on and install Vue.js with the Vue CLI and Webpack, which is what we typically do for a large application. We're going to dive deeper into components, Vue files and templates and we're going to tackle a few different projects along the way. So one of those little projects we're going to be making is this blog right here. I thought I'd give you a sneak preview where we can list our blogs, we can search for them and we can also click into them to see more of it. We can also add new blogs and we're going to hook this up to Firebase to store those new blogs and retrieve them as well. So I'm going to show you that too. So all of this is created with Vue.js and Firebase. The text editor I'm going to be using for this series is called Atom. I mention this because a lot of you always ask me what text editor I'm using. It's this one. You can download it for free at atom.io. I implore you to do so. Finally, I've created course files for every single lesson in this tutorial series because I'm super cool. And if you want the files for lesson 10, for example, just go to the lesson 10 branch and you can see them and download them all there. So enough talking, let's go ahead and install Vue.js. So I've gone to the Vue.js guide right here. I'm going to leave a link to this down below and you want to click on installation. Now if we go down here to the CDN option, it's going to recommend a link to you. So let's copy that link. And if we go to Atom now, you can see I've got an empty folder called Vue.js playlist. I'm going to right click this and create a new file called index.html. Okay. Now if I type HTML tab, it's going to make this little boilerplate for me. Yours might do the same thing. Title Vue.js tutorials and then we want to link in this script. So let's say script source is equal to this thing that we just copied and close that off. And voila, we've installed Vue.js here. We can now use it in this file. Pretty cool. That's how easy it is to get started. So I want to do one more thing and that is to link up a stylesheet. So let's say link href equals styles. That's what it's going to be called and the rel attribute is equal to stylesheet. Okay, and now we want to create that stylesheet by going to here and go to new file and calling this styles.css. And voila, there we are. We're ready to go. Now in the next tutorial, we're going to dive into actually creating some Vue.js code. But before you start the next tutorial, I just want to make sure you're up to speed on a couple of things. First of all, JavaScript. This playlist is going to use JavaScript very heavily. So I'd expect to know at least the basics. So if you don't check out my JavaScript for beginners playlist, the link is going to be down below. I'm probably popping out on the screen sometime around about now. Secondly, HTML and maybe CSS. We're going to use both of these quite a lot in this series as well. And again, I've got a series on both HTML and CSS. The links are also going to be down below. So there we go, guys. That is your whirlwind introduction to Vue.js. In the next video, we are going to get stuck into writing Vue.js code. But if you enjoy these videos, please my friends, don't forget to share, subscribe and like them and I'm going to see you in the very next one.