This course has been updated! We now recommend you take the Introduction to Vue 3 course.
Transcript from the "Course Agenda" Lesson
[00:00:00]
>> Sarah Drasner: So what this course is, it is an introductory course. If you are super Vue expert this course is gonna be way review for you. We are really starting from the basics. It assumes no prior framework experience at all. So it's the stuff to get you going. We're gonna cover so much ground today.
[00:00:21] We're even gonna cover routing. We're gonna cover directives. We're gonna cover methods, computed, watchers. We're gonna dig in a little bit to what's happening behind the scenes. Not too far, but just giving you the breadth of all of the things available to you. How to set things up with the CLI, how to build out components.
[00:00:39] So really, as much information as I can give you in a day, so that you can get building things right away. And if you need to do deep dives into any specific area, you can do that on your own. Also Evan Nu is gonna give an advanced class in a few months.
[00:00:56] So if you're more interested in continuing your information, that's coming up as well. We have a lot of exercises to help you learn. I'm gonna do some live coding, but, mostly, I just have demo after demo after demo. And these are all collected for you. So they're available in the slide decks, and they're also available in the CodePen collections.
[00:01:17] The reason why I chose to do it that way is because if you watch these videos and then later on are trying to work and be productive. I want you to be able to go exactly to that demo that you saw. And look at the code there instead of having to go rewatch me talking and live coding for you.
[00:01:34] So I try to keep them in these small chunks, so that all those resources are readily available for you to use. And because I want you to see the breadth of that material, I'll sometimes go over the same concept in a few different ways. Because I don't want you to just get used to that one way of working.
[00:01:53] I want you to see how you can make a comment form with it. And then make another type of form, and then make a list that you're rendering, or make a first class thing. So, just trying to get as much spread of knowledge as humanly possible. So that you get a deeper understanding of how that's built.
[00:02:12] So we're covering basic premises and a couple of more advanced features. We're gonna do some more advanced work with animation. We're gonna do stuff with custom directives, and filters. And mix ins that are a little bit more advanced, but just kinda covering the base ground more. What we won't cover, we're not gonna cover ES6 but we're gonna use it.
[00:02:32] And the reason for that is that ES6 is really a part of a modern JavaScript development workflow now. If there are pieces of ES6 that you don't know and you're uncomfortable with, I can come around during the breaks, when you're doing the exercises and kind of explain more.
[00:02:48] But I'm gonna be a little bit assumptive that you have some ES6 knowledge. The details are something that we're not gonna cover. We're not gonna go super deep into like 1 tiny thing, so that we can spread out and learn more information. We're not gonna talk about deployment and testing today, because we're gonna talk about everything else.
[00:03:08] So I apologize that we can't get there, but we do actually have a full day of work. And so we're gonna be kept pretty busy here. We're not going to cover edge cases for that reason too. We're just trying to get the widest spread, so that you can get productive.
[00:03:23] So before we start, the GitHub repo that you probably already have, but in case you don't is sdras/intro-to-vue. In this, you'll see a bunch of different smaller builds that we have here. We have the Vue chrome devtools, if you haven't already installed them, you should do so now.
[00:03:45] You don't have to get these guys if you don't want to, the chrome extension or Vue sublime snippets. But we are gonna be using CodePen today, so you should get a free CodePen account. Here are all of the slides available to you as well. They're password protected, but the password's easy.
[00:04:02] So you can always get in there, and all the same. I've made a collection of all of the workshop materials in one place. So anything that's not housed in this repo exists in this materials collection. Here's just a fun animation collection, just in case you wanna check out some of the more dazzling things you can do with Vue.
[00:04:19] For VueCLI resources, we have an example build. And we also have a more fun demo that I'll go through. We also have a set up, and then we have next resources. We have a whole bunch of them, and we have a bunch of Vuex resources, as well. And so that should get you going.
[00:04:39] If you're not familiar with CodePen, I'm just gonna do a really, really quick lay of the land here. I'll go here and go to create pen, I can save this as private. If I go into the JavaScript tab by clicking on this here. You can see that from this drop-down I can select Babel as a pre-processor.
[00:04:59] I suggest you do that, you can also use type script or whatever you feel comfortable with. This is part of the reason why I am using CodePen for this, because before we cover the build process you can get set up right away. You can select the Vue from this drop-down here.
[00:05:15] But it's the minified prod version so it won't give you warnings or dev tools. So, in most of the Pen, I've included the CDN version. That's not the development version, but I'll show you how you can use the dev tools anyway if you have those. But you can also just type, we're gonna use Axios for couple of different demos, you can just type in there and it will auto-fill.
[00:05:37] In CSS, I'm using SCSS and normalizing autoprefixer. You don't need to do that if you don't want to. That's just letting you know. And this is a fork, so if you need to work on some of the exercises, you hit that Fork button and save it. And then you can work for on your own.
[00:05:53] If you don't fork it and save it, then if you hit that debug window. You actually won't be seeing your own work. Yes?
>> Speaker 2: You mentioned Nuxt, people are asking what that is?
>> Sarah Drasner: Nuxt, I'm gonna go into more detail about Nuxt. But we have a Vue CLI build, and that build process will do a bunch of things.
[00:06:15] It will concatenate and build our files for us with Webpack or Browser 5, if you would like to use Browser 5. There's another build process that we can use available through a thing called Nuxt. Nuxt offers server-side rendering, and it's really fast. So fast it's Lighthouse scores out of gate are super high, we're gonna go into detail about all of these things, though.
[00:06:39] So if you don't know what Nuxt is, that's okay. We're gonna cover all of that in one of the sections. All right, if for some reason or whatever reason you are using a minified version or if I've left a minified version in one of the Pens, you can just write vue.config.devtools = true.
[00:07:00] And then you probably have to hard refresh and then the Vue devtools will start working. So don't worry if you have that minified prod version. You can either go get the development version or you can use this.
>> Sarah Drasner: Cool, all right, so let's get started learning Vue. We're gonna have a lot of fun today.