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 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:
Cover Photo by Joshua Aragon on Unsplash