Installing Vue CLI - Vue.js Tutorial

- [Tutor] The best way to work with Vue components is by defining them in files with the dot Vue extension and these are known as single file components. Here's a component called hello, defined in its own file as shown in the Vue guide. Browsers can't natively support such files so they need to be compiled to JavaScript with a build tool like Webpack or Vue CLI or command-line interface which can configure Webpack for us and make the whole build process a lot simpler. Vue CLI is a mature system for rapid Vue.js development and it makes it incredibly fast to scaffold and configure a project that can make use of single file components. From the Vue guide, you'll find links to the Vue CLI docs in a few different places. One being the ecosystem menu up here. If I go down and click on Vue CLI and then click get started, I can click installation in the left-hand nav here. I'm going to be using the NPM package manager provided by Node.js. So I'm just going to copy this first command here. And if you don't have Node.js already installed on your machine, head over to node.js.org and download and install the latest LTS or long-term support version for your platform. Once that's taken care of, you should be able to install UCLI on your command line of choice using the NPM package manager, that's included with Node. I'm on a Windows machine using vs code. So, I'm going to open up a terminal with Control + backtick and then I'm just going to paste that command that I copied from the Vue CLI docs. I'm not going to talk about any of the initial output here because it's likely different on your machine. But once this is finished installing, we can tell that we've successfully installed the correct version if I go back to the Vue CLI docs and click on GitHub in the upper right. I can see on the right side that the latest release is four dot five dot 11. So again, on the command line if I do Vue dash dash version, I should see that same version four dot five dot 11 and I do. So next we'll go ahead and create a project with Vue create and the name I'll give it is flashcard dash app. There's a lot of options here especially if you look at manually select features, but for now we'll use the Vue three preview preset. And then when this is finished scaffolding the project we're given some helpful instructions for starting a lightweight development server. So let's change to that directory. CD flashcard app and then we'll execute NPM run serve. And as long as you don't have another web server or some other process that's using port 8080, you should see these links. Also note that if we wanted to deploy this to a production server, we would first want to execute NPM run build as it says here, and that would create a dist directory containing an optimized version that would work on any web server. But for now, if we just click on this local host one, we should see that we're up and running on the Vue dev server. So to get a sense of how all of this works with the local development server, we can start in our flashcard app directory with index dot HTML in the public directory. You see here, the div with ID app, just like we had in the other version, you won't see any script tags on this HTML page because the development server will just automatically inject them as it says in this comment here. Obviously that's not going to work if you plan on deploying this to a server that's running Nginx or Apache and serve up this HTML file. So you would want to run that NPM run build command as was already suggested in the console output. So to understand the JavaScript, our entry point is going to be in the source directory, main dot js. This is similar to the way we mounted our app before but instead of defining an options object here, we're importing it from app dot Vue. So let's go there next. In the same source directory, app dot Vue is our first look at a single file component. So we can call this the root component of our Vue app. It's sort of like the route Vue instance that we defined in our options object previously, only this time, it defines its own template within these template tags here, instead of with those messy strings. And that allows us to take full advantage of IDE syntax highlighting. And then we also have an optional style element down here. Notice it's also importing a child component, hello world, which it uses in its template up here. We'll talk a little bit more about what's going on in this file in the next video, but for now I want to show you one nice feature of the development server, which is automatic reloading. So if I were to line up my IDE and my browser side-by-side and then just change this message prop here, instead of welcome to your Vue.js app I'm going to just say flashcard app. You can see that the browser refreshes automatically so I can see the change right away. This is a really nice way to work and iterate on your projects. In the next video, we'll go through the exercise of creating a simple component and integrating it into our app.