Merge pull request girlscript#537 from RIYANSHGARG/Frontend_Web_Devel…

…opment_React_Angular_Vue/ Installation using NPM and about Vue CLI

 Installation using NPM and about Vue CLI

Frontend_Web_Development_React_Angular_Vue/Vue/Week 1/Installation_of_Vue.md

@@ -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.