How to Install Vue.js: A Step-by-Step Guide for Beginners

Rumman Ansari   Software Engineer   2024-07-19 03:29:48   5817  Share
Subject Syllabus DetailsSubject Details
☰ TContent
☰Fullscreen

Table of Content:

Vue JS can be installed in three ways:

  1. Using CDN (the easiest way)

  2. Using NPM and

  3. Using vue-cli (the way you will be working)

Using Vue through CDN

  • As said before, using Vue through CDN is the easiest way.

  • The CDN link, https://unpkg.com/vue allows a developer to create Vue web-page instantly.

  • Using a script tag with src attribute as this link, allows one to use Vue JS functionalities.

Note: This method requires an active internet connection to work.

  

Installing Vue through NPM

In a system with nodejs and npm already on it, use the below steps to install Vue using NPM.

  1. To verify the nodejs and npm installation, run the commands node -v and npm -v.

  2. Create a project folder and change the working directory into it.

  3. To install project dependencies, package.json can be created using the command npm init -y with defaults for the prompts.

  4. To install Vue using NPM, use the command npm install vue --save.

Installing Vue through vue-cli

In a system with node and npm already installed, install vue-cli with the below steps:

  1. Install vue-cli using the command npm install -g @vue/cli.

  2. To create a project named using vue-cli, use the command vue init webpack sample.

  3. Choose the defaults or appropriate options for prompts.

NOTE 1: Vue requires "npm" version to be at least 6.

NOTE 2: The "webpack" used when creating a project, refers to the development environment being used with Vue.



Stay Ahead of the Curve! Check out these trending topics and sharpen your skills.