Intro to Vue Loader 0:00At this point, you have a good grasp on the fundamentals, so let's switch over and start focusing on organization and structure, and how you will build real applications. We're going to use Vue Loader for this, and it requires a tool called Webpack. So we're introducing some new things here. I will warn you, it gets a little complicated, but Vue actually does a pretty good job, and also Laravel Elixir does a good job, if that's relevant to you. Either way, they do a good job of making this as easy as possible for you. So we're going to browse to vueloader.vuejs.org, and you'll see that we have a new way to create components all in a single file. Notice up top, you define your template, and then your script, and then even the CSS, ifcomponents all in a single file. Notice up top, you define your template, and then your script, and then even the CSS, if you wish. It's kind of cool. All right, let's go to setting up a project, and you'll see there's a handful of commands to run here. So let's do this together. I'm going to assume you have NPM installed. If not, just research it, and you'll have it set up in four seconds. Just go to nodejs.org. Initialize Webpack Project 0:51If not, just research it, and you'll have it set up in four seconds. Just go to nodejs.org. And also, of course, if you have Yarn set up on your machine, you could just run Yarn. Anyways, next, we will initialize a new project using the webpack-simple template, and you can find all of these on Vue.js' GitHub page. This will be the simplest possible Vue plus webpack example. So let's run that, and we'll just call it myapp. Let's just use the defaults. Okay, and we're all set to go. So now I can cd into myapp, and let's open this in Sublime real quick. Explore Project Structure 1:19Okay, and we're all set to go. So now I can cd into myapp, and let's open this in Sublime real quick. Now you'll see that everything is stored within a source directory. You have your assets, and this is just a dummy logo that Vue will provide. But if we go to main.js, we can see the beginnings of how you will actually work with Vue. So notice here we're importing Vue and also our app file. We'll go over that in a minute. Next, we create a new Vue instance like we always do, and in this case, it's using the render function. We actually haven't reviewed that just yet, but we will.render function. We actually haven't reviewed that just yet, but we will. Anyways, if we go into app.vue, yeah, take a look. So you have one section for your template, your HTML, the basic template that we've been creating throughout this entire series. Next, you have the script in its own tag, and then even the styling within its own tag as well. And this is cool, because when you think about it, well, you had this concept of components with your CSS, and we learned that by using Bulma. So if you're writing CSS, you can think in terms of components.with your CSS, and we learned that by using Bulma. So if you're writing CSS, you can think in terms of components. This is a grid component. This is a modal component. But then when we switch over to our JavaScript, it's the exact same thing. We have the same concept of components. So what this does is it allows you to take that entire concept and group it into a single file. But now, as you can imagine, this .vue file, well, the browser can't really understand that. Webpack and Loaders Overview 2:34But now, as you can imagine, this .vue file, well, the browser can't really understand that. And then further, some of this syntax here certain browsers can't understand, because it's a modern ES2015 syntax. So we basically want to compile everything down into a bundled file that any browser can understand. And that's where Webpack comes into play. So if we take a look at Webpack, I will warn you, this is overwhelming for just about everyone. And that's specifically why Vue will give you a template so you don't have to do it on your own.And that's specifically why Vue will give you a template so you don't have to do it on your own. If you want to learn more about Webpack, definitely do it, but don't let this deter you or scare you away. I'll give you a quick 30-second overview of this. We're using Webpack, so we pull it in. We then specify that our entry point is this main.js file. This is the entry point to our application. Next, our output, well, when we compile this down, where is it going to go? It's going to go into a dist directory, specifically called build.js.Next, our output, well, when we compile this down, where is it going to go? It's going to go into a dist directory, specifically called build.js. Next, we have various loaders. And this can be a little confusing, but think of it this way. Loaders give us a way to apply preprocessing to anything that we require in. So, for example, when we import or require or load a file, well, maybe as part of that, you want to preprocess it in some way. You want to use SAS, or you want to move the file, or you want to have the ability to load HTML or SVG and modify it in some way. That's specifically what loaders allow for.HTML or SVG and modify it in some way. That's specifically what loaders allow for. So in this case, we want to use the Vue loader. This is something that Vue provides, and it's exactly what allows us to use a single file template. So we can see that it's going to look for any .vue file, any file ending in .vue, and we're going to apply this loader. Next, we can have as many as we need. So look for any .js files and apply the Babel loader. Babel is what allows us to write ECMAScript 2015 syntax, but then compile that down toSo look for any .js files and apply the Babel loader. Babel is what allows us to write ECMAScript 2015 syntax, but then compile that down to something that any browser can understand. So we will apply that to all JavaScript files except anything in the node modules directory. And then finally, we're going to look for any images and apply the file loader. And this allows us to move files anywhere we need to. Finally, just some stuff like we set up an alias. So if you try to require this, it's actually going to point to the vue.common file. We set up a dev server, and then we check to see if we're in production. Then we will perform a handful of things, like set up source mapping, updating process.envWe set up a dev server, and then we check to see if we're in production. Then we will perform a handful of things, like set up source mapping, updating process.env to be production, and then doing uglify, which will do some minification and things of that nature. Okay, yeah, a little overwhelming. Just ignore it for now. When you need to modify this, you can do the research. But until then, just think of it as some magic that can happen behind the scenes. So now, at this point, let's install our project dependencies, or again, you can run yarn if you have that set up. Run Dev Server Hot Reload 5:15So now, at this point, let's install our project dependencies, or again, you can run yarn if you have that set up. And that's going to read this file and pull in all of our dev dependencies. Now while we're waiting for that to finish up, I also want you to take a look at these npm scripts. This is kind of a convenient way to set up quick aliases for things related to your project. So in this case, we can see one for dev and build. Dev's the one we care about. This is how we're going to boot up our server. So we set the node environment to development, we boot up webpack dev server, and then weThis is how we're going to boot up our server. So we set the node environment to development, we boot up webpack dev server, and then we also specify that we want hot reloading, which is pretty cool. I'll show you what that means in a minute. So let's do it. npm run dev. Run the build script called dev. All right, so this is what it opens up. Now let's just modify it. Let's do something like this.Now let's just modify it. Let's do something like this. In app.view, let's just duplicate this a few times. Now when I save this, because we have hot reloading set up, it's going to do that on the fly without having to refresh the page. In fact, let's put these side by side. There we go. Anyways, let's bring it back to how it was before, save, and you'll see it update in the browser. And this is a really nice workflow, especially if you're building an SPA. Build a Message Component 6:21the browser. And this is a really nice workflow, especially if you're building an SPA. But yeah, you're not going to use any of this for your own projects, so what you could do is close that out. Next, all of the styling, of course, was specific to that little example, so you could remove that as well. And then finally, clear out your data. And this is what you're left with, your template, your script, and your styling. Why don't we finish up by setting up a quick message component, requiring it in, and then displaying it in our template.Why don't we finish up by setting up a quick message component, requiring it in, and then displaying it in our template. Okay, so we want to do something like this. We'll say message, hello there. And then, we'll now set up a new folder. You can call this anything you want, but I call it components, and we want message.view. Notice the .view syntax. Okay, so if we think about this, we have our template. And by the way, I have the view component syntax highlighting installed. You can do that by doing install package, and then looking for view component.And by the way, I have the view component syntax highlighting installed. You can do that by doing install package, and then looking for view component. There should be one for Sublime, for Atom, probably for most editors at this point. Okay, so we have our template, our script, and then finally the styling. And I will remind you, if you don't like the idea of your styling being put here, you can do it traditionally. You don't have to do that. And even if only for the template and the script, I think you'll get a lot of use out of this. Okay, so we're going to export default our view component.of this. Okay, so we're going to export default our view component. And that way, in our app.view, we can import that. Import message from components, message.view. Now we want to use it like this, right? So if we come back, maybe we'll have, we don't have any styling here, but we'll give it a name of box or something, and we'll say is info. And then we'll have a section for the slots, whatever the user types in to that area. So remember, that would be hello there in this case. And maybe we'll wrap it within a paragraph tag.So remember, that would be hello there in this case. And maybe we'll wrap it within a paragraph tag. Okay, next, we could have styling here for a quick little box. Background is gray, padding is 10 pixels, border is one pixel solid, darker gray. And you know what? That's fine. Now, if we switch back to app.view, we're importing that, but we're still not seeing it show up. And that's because, well, we required it, but we did nothing with it. And because this isn't a global view component, well, once again, we created it, but we didn'tAnd that's because, well, we required it, but we did nothing with it. And because this isn't a global view component, well, once again, we created it, but we didn't do anything with it. Let's tell our root component that it's list of child components. We haven't reviewed this yet. But one of them will be message. Now if we save it, there we go. We have our message component, and you can do this as many times as you want. Maybe we'll give it some margin bottom here. There you go.Maybe we'll give it some margin bottom here. There you go. Okay, so do you see the basic shape that this takes? You define your template, you import any components that app requires, and then you nest them here. You can still reference any data as always, but now your message component can be contained within its own file. And now here, once again, if it has its own data or behavior, you would nest all of that here, as well as any styling that you want. Okay, so that'll do it for this intro.here, as well as any styling that you want. Okay, so that'll do it for this intro. We'll keep talking about this, so don't feel too overwhelmed. Just get excited and play around, and I'll see you in the next episode.
