Introduce to Vue.js With a Simple Project

Vue is a progressive JavaScript framework used for building user interfaces (UIs) and front-end applications. Today, we discuss some basic stuff about vue.js

Photo by Yancy Min on Unsplash

Why Use Vue.js

• Makes creating UIs and front-end apps much easier
• Less of a learning curve than other frameworks
• Extremely fast and lightweight
• Build powerful Single-Page Applications
• Virtual DOM
• Growing in the industry

Look at the above picture, Today we build this simple ‘TodoList’ project with Vue.js. Let’s do it,

First of all, Need to set up the project environment. In my case, I going with the Vue CLI method. It provides an official CLI for quickly building Single Page Applications. To use Vue CLI you must download and install Node.js first. Then, open Node.js Command Prompt or CMD, select a folder then run this command.

npm i @vue-cli 

When you install Vue CLI, you can go further and create a project:

vue create ProjectName

If You can learn more about Vue CLI here. Well, let's open the VS code and open the project folder. Fine, all setup is done, let’s work with code.

Just look at the folder’s file all are almost the same on ‘React’ or Angular. If someone has previous knowledge of ‘React’ or ‘Angular’ then I think Vue is so simple for understanding.

Here, ‘App.vue’ is the root component that basically renders all those components. Look at this two screenshot

The whole ‘App.js’ component has three-part one is ‘Template’ the second one ‘Script’ and the third one is ‘Style’. If you look deep into it, I think you understanding some basic parts. Well, don’t worry, I am here to explain the whole process. The template portion is all about HTML stuff. Similarly, style is all about CSS stuff, and the middle portion ‘Script’ is the body part or main part of Vue.js. Cause all these complex functionalities are working with portion.

Well, let’s make the ‘Header’ component for our project.

Let’s create a Todo Component

In the todo component, we have a child component ‘TodoItem’ let’s implement this

Let’s add the final component, and that is AddTodo component

After creating all the components this project should like this.

For more details, visit the link.