Introducción

1

Fundamentos de Vue: Componentes y Desarrollo de Aplicaciones Web

2

Vue.js: Desarrollo de Aplicaciones Web Profesionales

3

Creación de aplicaciones reactivas con Vue.js y HTML

Rendering Declarativo y Manipulación de DOM

4

Renderizado Declarativo en JavaScript: Estado y Vista Sincronizados

5

Uso de Expresiones JavaScript en Plantillas de Vue.js

6

Directivas para Atributos Dinámicos en HTML con Vue.js

7

Directivas de Renderizado Condicional en HTML con Vue.js

8

Uso de la Directiva v-for en Vue.js para Renderizar Listas

9

Manejo de Eventos en Vue.js: Click y Mouseover

10

Condiciones y Clases Dinámicas en Vue.js

11

Estilos Dinámicos en JavaScript: Cambios de Color Interactivos

12

Propiedades Computadas y Watchers en Vue.js

13

Interacción dinámica con formularios y directivas en Vue.js

14

"Crear un Tracker de Cursos con Vue.js"

Sistema de Componentes

15

Sistema de Componentes en Fren Word: Modularización y Reutilización

16

Creación de Componentes Personalizados en Vue.js

17

Comunicación entre Componentes en Vue.js: Props y Data Binding

18

Comunicación entre Componentes en Vue: Emisión y Manejo de Eventos

19

Uso de Slots para Inyectar HTML en Componentes Hijos

20

Ciclo de Vida de Componentes en Vue.js

21

Componentes de Vue: Creación y Gestión Eficiente

22

Componente Modal y Componente Principal en Vue.js

Ambiente de Desarrollo

23

Configuración Profesional de Vue.js con Visual Studio Code

24

Creación de Aplicaciones con Dios CLI y su Configuración Básica

25

Componentes de Archivo Único en Vue.js

26

Comandos esenciales para proyectos con Vue CLI y configuración de entorno

Platzi Exchange

27

Instalación y configuración de Tailwind CSS en proyectos HTML

28

Creación y Gestión de Componentes VUE en Proyectos Web

29

Creación de Aplicaciones SPA con Vue Router

30

Uso de Fetch API para Interactuar con Servidores HTTP

31

Filtros y Directivas para Mejorar Interfaces en JavaScript

32

Creación de Rutas Dinámicas en Vue.js para Criptomonedas

33

Navegación Dinámica y Programática en Vue.js

34

Integración de Componentes de Terceros en Proyectos Vue.js

35

Manejo de Problemas de Reactividad en Vue.js

36

Filtros y Ordenamiento en Tablas de Datos con JavaScript

37

Implementación de Rutas Dinámicas y Conversor de Criptomonedas en Vue.js

¡A producción!

38

Publicación de Aplicaciones con Git y Netlify

Rendering Declarativo y Manipulacion de DOM

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Creación y Gestión de Componentes VUE en Proyectos Web

28/38
Recursos

¿Cómo estructurar nuestros componentes en Vue.js?

El universo del desarrollo web evoluciona constantemente, y una de las tecnologías que sigue ganando terreno es Vue.js. Al abordar la creación de componentes en Vue, es esencial aprender a organizarlos de manera eficaz para maximizar su rendimiento y mantenimiento. En esta guía, exploraremos cómo estructurar proyectos con componentes en Vue, combinando conceptos claves previamente discutidos.

¿Cómo comenzamos limpiando nuestro proyecto?

Comenzar un proyecto ordenado es la base para que el desarrollo sea más fluido. A menudo, al crear componentes en Vue, es beneficioso limpiar el proyecto de elementos innecesarios:

  • Reemplazo de etiquetas: Cambia etiquetas no semánticas como <Edit> a algo más claro como <main>.
  • Eliminación de elementos no utilizados: Borra imágenes y referencias a componentes que ya no forman parte de tu HTML.
  • Configuraciones útiles del editor: Herramientas como Prettier pueden asegurarse de que el código siga un estilo uniforme sin preocuparse por la individualidad de cada desarrollador.

¿Cómo creamos nuestro primer componente?

