Life is easier once you learnVue.js

Vue.js is one of the popular web frameworks that people use to develop websites. Today I will explain what Vue.js is, teach you how to use it from the beginning, and understand the concepts. Everyone can create their own website using Vue.js.

Let’s start, what is Vue.js?

Vue.js is a progressive framework designed to manipulate UI, with the main Core library focused on the View Layer only. Can be used at any part of the website, or can be used with the entire website in the form of Single Page Application.

Getting Started with Vue.js using Vue Cli

What is Vue Cli?? It’s a set of instructions that will allow us to build a project with Vue.js and bring all the necessary tools and libraries to use for us. Without having to chase downloads yourself, it has a variety of templates, each with different dependencies.

Today, we will use a template called “webpack”, but if anyone wants to know what template it has to use, click

But before we start building a project, let’s install Node.js (npm) first. If you don’t have one yet, go ahead and download it. Click

You need to install -g as well so we can use cli command to set up the project.

Setup Project

The command to create a project with vue cli is vue init, followed by the name of the template, followed by our project name.

First of all, open cmd and then create or find a folder where we want to put our project inside.

After we pressed enter, cli will allow us to set up the project which will be detailed as follows

• Project name
• Project details
• The author
• Build Setup (first one)
• Will I use vue-router? (If SPA must use)
• Will I use ESLint? (Unknown ?? click)
• If using ESLint, choose which standard to use.
• Will the Setup Unit Test or not?
• Will Setup End 2 End Test?

Then a folder will appear as our project name, which we cd into and npm install.

For those of you who are new to npm. Take a look at the package.json file, it will tell you what dependencies are in our project, which npm install command will install all these dependencies. Then, when the installation is complete, let’s try and see if our project is really working or not…

That’s it for the Setup Vue.js Project if anyone has a web page that pops up as below. Shows that every step is correct, complete, and ready to implement.

Vue Project

Project Structure

Let’s see how the Vue Project is structured.

assets — This is a folder where you can store assets such as images.

components — All our components repository. (We may organize it into sub-folders )

router — router storage, we can add-delete routes here.

App.vue — Our main component file is like a container that covers all of our applications.

main.js — main JavaScript file that uses the set up vue and init vue instances.

Vue Component (.vue file)

let’s take a look at the details of the Vue Component.

template — the part for our HTML.

script — the part for our JavaScript.

style — a section for css, which if we add scoped to <style scoped> </style> css inside this tag will all be displayed for this component only.

The important part of the script is that it will export instances that control all the functions of our component and contain two things that you need to know for these instances.

Lifecycle Diagram

You can see that at each point of the cycle there is a hook function that we can write to. So that it can do something Before it goes to the next point of the cycle.

The ones that we use regularly are created, mounted, beforeDestroy, destroyed. For this part, we must know for future use in various functions.

Options

The second part is options that will help us manage the performance of our component, with some of the more important options listed below.

data — component state, or more simply, the variable that component holds.

methods — well, normal JavaScript function.

components — If that component calls another component it must be registered in this option.

props — if that component is inherited from the parent component.

This blog is starting for those who are interested in writing Vue.js, this is just a basic Overview, there are still a lot of other parts that have not been mentioned. I hope that this blog will be an idea for many people to build upon. You can research further. If you have any concerns or want to know more about Vue.js.