Learn how to create an Application with Vue.js in three simple steps

Today we will learn how to create an app with Vuejs. This framework is pretty powerful and easy to learn for new developers. Vue.js is an open-source Model–view–ViewModel JavaScript framework for building user interfaces and single-page applications.

We start our journey with three simple steps:

The first step: install differents tools to develop in Vuejs.

The second step: implement an application.

The third step: Deploy the application on the cloud.

First step Preparing your environment to work

Ok, We are ready to action we start with the task obtain all the tools to achieve working in our environment. Mainly we need Vuejs also the client Vue and one IDE to programing. In this case, I prefer Visual Code as IDE to develop.

Execute the following command from a terminal:

$ npm install vue

Now we should add the client vue also from a terminal:

$ npm install -g @vue/cli

Also, we need a reliable tool for debugging the app. One excellent option is the extension Vue.js devtools of browser Chrome we can download this link: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en.

Finally, to finish the first step, we download the IDE Visual Code to programing. Here the link https://code.visualstudio.com/download.

Second step Time to develop

In this step, we create the application with the client, and then we should type the following command in the terminal:

$ vue create appvue

The client will generate all structure our project in Vuejs, in the process, we shoulds chose different options to complete the initial setup of the application.

After that, We deep in develop the app. The main idea is developing CRUD (Create, read, update, and delete); more specifically, we programing an app to a pet store, where we have a list of pets, and we can create new pets, also update and delete.

We have the structure of our project in Vuejs. I will explain how is it built. Then this way, I summarize the construction of the project.

What is this about, the project has four folders:

1. dist: contains compiles for production.

2. node modules: Where are all dependencies of the project.

3. public: Here is the file index.html.

4. src: Folder as contains different folders of the project, for example :

Assets: images of the app.

Components: components create in-app.

Router: handle navigation of the application.

Store: It serves as a centralized store for all the components in an application.

Views: This folder holds views.

The pet store we can input new members and update your data also watch the list complete of pets, and delete members. In our project, we have in the folder views two components home.vue and about.vue these views show the full functionality of the pet store.

The more important component is home.vue because this has all the logic of our program. Now I will explain this component in deep. All component vue has three parts: the first we are coding the view of the page; that is where we put code HTML between tags

#Vuejs #Vue #JavaScript #WebDev