This course has been updated! We now recommend you take the Introduction to Vue 3 course.
Transcript from the "Introducing Vue CLI" Lesson
[00:00:00]
>> Sarah Drasner: We went over template strings. We went over using script x templates but so far we haven't really delved into a real build process for vue. So we're kind of working our way from the simplest and easiest to kind of understand and use right out of the gate to a little bit more complicated of a build process but much more useful.
[00:00:23] We're gonna start off with vue-cli but then we're eventually going to use Nuxt too, and I think Nuxt is really, really cool. I'll explain all of the reasons why Nuxt is really cool, coming up. So okay, why are we using a cli or vue-cli in general? Because we can use build processes that allow us to use great features like ES6 or Sass or any other libraries and bring them in very, very easily.
[00:00:49] In CodePen, we've got those little pre processor tabs, that's clearly cool but we can't do that in a normal build process just like select from a drop down. So we need to have those kind of build processes in there, if we wanna use stuff like ES6. And ES6 is pretty awesome, so we'll definitely probably do.
[00:01:06] We're gonna build and concatenate single file templates which are super awesome and I'm not biased at all. Here are all the trophies in the world [LAUGH]. I think single file templates are just a really, really great workflow. So we'll look at those in this section. It's so that we can not load all of our files at startup.
[00:01:26] Sometimes we wanna lazy load component. Sometimes we need to do asynchronous operations. And with UCLI that really helps us do all of that not just have everything on the page at once. So that's really great. We can do things like server side rendering, code splitting, we can get performance metrics about our application.
[00:01:47] All of these things are really important and really awesome. We can also have build and prod versions. Previously, we've just been using a script that was like the non minified version and then the minified version. But in real life, what we'd need to do is we'd minify, concatenate, do all of these things to our scripts.
[00:02:05] And then we'd also be using a different version of that script when we're pushing to production. So this allows us to do that pretty easily. So the first thing that we'd wanna do is npm install -g this installs it globally vue-cli or a yarn at global at vue-cli whichever your preference.
[00:02:27] So I think everybody should actually run this command so that they have it on their machine before we get going. I've already run this [LAUGH] so I'm not gonna run it again. Yeah I'll give you a second. Then for the purposes of this class today, we're gonna do vue init webpack-simple my project or whatever you want your project to be named.
[00:02:50] You can also just use webpack. Actually, I would recommend using webpack. But since we're not gonna do, the thing that webpack itself has that webpack simple does not are things like testing and ES linked configs and things like that that we're not using during this class. So I'm going to do a webpack simple today but in the future, you probably wanna be using webpack.
[00:03:11] If you're more comfortable with browser fi, there's a browser fi template too, so you could also do Vue init, browser fi or something like that. So there's a few different templates.
>> Speaker 2: Is it okay if I use the webpack instead of webpacks [INAUDIBLE].
>> Sarah Drasner: Yeah of course.
>> Speaker 2: Okay.
[00:03:25]
>> Sarah Drasner: There are just a few more options that it will take you through.
>> Speaker 2: Yeah, we are already past that. But as far as the rest of the course is concerned.
>> Sarah Drasner: Sure it is totally up to you. I am using webpack simple for the purpose of teaching but webpack is great and it has things like testing involved.
[00:03:40] So then we'd cd into that directory, we'd run yarn or npm install, depending, use one or the other don't go back and forth like I just did in this [LAUGH] thing. So use yarn add or use yarn. I typically use yarn. And then I'm gonna say npm run dev.
[00:03:58] And that will immediately give us a dev server. And the dev server is also a really nice thing about vue-cli because I can work with it and have it, instead of just hosting it with some sort of throwing my files in the browser. That's not actually a real build process, so it reflects what the user would see a little bit better.
[00:04:21] And I mentioned these single file templates. What am I talking about [LAUGH]. So, usually we've been either using a template in that string or we've been wrapping it in that strange script tag, that's not actually how we would use it in real Vue applications. What we'd have is this template here where we have all of our HTML and all of our mark up.
[00:04:43] We have to return a single element, it doesn't matter that it's a dev, it could be a span, it could be an SPG, it doesn't matter but you have to return just one. That's the same in react, for now, I think it's changing. And then we have a script tag, where we're gonna export defaults and all of our component logic will go in there.
[00:05:03] We'll also need to import components into here which I'll show you how to do in a little bit. But we'd basically have that script tag. And then we have this style tag, so this template that with the base of dot Vue, it's going to be a new file type, a new file extension called dot Vue.
[00:05:24] And it will have all of this stuff in it. And what I really like about it is that, there is no context switching. We have everything in one place that we're working on it in just one location. So, we can go in between our HTML and our script like we were doing in CodePen, really fast.
[00:05:40] And we can just do all that in one file and it all stays really, really encapsulated. Vue files mean no context switching, yey. Okay, so we would import new from components new. So if I have a parent component and I need to bring another component in to this component.
[00:06:00] And again, if you're familiar with other frameworks is very much the same. We're importing that thing in, and then I'm saying in the export defaults, the components that we're using here is new. And that new will allow me to use in this template this new tag. I'm gonna do some live coding where you can see this stuff for yourself but this is just some base premises..
[00:06:24] We could also write it this way, where we have, like, app-new is new. So this is ES6, just like usually I'd have to write new is new but since it's ES6, it's gonna to say that's a little redundant, why don't we just [LAUGH] say new? And it will assume that for us.
[00:06:40] If I wanted to change this though, let's say my component is named new but in my mark up, I need to name it something else, I could do that. I could write app-new is new and remember we said. Camel casing will turn into Kebab Case when we turn it into those HTML elements.