How to install vue js and create vue project with vue cli

Whatsapp

https://www.fundaofwebit.com/post/how-to-install-vue-js-project-with-vue-cli

How to install vue js and create vue project with vue cli


In this post, you will be learning how to install and run the vue js project with Vue CLI. So, Let's get started.

Step 1:  Creating a Project | Vue CLI

Download and install Node.js and NPM Package in your system.

When you download your node.js and install it, your npm package also install's with it.

Let's check the node and npm is installed or not in your system. Open your terminal and check with the following command.

To check the installed version of node js:

$ node -v

To check the installed version of npm:

$ npm -v

Node Js requirement: Vue CLI requires Node.js version 8.9 or above (v10+ recommended).


Step 2: if you have already installed the npm, so please update to latest version.

$ npm install npm@latest -g

OR

$ npm i -g npm


Step 3: After nodeJs and npm successfull installation. If you have Vue Js installed already, you can check the vue version by the below command:

$ vue --version
$ vue -V

Warning regarding Previous Versions

The package name changed from vue-cli to @vue/cli. If you have the previous vue-cli (1.x or 2.x) package installed globally, you need to uninstall it first with:

$ npm uninstall vue-cli -g

OR

$ yarn global remove vue-cli


Step 4: Let's Install the Vue CLI by the following command:

$ npm install -g @vue/cli

OR

$ yarn global add @vue/cli


Step 5: After vue installation, You can verify that it is properly installed by simply running command as follows:

You can check the installed version with this command:

$ vue --version


Step 6: If you have an older version of Vue CLI installed in your system, you can update it by the following command:

$ npm update -g @vue/cli

OR

$ yarn global upgrade --latest @vue/cli


Step 7: Let's create a project in Vue Cli by following command:

$ vue create my-vue-app


Step 8: Let's run the project by the below command.

cd my-vue-app
$ npm run serve


That's it. your project will be started at: http://localhost:8080/

Thanks for reading.

© Copyright - 2018 - 2022 | All rights reserved at Funda of Web IT