How to set up your first Vue app with CLI

Vue is a JavaScript progressive framework that is used for building user interfaces. It can be installed using a CDN or using the command-line interface.

In this article, I will be showing you how to set up and build your first Vue app with CLI(Command Line Interface) without breaking a sweat.

Prerequisite:

Basic knowledge of Command-line

Create your Vue app with the following steps:

Open up your command terminal interface(CLI) e.g Command prompt or git bash and navigate to the folder you want to create your project in. You can do this using:

  cd ./path-to-folder

When you are in that folder, install Vue using:

 npm install -g @vue/cli

This would install Vue globally in your PC.

Note: You just have to do this once. Subsequently, you can just proceed to the next step because you already have Vue installed on your PC.

To create your app :

vue create app-name

This would create the app with the default Vue template. The name of my sample app is shopping-cart.

You would be asked to choose a preset, there are currently 2 defaults with Vue 2 and 3 respectively and a manual selection option which I believe has the basic setup you need, choose one according to your need. You would also be asked to choose a package manager(NPM or Yarn). After these selections, your starter app would be created for you instantly.

Redirect into the new folder Vue created for you. This folder is the name of your app.

cd app-name

You can now run your app in your browser using npm run serve

This app will run your development server on http://localhost:8080/ or http://192.168.43.124:8080/.

And voila! you can now create magic with Vue.

I wrote this article to save the next person from going through all that stress that I went through while building my first Vue app, I hope you find it helpful. Share and comment if you did!

References: