Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FRONTEND WITH FRAMEWORK: VueJS-1.3 => Installation using NPM and about Vue CLI #537

Merged
merged 1 commit into from
Sep 18, 2021
Merged

FRONTEND WITH FRAMEWORK: VueJS-1.3 => Installation using NPM and about Vue CLI #537

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 86 additions & 0 deletions Frontend_Web_Development_React_Angular_Vue/Vue/Week 1/Installation_of_Vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
![](https://i.imgur.com/Zyy4Xtr.jpg)

# Installation of Vue.JS using npm

### Prerequisites

Must have Installed **Node.js** it contains :-

1. package manager
2. version manager
3. VS Code



### Installing Vue.js

**Step** 1 : Create a folder.

**Step** 2 : Open cmd (command line) in that folder.

**Step** 3 : npm install vue



To check the version that we have installed use command ***vue --version***.

# What is Vue CLI ?

It is a ***command line interface***.

Its is full system for rapid Vue.js development.

It basically targets the *standard tooling baseline for its ecosystem*. It ensures that various tools works smoothly so that developer can focus more on building the app instead of just spending time with configurations.

It Provides :

1. A **full Graphical User interface** to create and manage whole vue.js projects
2. Zero config rapid prototyping
3. project scaffolding
4. some runtime dependency like upgradable, Extensible etc.
5. create app with 1 command
6. plugin support(tailwind, electron)

# Installation of Vue CLI

Important : To install vue CLI. We have to use -g flag to globally install.

**step** **1** : npm install -g @vue/cli

In order to upgrade use command ***(vue upgrade --next)***

# Working on Vue CLI commands

**Step** 1 : vue create example

![](https://i.imgur.com/oofWaxE.png)

**step** **2** : Then you need to pick a preset and by default it is Babel and ESLint. Use arrow key to navigate and space to select.

![](https://i.imgur.com/vwEljD7.png)

**step** **3** : Choose how to apply linting.

![](https://i.imgur.com/3fahKrV.png)

**step** **4** : Testing choose one of two options for testing

![](https://i.imgur.com/889fmTS.png)

**step** **5** : vue CLI will ask where to put all configurations in package.jason or any other file.

![](https://i.imgur.com/IZWUg2G.png)

**Step** **6** : Vue CLI asks you if I want to save these presets, and allow us to pick them as a choice so that Vue CLI to create a new app.

![](https://i.imgur.com/bYbmABz.png)

**Step** **7** : It will ask You want to use yarn or npm.

![](https://i.imgur.com/r9mLYDN.png)

At end you will be all set to go and recieve this message

![](https://i.imgur.com/ymjAQCG.png)

And This is how we can work on Vue CLI.