This course has been updated! We now recommend you take the Introduction to Vue 3 course.
Transcript from the "Vue CLI Walkthrough" Lesson
[00:00:00]
>> Sarah Drasner: So, let's do a little demo walk through. Remember, we already had this shop counter with components and stuff. So what I'm gonna do here is I'm gonna set up the whole thing for you. So, I'm gonna go, I'm in my intro-to-vue thing here. So I'm gonna say and I've already run the global installation for creating the Vue CLI.
[00:00:25] So I'll say, vue initwebpack-simple, and then I'll call this setup-example Workshop.
>> Sarah Drasner: And then it's going to run. It will ask me if I want that name. Yes, it will be a Vue project. I'm the author no. And then I can cd into setup example workshop and I'm gonna run yarn.
[00:00:55] Now we're gonna wait for yarn to install. [LAUGH] And it will link dependencies. Yarn is pretty quick, so we won't be waiting for too long. And then it's done. So now I can run npm run dev. And the first thing that you're gonna see is that it creates this local development for me to work with and it has a few things in it already.
[00:01:16] So it already kind of sets up this environment, so let's go look at it. I'm gonna open a new tab, and open it in a text editor. So you can see in here what we have are a few different things. We said that we were using Webpack, so we have a Webpack config.
[00:01:33] We have an index.html file. That index.html file is just same normal index.html that you're usually used to. And we have this div id app that we've been using div id app this entire time. So that should be pretty similar to something that you're used to as well. And if we open up the source directory, we'll see a few files.
[00:01:56] We'll see this main.js. And the main.js brings in Vue and it brings in app. From app.Vue which is this file here. It's importing both of those files. It's creating a new instance. Making that relationship of el to that app. And then it's going to render. And then app is really the place where I start to use vue.
[00:02:18] I'm not gonna write a bunch of vue code in this file at all, I'm usually gonna keep that pretty clean, because I'm gonna do other things in it. I'm gonna create global things in that file, and everything else goes into Vue files for this application. So here you see all of the things that are in this Vue.
[00:02:39] So we actually have everything in this Vue file. We have a template with the div id app. We have an image source and that goes into the Assets directory. That's a relative path to the Assets directory with that logo. And you have a bunch of tags here, we have that export default that I talked about before.
[00:02:57] We have our data and which is here and we have a bunch of styles that are here. So if I wanted to bring this Backpack Shop Counter that you're now masterful at being able to create. I could go into this gear where I have this link tag for the head.
[00:03:14] And I'm going to go over to my index.html file, and I'm going to put that also in the head over here. That's the only time I'm really going to touch this file is when I need to add something to the head or add something to the metatags. I think this needs to be, it's okay.
[00:03:34] So, then we go into our App.vue, and our App.vue is really this, right? It's our <div id="app">, and it's what has all of these units inside of it. So, what we're gonna do is we're gonna bring over this <div id="app">, and we're gonna replace this <div id="app"> with this.
[00:03:53] And now we have all of these brought over into our Vue CLI. We're also going to go grab all of the manifest. We don't have to say el = "App". This is already, because we're working within that same template, vue is going to say I assume you want that template from there.
[00:04:11] So we no longer have to do vue.component or establish that there's a relationship there, it already knows that we're using that template, whatever is in that file, so I'm going to go grab all of the data here. and I'm gonna replace the data here and that will be cool.
[00:04:39] Right now my app is probably erroring because I don't have the child in it yet, and I'm already calling the child so, let's just keep going for now. I'm gonna add the CSS that we have here. I'm gonna compile the CSS, because I didn't use Sass and I'm going to have this in here.
[00:04:59] You might have noticed that I have it scoped on the other one. This is a style tag, this is just a regular style tag. So that style tag will concatenate and build styles for you know, this will be a global style tag for the entire application. I can also import other style sheets if I want to.
[00:05:17] I can add a view CSS loader and that's like I would, you know, yarn, add, NPM install view CSS loader and then I can @import files into these CSS things as well. So, cool so, so far we've got our App and we've got our Main but we don't have our childs component yet and when we build up this child's component the thing that I wanted to do is, I want it to put in the component's directory.
[00:05:43] This App is kind of a special one, this app is like basic like our the thing that storing a lot of stuff that's kinda like our view instance was before. So I'm gonna create a new file. I'm gonna use a snippet to create that template and stuff, as you saw before.
[00:06:01] Then I'm going to go into my source file, and here I'm gonna create a new directory that I call components. I'm gonna create this and I'm gonna call this childs I have to spell it right, child.vue. And now in the component structure I have the child.vue. I am going ahead and grab everything that is inside this child and bring that over to where my template is.
[00:06:32] Cool, and then I've got a bunch of things in here, but I don't need to bring the template over. Remember since we said this is a .vue file, it's already going to assume I wanna use the template. I no longer have to establish relationships all over the place in there in two different places and what have you.
[00:06:51] So I can just export defaults and add the data that I need which is here and that is good. So the next thing, the last thing that we have to do here is actually import this child in to the app because that app is gonna bring that child in it's gonna use it.
[00:07:12] So I have a snippet for that as well I'm gonna say vimport and this is gonna be a Child, from components childs.vue and that SnipITs directory or that SnipITs repo is in the, like the link to it is in your repo, you don't have to use it or anything but I find it kind of helpful to keep moving them.
[00:07:39]
>> Speaker 2: Do you have to put that above the export default you had before?
>> Sarah Drasner: Yeah, I'm gonna actually merge these two, so, yeah, sorry, sorry, sorry, yeah. You're right, I got it. Put this here. I was going to merge those but I put that in the wrong place.
[00:07:53] So, this is the import and then the export goes here I don't need [LAUGH] I don't like putting in. So I've got this and I've got my components, app new, and now we can save this and let's go check it out. I've made an error somewhere. Let's go see.
[00:08:17]
>> Speaker 2: You're doing extra-
>> Sarah Drasner: Yeah.
>> Speaker 2: It's closing bracket.
>> Sarah Drasner: What else? New is not defined. I used new again. Sorry, I should say child here.
>> Sarah Drasner: And there we go. So now we have all of our components brought over and we have each individual component and it still works the way that the other one did.
[00:08:52] And the nice thing about this, again, is I'm using all of these things in one file and, even if I wanted to take out all of this CSS. I could remove the style tags if I wanted to. I don't even need the script tags or anything. All of these different pieces are optional.
[00:09:10] Like if I had in this child.vue, I don't have much going on in the style tag. I could totally delete that, that's fine. So, you can use what you need and not use other things. It's very, very flexible. I'm no longer having to establish relationships between things. If I'm working within that component I'm literally working within that component.
[00:09:32] I can just focus on that component for that moment. And that keeps everything nice and clean. And eventually you're gonna have a component's directory with a lot of different components. You might even nest those into other directories or organize it however you want to. But it's fairly simple to set up, it didn't take that long for us to move that over and have a nice build process.
[00:09:53] Now for when we're ready, we're not gonna go through all of deployment or anything, but when we are eventually ready to build for deployment, we would write npm run build and I want you to watch this area here as I write that.
>> Sarah Drasner: Did you see that dist folder appear?
[00:10:16] So remember in that index.html file, we have a script source is disk build.js and that is what it's going to end up using when we actually deploy the app. So what it did was it minified and concatenated and brought everything down to be like really, really tight and performant so we're making one http request instead of many across our site so that's really really nice.
[00:10:43] All right so you'll start off with an app file in your source directory and a Hello.vue in your components directory that's really nice, because you can see how you'd set up these files and how imports and exports will work. Yeah Mark?
>> Speaker 2: Just Jacobs asking for a little bit of clarity around the render H, h app?
[00:11:01] Each app?
>> Sarah Drasner: This is how Vue is actually rendering everything into the page. So there's a little bit of, this is basically like an arrow function that's allowing us to, if you wanted to write functional components and have them render out. This is actually the type of mark up that you'd be using to create functional components.
[00:11:25] So it's basically saying to render all of those things to this HTML and that's what's establishing a relationship between that build process. It's a little bit. Of magic in that type of render. So I don't know all of the details behind what is going on in the render.
[00:11:45] But that is basically what's going on there. So it's passing the app into that H. And H is pretty standard for creating those render components.