Table of Contents

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

    Rumman Ansari July 19, 2024 5,893 views
    How to Install Vue.js: A Step-by-Step Guide for Beginners

    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.