Vue.js CLI Installation

In the last section, we learned the installation of Vue using CDN, Bower and NPM. In this part of the tutorial, we are going to learn how to install Vue using CLI.

Note that this type of installation is not recommended for beginners. This mode of installation is recommended for developers who are planning to build large scale applications. To start, remember that this requires NodeJS installed as well as the NPM. If you do not know how to install NodeJS and NPM, click here for a quick guide on how to do so in MAC and click here for Windows node and npm installation.

In your terminal type:

sudo npm install –global vue-cli

This command will download and extract the files for CLI. It might take a little time to download and extract the CLI resources. After installing the CLI, you can now create a project folder with webpack template by doing;

vue init webpack <project_name>

Once the CLI finished it’s initialization, open the folder you have created and you will notice different folder and packages similar to this;

vue.js cli installation

The next thing that you need to do is to install Vue and all of the dependencies. You can achieve this by executing npm install. You will then notice an additional folder named node_modules.

So what now? Now that you are done setting up all your environment deliverables, it is now time to execute the program. Type npm run dev. This command will automatically open your default browser and will visit localhost/8080/#  by default similar to the image below.

vue.js cli installation

Now that we have learned how to setup our environment, the next chapter will teach us how to launch our first app.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.