Welcome and overview of the Vue CLI
Hi campers and welcome to your 17th Vue.js tutorial. In this video I want to show you how to set up Vue projects using the Vue CLI. CLI just stands for command line interface, but do not let that put you off. It is really simple to set up and I'm going to walk you through every single step along the way.
So then why on earth am I going to want to set up a Vue project using this CLI? Well it allows us to create a development environment workflow with webpack and that is really cool straight out the box. We can then use ES6 features, that is new JavaScript features, such as import statements which we're going to be using for the rest of this series.
Benefits: bundling, single-file components, and live reload
That's really cool. Secondly, it's going to allow us to compile and minify our JavaScript into one single file. So instead of having separate JavaScripts for different sections of our web application, we can just compile and minify all into one file, significantly reducing our loading speed.
We can also use single-file templates for different sections of our web application and we're going to delve into that in much more detail later on. So just bear with me with that one. It allows us to compile everything on our machine as well and not run in a browser to compile it before we see it, and also we're going to make use of a live reload development server.
Installing prerequisites: Command Line and Node.js
Now to install the Vue CLI we're going to need a command line tool. You can use the one that's already installed on Windows but I'm going to use Cmder — I do not know how to pronounce this — it's really cool and free so I implore you to download it as well. You can get that from cmder.net.
Secondly we're going to need to install Node.js because we're going to use npm, the Node package manager, to install the Vue CLI. Just click on this button down here to install version 6.10 or this one if you want the latest version. Go through the installation steps and that should install on your computer. By the way, if you don't know Node.js don't worry, we're not going to be doing much Node.js at all. We're just installing this for npm so it can install the Vue CLI.
So install that, then you want to open up your command line tool and to make sure you've got Node installed on your computer you can type node -v. You should see it throws back a version number right here. If it doesn't then you've not got it installed.
Installing Vue CLI and creating a project
Once we've done that let's head now to the GitHub repository for Vue CLI. I'm going to leave this link down below so you can read all about it. You can see right here the prerequisite on Node.js and we've just installed that. This is how you install something on npm: npm install -g vue-cli. This will install the Vue CLI on our computer.
Copy that and come to your command line tool again and paste it in, hit enter, and that's going to install the Vue CLI. Okay cool, so now we've installed the Vue CLI and we can use the Vue CLI now to create new Vue projects.
The first thing I'm going to do is navigate into the directory where I want to create this project. You can say cd and then the name of the directory, and if you want to go up a directory you can say cd .. So I'm in my websites at the minute. If I say cd .. it goes up a level. If I say cd my-website now it goes into that directory. I'm also going to say cd recording because that's the folder where I want to create this project.
Choosing a template and initializing the project
Let's check out the Vue CLI GitHub and see how we create a new vue-cli project. We say vue init and then the template name which we want to use. The template name is one of these down here: webpack, webpack-simple, browserify, browserify-simple, or simple. We're going to use the webpack-simple template.
This sets up a Vue.js project using a simple webpack configuration. So we'd be saying vue init webpack-simple . I'm going to say vue init webpack-simple and then our project name. Our project name is going to be vue.js-playlist. If I click enter now this is going to create that new project for me. It's going to ask me a few different questions: project name, description, author — the suggested answers are fine so just press enter. Do you want to use SASS? No, not in this occasion. That's going to create this project for us.
Installing dependencies and running the dev server
Now it's saying to get started we want to go into this directory first of all using cd, then we're saying npm install to install all of the dependencies that we need, and then to run the project we say npm run dev. So first of all let's say cd vuejs-playlist and press enter. Then let's say npm install.
Okay so that's all of the dependencies installed as well. Finally it told us to run npm run dev and this is going to spin up a local dev server now for us and serve our files. You should see something like this pop up in a browser which is some kind of placeholder project that they've created for us. That's what happens when we create a new project using Vue CLI.
Exploring the generated project structure
Now let's have a look what happens in the file system. I'm going to open up this vuejs-playlist. It's created and you can see all of these different files. First of all this node_modules folder — this just contains all of the dependencies; don't really need to worry about this at all. These are the things we've just installed using the command line tool.
Second of all we have this src folder which is where all of our source code is going to go. We're going to look at that in the next tutorial. Then we have a .gitignore file which is just going to ignore some files for us and we have our index file which is the file which is served up to us. You can see this div with an id of app right here. This is going to be for our Vue instance, you know where it controls a certain area of a web page. All of this is being controlled now by the Vue instance and we're going to take a look at that in the next tutorial.
This right here is the JavaScript that is being served to us in the browser. This is the JavaScript which is running all of this kind of application and you might think, 'Well hang on, this is coming from the dist folder and then build.js but I do not see that over here.' Because we're running in development mode all of this is happening behind the scenes so it's not going to show here. But when we compile our files for production we will get a distribution folder which we can use to push to a server. Right now this is just happening behind the scenes so don't worry if you don't see it over here on the file listings.
Next we have our package.json file which contains information about our project, all of the different dependencies we have installed, and we also have a README and a webpack config.js file. This webpack config file is basically doing all of the bundling for us. It allows us to use ES6 features and things like that. There we go — that is how we create a new project using the Vue CLI. In the next tutorial what we're going to do is go into this src folder and take a look at these different files which are the bones of our Vue application.
