Vue JS course codes - Programmer's Guide

Vue JS course codes - Programmer’s Guide

In this repository you can find the codes created along the Course of Vue JS, from the channel Victor Lima - Programmer’s Guide, on YouTube shared for free, in addition to other project codes that I am developing separately to study the tool.

In the classes of Victor Lima’s channel, Vue’s work was presented through practical examples.

We deal with:

• State management ( date );
• Issuance of customized events;
• Componentization, which favors the reuse of codes;
• Passing of props to specific components;
• Customized filters, which transform only the presentation of information;
• Computed properties , which is a resource to really transform data, being able to create new properties;

Tip:

How to create a project with the standard Vue js boilerplate (similar to the one obtained by running create-react-app):

## creates the boilerplate for the 
npx @ vue / cli create < project_name > project

applications

First application

The first application was created to show the most basic concepts of Vue. In it we do not care about aesthetic details, focusing only on presenting the code structure and possibilities of the tool.

The image below illustrates the application, which consists of a customer management system, where {name, email, age} are saved, later adding the id values ​​and a Boolean variable to indicate whether the user is premium or not.

The result can be seen in the image below.

Second application

In the second application, we will create a Pokedex consuming data from a public API that provides data for all Pokemons. To make requests, axios is used and to facilitate the stylization of the page we are using the framework known as bulma .

The result of this project can be seen in the image below.

Third application

Continuing on, I decided to create other applications to get used to Vue.js. The third application I decided to create was the clone on Vue’s own landing page .

Fourth application

The fourth application created was a system developed to understand Vuetify and Vuex , the first being a framework that provides a set of components already created and stylized, facilitating and speeding up the development of new applications, in addition to ensuring a unique style for projects with many members and the second a tool used to guarantee a more organized and centralized manipulation of states.

The goal with this project is to create a TO-DO App , that is, an application to list tasks and later mark those already completed (yes … very creative haha).

Although the algorithm is quite simple, the goal when developing this application is only to study the Vuetify frameworks in conjunction with Vuex , as mentioned earlier.

The result of this project can be seen in the image below.

At the end of this project, automated tests were developed for the project, using Jest to execute them. Tests were performed on mutations and actions in the Vuex store separately.

References:

[1] - Playlist with course lessons on YouTube

[2] - Vue.js Guide

[3] - How to Get Started with Vuetify

[4] - Vuetify Material Framework in 60 minutes | From Scratch to Pro in Vuetify Vuejs

[5] - Top Vuetify Tutorials

[6] - What is Vuex?

[7] - Vuex course on Scrimba

[8] - How to Test Your Vue Components Using the Jest Testing Framework

[9] - Testing Vue.js Applications, Edd Yerburgh .

Vinícius Gajo Marques Oliveira, 2020.

Download Details:

Author: 64J0

Source Code: https://github.com/64J0/curso-vue-youtube

#vue #vuejs #javascript