Creating a Project with Vue CLI

Now that we have introduced the Vue CLI and its templates, let’s now go ahead and install the tool. Node.js is required for installing Vue CLI, which you can get at nodejs.org. We won’t need it because we will be using Node.js itself, though, but because we will be using its package manager, NPM. If you are not familiar with NPM, then it is the de facto standard for managing a JavaScript project’s dependencies. It will be installed together with Node, so if you haven’t already, then go ahead and install it. Both of the versions that you see on the website are fine, but usually you will want to go ahead and install the newest version. Simply download the installer and follow the instructions.

You also need to have Git installed because Vue CLI performs a checkout from Git. If you are on Mac, then you already have Git installed, and otherwise the installation instructions are a simple Google search away. So if you head to Google, you can simply search for “install git” and click the first result. There you will find the installation instructions for the various different operating systems.

Once that’s done, it’s time to open up your terminal or command prompt if you are on Windows. The reason why we needed NPM, is because that’s how we will be installing Vue CLI. To do that, simply write:

npm install -g vue-cli

Note that if you are on a Mac, then you need to enter sudo at the beginning of the command, to grant NPM permission to install Vue CLI globally on the system. That would therefore make the command sudo npm install -g vue-cli. You may also have to do this if you are running Linux.

Once you hit the enter key, it will take a short moment to install Vue CLI. When the installation has completed, you can now use the CLI tool by simply writing vue, followed by the command. In our case, we want to use the init command to create a new project.

As discussed in the previous post, we will be using the webpack-simple template in this series. The next thing we need to enter, is the project name.

vue init webpack-simple sample-project

A directory matching the project name has now been created, so let’s navigate to it, because we are not done yet.

cd sample-project
ls -al

The Vue CLI has now added a bunch of files and directories for us. Among these files is a package.json file, which is a JSON file describing our project’s dependencies. This file is used by the NPM package manager. We will take a look at the contents of this file in the next post, but for now, let’s just go ahead and install the project dependencies. This is as easy as writing:

npm install

Notice that since we are not installing anything globally, you don’t need to use the sudo keyword here if you are on Mac or Linux.

Now that’s done, we are actually ready to open our project in a browser. But since we are building the project with webpack, we can’t just open up the HTML file in the browser. Instead, the template that Vue CLI provided us with, contains a command within package.json that builds the project as well as runs a development server. On top of that, it also automatically rebuilds the project whenever we change files, which is very convenient when we are developing.

To run the project, simply write:

npm run dev

If you open up your browser, we should see the default page appear when navigating to http://localhost:8080.

And with that, it’s time to take a closer look at the files and directories included in the project template.