/vjs-ih-srr-repository

Primary LanguageJavaScript

Vue Conforcat Class

Este repositorio sirve como una guia para la clase de FE Dev - Vue Conforcat. Done estaremos apendiendo acerca de HTML, CSS3, Javascript, Vue & Supabase.

Creado con ❤️ por Diego Zito

Quote of the class

Link a Zoom

Zoom Link

Estructura de Carpetas

Table of Contents

Links de Ayuda

Comandos de Git

Sigue estos pasos para hacer cambios en tu repositorio:

Para subir tus cambios al stream de git tienes que añadir tus cambios recientes mediante el siguiente comando:

Añadir todos tus cambios:

git add .

Añadir cambio individual por nombre de archivo:

git add "nombre de archivo ej: 01-bsaic-layout.html"

Añadirle un comentario al commit que estaremos empujando a tu repositorio en la web.

git commit -m "Texto descriptivo de los cambios recientes"

Empujar los cambios recientes a tu repositorio en la web. Extended.

git push origin "nombre del branch/rama que estaremos apuntando"

Empujar los cambios recientes a tu repositorio en la web. Simplified.

git push

Combinations - Git

Combination #1 - Extended

Hace una combinacion de git add commit push usando estos comandos de git y usando un un operador logico AND con el syntax &&

git add . &&
git commit -m "Texto descriptivo de los cambios recientes" &&
git push origin "nombre del branch/rama que estaremos apuntando"

Combination #2 - Simplified

Hace una combinacion de git add commit push usando estos comandos de git y usando un un operador logico AND con el syntax &&

git add . &&
git commit -m "Texto descriptivo de los cambios recientes" &&
git push

Ver los branches asociados al repositorio.

git branch

Hacer un pull de los ultimos cambios de un repositorio git en gitHub a tu repo local

git pull origin "nombre del branch/rama que estaremos apuntando"

Shortcuts (Atajos de teclado)

Los atajos de teclado hacen que seas más productivo y feliz. En general son como ese buen amigo del que te puedes fiar no para que haga su trabajo, pero sí para que te lo haga menos pesado.

Aprende a usarlos, pero tampoco pierdas la cabeza. Con que te centres en los más comunes ya ganarás mucho.

  • Guardar archivo en VS Code. Windows: Control + S. MAC: Command + S
  • Plegar y desplegar la consola. Windows: Control + Ñ. MAC: Shift + command + C
  • Plegar y desplegar la jerarquía. Windows: Control + B. MAC: Command + B
  • Colocar una ventana en la mitad derecha/izquierda de la pantalla. Windows: windows + derecha/izquierda. MAC: Spectacle
  • Navegar entre ventanas. Windows: alt o windows + tabulador. MAC: Command + tabulador.
  • Navegar por un texto.
    • Windows:
      • Control + flecha de dirección -> Salta hasta el próximo caracter especial
      • Shift + flecha de dirección -> Selecciona los caracteres sobre los que pases con el cursor.
    • MAC:
      • Command + flecha de dirección -> Salta hasta el próximo caracter especial
      • Shift + flecha de dirección -> Selecciona los caracteres sobre los que pases con el cursor.

El resto de atajos te recomendamos que solo los aprendas cuando veas que los necesitas. Échale un vistazo por encima a las listas para que por lo menos te suenen y sepas que existen, pero no gastes tiempo en aprender algo que jamás usarás.

Si quieres saber más, visita los siguientes enlaces.

Windows shortcuts Windows VS Code shortcuts

MAC shortcuts MAC VS Code shortcuts

VUE INTRO

Que es Vue?

Vue.js es un framework JavaScript de código abierto para desarrollar aplicaciones web interactivas y user-friendly. Fue diseñado para ser fácil de usar y ofrece una gran cantidad de características para crear aplicaciones sofisticadas, incluyendo un enrutador, un gestor de estado, un sistema de componentes y herramientas de testeo. Con su enfoque en la eficiencia y la facilidad de uso, Vue ha ganado una gran popularidad entre los desarrolladores web.

Component Driven Development Approach

Component Driven Development en Vue.js significa desarrollar aplicaciones mediante la creación y composición de componentes reutilizables. Cada componente es una parte pequeña y específica de la aplicación que maneja su propia lógica y presentación. Al combinar estos componentes, se puede construir una aplicación completa y escalable. Es similar a construir un edificio con bloques de construcción: cada bloque representa un componente y al juntarlos se forma un edificio completo.

Analogia:

"Podemos comparar Component Driven Development en Vue.js con la construcción de una casa de acero y vigas. Vue proporciona un marco sólido y resistente que permite construir aplicaciones eficientes y escalables mediante la creación y composición de componentes reutilizables. Cada componente es como una pieza de acero y vigas que se combinan para formar una estructura fuerte y duradera.

Por otro lado, JavaScript Vanilla es como construir una casa de madera. Es una tecnología más básica y no proporciona un marco estructurado para construir aplicaciones, por lo que se requiere más esfuerzo y habilidades técnicas para lograr un resultado eficiente y escalable."

VUE Project Installation

VUE CLI

Para poder crear un projecto desde tu terminal solo tienes que seguir estos pasos:

npm init vue@latest

Sigue los pasos de este gif para que puedas instalar un proyecto sencillo de la ultima version de Vue que trabaja en conjunto con Vite. Una libreria de ayuda al framework.

Ver el video: Vue CLI

Para poder seleccionar entre YES o NO entre las varias opciones que te presenta el cli de Vue puedes moverte con tu teclado con las teclas de izq o der y elejir con la tecla de enter o return.