CursosEmpresasBlogLiveConfPrecios

Estructura inicial de Platzy Commerce con Vue

Clase 14 de 37 • Curso de Reactividad con Vue.js 3

Clase anteriorSiguiente clase
Resumen

Construye una tienda con Vue.js desde la base: crea un template HTML estático, agrega contenido dinámico y monta la app con createApp. A partir de Platzy Commerce, verás reactividad, dos paradigmas de programación en Vue, consumo de API para imágenes y productos, y una interfaz con galería, carrito y mensajes dinámicos.

¿Cómo iniciar un proyecto Vue con HTML estático y contenido dinámico?

Para empezar, se crea una carpeta limpia con un archivo HTML y una estructura mínima. Dentro del body, se define el div de montaje para Vue, se incluye el script de Vue y un script propio con la lógica. Además, se enlaza el archivo de estilos de los recursos del curso: styles.css. La meta: partir de un template estático y volverlo reactivo paso a paso con Vue.

  • Crear archivo HTML y definir estructura base.
  • Agregar div de aplicación donde se montará Vue.
  • Incluir script de Vue y un script propio.
  • Enlazar estilos desde styles.css.
  • Objetivo: pasar de HTML estático a contenido dinámico.
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Platzy Commerce</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="app"><!-- Aquí se montará Vue --></div>

    <!-- Vue -->
    <script src="..."></script>

    <!-- Lógica de la app -->
    <script>
      const { createApp } = Vue;
      const app = createApp({});
      app.mount('#app');
    </script>
  </body>
</html>

¿Qué estructura tiene el layout de Platzy Commerce en Vue?

La interfaz se organiza en un header con el carrito y una sección principal del producto. Se plantea desde HTML para luego rellenar con datos de una API: imágenes, texto y estados del producto. La idea es que todo sea reactivo: el carrito, los mensajes y los badges cambian según la disponibilidad.

¿Qué elementos componen el header y el carrito?

  • Título en H3: Platzy Commerce.
  • Botón del carrito con clase: cart.
  • Contador de elementos del carrito de forma reactiva.
  • Contenedor: cart content con la lista de productos.
  • Cada producto: imagen y descripción en un span.
<header>
  <h3>Platzy Commerce</h3>
  <button class="cart">Carrito</button>
  <div class="cart-content">
    <article class="cart-item">
      <img src="..." alt="Producto" />
      <span>Descripción del producto</span>
    </article>
  </div>
</header>

¿Cómo se organiza la sección principal del producto?

  • Columna de thumbnails: imágenes pequeñas a la izquierda.
  • Vista principal del producto: un div con la imagen destacada.
  • Descripción del producto: título, badges e información.
  • Badges dinámicos: por ejemplo, “nuevo” y “en oferta”.
  • Estado del producto: clase definida, contenido por completar después.
  • Precio: valor estático por ahora.
  • Contenido descriptivo: lorem ipsum provisional.
  • Código de descuento: etiqueta y campo con placeholder “Ingresa tu código”.
<main>
  <section class="thumbnails">
    <img src="..." alt="Miniatura 1" />
    <img src="..." alt="Miniatura 2" />
  </section>

  <section class="product-view">
    <div class="image"><img src="..." alt="Producto" /></div>
  </section>

  <section class="description">
    <h2>Título del producto</h2>
    <div class="badges">
      <span class="badge new">Nuevo</span>
      <span class="badge sale">En oferta</span>
    </div>
    <p class="status"></p>
    <p class="description-price">$0</p>
    <p class="description-content">Lorem ipsum...</p>

    <label>
      <span>Código de descuento</span>
      <input type="text" placeholder="Ingresa tu código" />
    </label>
  </section>
</main>

¿Cómo montar la app con createApp y preparar estilos y scripts?

El montaje es directo: se importa el script de Vue, se extrae el método createApp, se asigna a una variable app y se llama a mount sobre el div de la aplicación. También se aseguran los estilos desde los recursos del curso, corrigiendo el enlace a styles.css.

  • Extraer createApp desde Vue.
  • Crear la instancia: const app = createApp({}).
  • Montar en el selector del div de aplicación.
  • Verificar que styles.css esté bien enlazado.
  • Preparar datos para llegar desde una API: imágenes y detalles del producto.
  • Mantener la reactividad para carrito, mensajes, colores, emojis y badges dinámicos.
const { createApp } = Vue;
const app = createApp({
  // Aquí irá la lógica reactiva y los datos.
});
app.mount('#app');

¿Te gustaría ver primero el carrito reactivo, los thumbnails o los badges dinámicos? Deja tus dudas y comenta qué parte construirías a continuación.