Getting started with vue-cli

To get started, first install some software, Node.js downloads for all platforms are available here, and VSCode is available for Mac, Windows and Linux from here.

Once node is downloaded, we can install the Vue.js cli, open up a terminal and enter the following:

npm install -g @vue/cli

If you are running on linux you will need to prefix the command with sudo, and you should see output similar to this.

This command has installed the vue-cli on our machine as a global (hence the -g) package. This means that the “vue” command is available from the command-line. Try it now…..

Now we can use the init command to generate our web application from a template, we will use the webpack-simple template however you do not need to know all about webpack (which is a module builder and a complex topic in its own right) as vue-cli will handle that for you.

vue init webpack-simple my-vue-app

Entering the above command will begin the process of creating a new vue application. It will be created in the directory my-vue-app, you just need to wait for the template to download then answer some configuration questions, it is safe to leave the default answers for now.

Once installed, cd into the new directory and enter:

npm install

npm run dev

These command instruct npm to download all the dependencies your project needs and then launch your application. At this point your terminal should look something like this:

And hopefully your browser will have opened at http://localhost:8080 with a nice welcoming page full of essential links. Congratulations! You have created your first web application with Vue.js.