Vue Js Introduction

Posted on  by admin

Vue is a front-end JavaScript framework that helps us quickly create user interfaces.

It is more lightweight and beginner-friendly compared to other frameworks such as React or Angular.

Handling User Input

The core library of Vue focuses on the view layer only, which is the part that the users can see.

That is also why the author named the framework Vue (pronounced like view). You can download the source code for this tutorial here:. To set up a Vue project, the recommended way to do it is by using npm and Vue CLI.

The project can be easily configured with the following commands:. If you are having permission problems, try using sudo. The last command will start a development server at the root of our project. If that fails, it is probably because the version of Nodejs you installed is not right, try installing the LTS version (currently v16).

If everything is successful, it will prompt you something like this:. Go to http://localhost:8080/,. Before we start, let’s take a look at what has been installed into our project folder. There are a few things we are already familiar with. The node_modules contains the packages we installed.

The public folder contains the files and resources that we wish to make public. The package-lock.json and package.json files are both for managing packages, and the index.html file is the start point of our project. For this tutorial, we’ll only focus on the files inside the src directory.

The assets folder stores the images, CSS files and other resources. The main.js file mounts and configures all the Vue apps in our project, and it is also the script that we import into the index.html file.

The App.vue is the actual vue app, this is where we do most of the coding. However, sometimes the app gets too big, it makes more sense if we divide the app into multiple components, we'll store these components inside the components folder.

We’ll take a closer look at what happens when you go to http://localhost:8080/. Let’s start from index.html, and notice what we have inside the tag.

The only line of the code that matters is

. Let's go to main.js. This file imports the vue app, and mounts that app to the HTML element with. Recall that # represents id and . represents class.

This is why that

element is so important, even though it is empty. Next, go to the App.vue file:. We immediately see that the file is divided into three sections. The