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