Crear un componente en Vue es un proceso que puede ser sencillo o detallado, según tus necesidades. Aquí te mostramos cómo hacerlo:

  1. Nomenclatura coherente: Usa prefijos como PX para tus componentes, permitiendo así identificarlos fácilmente.
  2. Evita conflictos con elementos HTML existentes: Asegúrate de elegir nombres personalizados.

Ejemplo de código para un componente Vue:

// pxHeader.vue
<template>
  <header>
    <div class="py-6 text-center bg-green-500">
      <p class="text-white font-bold sm:block">Platzi Strings</p>
    </div>
  </header>
</template>

<script>
export default {
  name: 'PXHeader'
}
</script>

¿Cómo integramos componentes?

Una vez creados tus componentes, el paso siguiente es saber cómo integrarlos eficazmente en tu aplicación:

  • Importación de componentes: Usa el método de importación para añadir el componente PXHeader a tu archivo App.vue.
  • Uso correcto del template: Asegúrate de que tus componentes estén correctamente anidados en el template HTML.
// App.vue
<template>
  <div id="app">
    <PXHeader />
    <!-- Otros componentes -->
  </div>
</template>

<script>
import PXHeader from './components/pxHeader.vue';

export default {
  name: 'App',
  components: {
    PXHeader
  }
}
</script>

¿Cómo aprovechamos utilidades CSS como Tailwind?

Vue se complementa perfectamente con herramientas CSS como Tailwind, facilitando la aplicación de estilos responsivos sin complicaciones:

  • Clases de Tailwind: Utiliza clases como bg-green, text-white, py-6 para estilos personalizados y fácilmente manejables.
  • Breakpoints responsivos: Implementa breakpoints como sm:block para un diseño adaptativo que sigue el principio "mobile-first".

¿Cómo crear componentes SVG y tablas?

La separación de lógica y vista es crítica al crear componentes complejos, como iconos SVG o tablas dinámicas:

  • Componentes SVG: Guarda SVGs largos y complicados en archivos individuales para mantener tu código limpio.
  • Creación de tablas: Las tablas dinámicas pueden mostrar datos variables y deben estar preparadas para recibir propiedades como assets para propagar información.
// pxBaseTable.vue
<template>
  <table>
    <!-- Añade encabezados y cuerpos de tabla -->
  </table>
</template>

<script>
export default {
  name: 'PXBaseTable',
  props: {
    assets: {
      type: Array,
      default: () => []
    }
  }
}
</script>

Al seguir estas directrices en la creación y organización de componentes en Vue.js, no sólo optimizas el rendimiento y el diseño de tus aplicaciones, sino que también facilitas el mantenimiento y la escalabilidad a largo plazo. El aprendizaje constante y la práctica son cruciales para dominar estas habilidades, así que ¡sigue experimentando y mejorando!

Aportes 36

Preguntas 15

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

El código para empezar el componente

<template>
   <header class="shadow w-screen">
       <nav>
           <nav class="flex items-center justify-between flex-wrap bg-green-400 p-6">
               <div class="flex items-center flex-shrink-0 text-white mr-6">
                   <span class="font-semibold text-xl tracking-tight">PlatziExchange</span>
               </div>
               <div class="hidden sm:block w-full blok flex-grow lg:flex lg:items-center lg:wauto">
                   <div class="text-sm lg:flex-grow"></div>
               </div>
           </nav>
       </nav>
    </header> 
</template>

Si a alguien no le funciona el Prettier, es cuestión de que se metan a los setting de Visual Studio y busquen Format On Save, y activen la opción…

Algo que esta muy genial, es que si tienes algún error en el template, con npm run lint, tus errores son corregidos automáticamente

Nota: Prettier corrige los estilos siempre y cuando tengas configurado en el vscode esta opción, Format On Save : True o dar visto bueno

SI prettier no te formatea el codigo cuando guardas y usas VS Code, puedes hacer lo siguiente:

1)Pulsa “CTRL + ,” para abrir la configuracion de VS Code.
2)Ve a la parte de format.
3) luego pulsa formatear cuando se guarda,.

Y listo, espero les sirva.

Para que Prettier actué automáticamente cuando se le de guardar

