Get Start with VueJS, for absolute beginners

VueJS is most light weight and easy framework for JS beginners.

VueJS is a hot topic right now, which isn’t terribly surprising. The developers behind VueJS have an open mind and while not always helpful, they joined the party late. VueJS has taken the good parts from other JS frameworks like Ember, React and Angular to create a framework that has the best features of each.

Machine Setup Instructions:

Follow these steps to setup your machine for Vue Development. You may ignore individual step, if already done.

1. download the NodeJS on your machine and install with default settings:
   https://nodejs.org/en/download/

NodeJS will ease the project management and provides a runtime to execute JavaScript directly in your terminal.

2. Install Visual Studio Code:
https://code.visualstudio.com/download

A Free and most light weight IDE to write and manage the code for Frontend Development.

3. Open CMD or Terminal. Install Vue-Cli:
npm install -g @vue/cli
npm install -g @vue/cli-service-globals

npm is Node Package Manager, installed with node and used to manage the dependencies for your project.

Vue-CLI is a full system for rapid Vue.js development.

Bootstrap your Project:

There are two simple ways to create a VueJS Project.

1. Using Vue-CLI:

1. Move into a folder, where you wish to start your project. (using ‘cd ../../’)
2. vue create projectname | To create a new Vue Project with name.
3. cd projectname/ | To move into new created folder.
4. npm install | To install various dependancies.
5. vue serve OR npm run serve | To serve the project locally.
6. Open: http://localhost:8080 | To check live preview.
7. Run: vue build | To build optimised version of compiled Vue project. (Ready for Deployment: public/folder)

2. Using the GUI

Vue CLI may be little typical. Let do all this in a more simple way. You can also create and manage projects using a graphical interface with the vue ui command.

The above command will open a browser window with a GUI that guides you through the project creation process.

Open: http://localhost:8000/project/create

Get Organise your project:

1. Open the project folder with VScode. (preferred )
2. Look at files structure: src/folder is of your use.
3. Install this VScode extension for better workout on .vue files.
   https://marketplace.visualstudio.com/items?itemName=octref.vetur
4. Open Integrated terminal in VScode. (preferred )
   Follow these step to open the terminal:
   https://code.visualstudio.com/docs/editor/integrated-terminal
   Shortcut: CTRL + ~