How to install vue js using CLI?


First you have to install node js in your system. you can check Node js installed in your machine or not. Open command prompt and run the below command. By using the below command you can check node version in your machine.

node -v

Output:

v14.15.4

After that you have to install vue cli:

npm install -g @vue/cli

Run the below command to check vue cli installed or not:

vue --version

Output:

@vue/cli 4.5.15

Run the below command to create a Vue project

vue create vue-demo-project

Output: choose any one option from their

? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)
Manually select features

If you choose first two option from their its mean vue js direct installed in your local machine. After than you have to go inside vue project folder and run below command to run vue project.

npm run serve

Output:

- Local: http://localhost:8080/
- Network: http://192.168.246.205:8080/
Open this link in browser.

Your vue js project will have been installed successfully. Then it will be look like that below image.

If you will choose: Manually select features then you can output like below

Manually select features
? Check the features needed for your project: (Press space to select, a to toggle all, i to invert selection) 
>(*)Choose Vue version 
(*) Babel 
( ) TypeScript 
( ) Progressive Web App (PWA) Support ( ) 
Router 
( ) Vuex 
( ) CSS Pre-processors 
(*) Linter / Formatter 
( ) Unit Testing 
( ) E2E Testing

You can choose as per your need. then click Enter . After click on Enter button will you can see and choose the sversion of vue.js App

? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors,
Linter, Unit, E2E ? 
Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x 
3.x

Choose one of them and Click Enter.

Use class-style component syntax? (y/N)

Press yes or y.

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)

Press yes or y.

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

Pick a CSS pre-processor.

>Sass/SCSS (with dart-sass) 
Sass/SCSS (with node-sass) 
Less 
Stylus

Pick a linter / formatter config:

ESLint with error 
prevention only ESLint + Airbnb config 
ESLint + Standard config >
>ESLint + Prettier TSLint (deprecated)

Pick additional lint features:

(*) Lint on save 
>(*) Lint and fix on commit

Pick a unit testing solution: (Use arrow keys):

> Mocha 
  Chai Jest

Pick an E2E testing solution:

> Cypress (Chrome only) 
Nightwatch (WebDriver-based) 
WebdriverIO (WebDriver/DevTools based)

Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys):

> In dedicated config files In
package.json
> Save this as a preset for future projects? (y/N)

Press Y. After that project start to creating.

Now complete vue js projuct download and you can run on browser using below command.

1. npm run serve
http://192.168.29.215:8080/