Implementación de Vue.js en Proyecto eCommerce Reactivo

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

Resumen

¿Cómo implementar un template HTML estático con Vue?

La clave para construir aplicaciones web efectivas reside en comprender cómo hacerlas dinámicas y reactivas. Ahora, aplicaremos los conceptos y herramientas de Vue.js en un proyecto real. Vamos a diseñar un plat eCommerce, un sitio de comercio electrónico que ilustrará muchas facetas de la programación reactiva, permitiéndonos dominar Vue.js.

¿Qué estructura tendrá nuestro plat eCommerce?

Iniciaremos con un archivo HTML estático. Este será la base de nuestra aplicación Vue.js. Nuestro HTML tendrá una estructura clara y ordenada para facilitar la manipulación y el dinamismo posterior.

Header: Contará con un título (H3) y un botón que funcionará como carrito de compras. Este botón tendrá la clase cart y mostrará el número de elementos que añadimos.
Sección principal: Incluye las miniaturas de imágenes (thumbnails) y la visualización principal del producto. Cada miniatura representa una imagen que puede variar según el producto.
Descripción del producto: Esta parte incluirá el título del producto, insignias como si el producto es nuevo o está en oferta, una descripción breve, y un espacio para el precio.
Código de descuento: Una sección donde los usuarios podrán ingresar códigos de descuentos mediante un input.

Aquí está un ejemplo de cómo se ve el HTML inicial:

<div id="app">
  <header>
    <h3>Plat Commerce</h3>
    <button class="cart">Carrito</button>
    <div class="cart-content">
      <!-- Elementos reactivos del carrito -->
    </div>
  </header>
  
  <main>
    <section class="product">
      <div class="thumbnails">
        <!-- Miniaturas de producto -->
      </div>
      <div class="product-image">
        <!-- Imagen del producto -->
      </div>
      <div class="product-description">
        <h4>Título del Producto</h4>
        <div class="badges">
          <!-- Insignias del producto -->
        </div>
        <p class="description">Descripción breve del producto</p>
        <p class="price">Precio</p>
      </div>
    </section>

    <div class="discount-code">
      <span>Código de descuento</span>
      <input type="text" placeholder="Ingresa tu código">
    </div>
  </main>
</div>

¿Cómo se conecta Vue.js al proyecto?

En el proyecto utilizaremos Vue.js para hacer nuestra aplicación interactiva. El primer paso es asegurarnos de incluir el script de Vue y crear nuestra aplicación dentro del archivo. Esto nos permitirá usar Vue.js para dinamizar el contenido HTML.

Incluir Vue.js: Es esencial incluir el script de Vue en nuestro archivo HTML para poder desplegar características de reactividad.
Crear la aplicación Vue: Utilizaremos el método createApp de Vue para crear y montar nuestra aplicación.

const app = Vue.createApp({});
app.mount('#app');

¿Por qué usar CSS para mejorar la presentación de nuestro proyecto?

Un sitio web funcional también debe ofrecer una buena experiencia visual. En nuestro proyecto, incluiremos nuestros estilos CSS para que el interfaz sea atractiva y proporcione una mejor experiencia de usuario.

Asegúrate de que el archivo styles.css esté bien vinculado en tu HTML. Este contendrá todos los estilos que mejorarán la apariencia de nuestro plat eCommerce.

¿Cuál es el siguiente paso?

En la próxima iteración, comenzaremos a utilizar Vue.js para añadir dinamismo. Implementaremos funciones reactivas que cambiarán el contenido según la interacción con el usuario. Prepárate para sumergirte aún más en el poderoso mundo de Vue.js y aprender a hacerlo real. ¡Continúa aprendiendo para transformar tu manera de desarrollar aplicaciones!