Para los que presenten el siguiente error: “error Delete prettier/prettier”, solo cambien la linea de secuencia en visual studio de CRLF a LF.

Esta es la parte del curso que esta esperando!👏🏼👏🏼👏🏼

Si quieren trabajar con ESLINT y PRETTIER sin que tengan conflictos compartidos, agregen esto a su configuración de .eslintrc.js:

Primeros Componentes

La única regulación al momento de crear nuevos componentes es que éstos no pueden tener nombres de componentes ya existentes, como pueden ser: Header o div, es necesario integrar nombres custom para que los componentes no se planchen con los componentes ya existentes en HTML.

Se pueden tener componentes que no tienen el tag script, es totalmente válido, es posible tener componentes que solamente tienen viste, la parte de HTML, pero que no tienen la parte de estilos ni la parte de la lógica.

Al usar la nomenclatura de propiedades completa nos permite validar el tipo, al definir un valor default, para un array o un objeto es necesario definir una función que devuelva un array(para un array) o un objeto(para un objeto). En cambio para un valor nativo como un boolean, simplemente se puede poner true o string.

La estructura natural del HTML o del DOM se da cuando combinamos elementos a partir de una estructura de árbol, una estructura jerárquica.

Me gusta esta forma de trabajar con Vue, y creo que aquí se puede apreciar una de las grandes ventajas de Vue, que es que puedes copiarte algún componente de internet (En este caso de la sección de recursos) y pegarlos tal cual en tu proyecto y va a funcionar, es increíble!

Dado que no pude bajar tailwincss, para no atrasarme adapté el ejercicio a bootstrap.

Hemos aprendido a crear componentes y a incluirlos dentro de otros componentes.

es recomendable el uso de prefijos para los nombres de los componentes para no tener errores.

Una duda cada vez que realizo un cambio debo volver a escribir sudo npm run serve para ver los cambios en el codigo o existe una forma mas facil de hacer esto?

en resumen se crea los componentes PxHeader, PxAssetsTable y PxIcon este ultimo esta siendo importado dentro de PxHeader los demas estan siendo llamados en App.vue

Que aplicaciones me permite crear imágenes svg de forma intuitiva? de seguro hay online o de escritorio… pero desconozco este tema

Pregunta tonta… por que el pxicon no necesita tag de script con su export?

tailwin me genera un error…alguien sabe por que
![](

Buenas noches, La verdad he tenido muchos problemas aplicando el codigo, no se si es por temas de actualizaciones.

También se pueden importar los componentes así, y ya quedan expuestos para ser usados.

components: {
   Header: () =>  import("./Header.vue"),
},

Por fin un profesor que realmente se enfoca en codigo del curso y no en css

Que buena clase aprendí mucho

Creo que no me estaría funcionando el ESLint, porque no me marca los errores como “no se está usando el componente”, cómo podría activar ESLint? o es algún plugin específico de VSCode?

Por fin llegamos a la parte del curso que esperaba y necesitaba para mis proyectos!!!

Creación de archivo SVG

Por qué es posible importar el componente PxIcon sin nisiquiera colocar la sentencia export en ese componente?

No se de donde saca el archivo svg, se que debo abrirlo como imagen, pero que imagen es la que debo poner!???

Great!!!

Tailwind CSS IntelliSense
Esta extensión ayuda con las clases de Tailwing, te las sopla mientras las escribes.
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

Y para que funcione en archivos .vue puedes agregar la extension .vue en el archivo de settings

no entendi por que en la propiedad assets que creaste en valor por defafuld hiciste que devuelva un array que sentido tiene?

¿Puedo hacer algo con atom para que me detecte el .vue? me lo toma como si fuera un archivo txt.

Porque mi navegador ya no reconoce que mi pagina es Vue?

Ahora comprendo mejor todo, cuando regreso a ver el curso y estoy creando un proyecto personal. Gracias profe 😋

No encuentro los Archivos que dejaste.
24 de Febrero, 2021

¿Porque el profesor coloca llama al componente con <px-header />? ¿No entiendo porque usa esa sintaxis si el no le ha puesto el nombre al componente de esa manera?