En este módulo, construiremos un sitio web de comercio electrónico utilizando Vue.js. Este proyecto te permitirá aplicar los conceptos aprendidos en los módulos anteriores y te dará una experiencia práctica en el desarrollo de una aplicación web completa.
Objetivos del Proyecto
- Crear una aplicación Vue.js para un sitio web de comercio electrónico.
- Implementar la gestión de estado con Vuex.
- Configurar rutas con Vue Router.
- Utilizar componentes dinámicos y asíncronos.
- Integrar un sistema de autenticación básico.
- Implementar un carrito de compras y un sistema de pago simulado.
Estructura del Proyecto
- Configuración del Proyecto
- Diseño de la Interfaz de Usuario
- Gestión de Productos
- Carrito de Compras
- Autenticación de Usuarios
- Sistema de Pago
- Despliegue
- Configuración del Proyecto
Paso 1: Crear un Nuevo Proyecto Vue
Primero, crea un nuevo proyecto Vue utilizando Vue CLI.
Selecciona las opciones predeterminadas o personaliza según tus necesidades.
Paso 2: Instalar Dependencias Necesarias
Instala Vue Router y Vuex.
Paso 3: Configurar Vue Router
Crea un archivo router.js en la carpeta src y configura las rutas básicas.
// src/router.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import Product from './views/Product.vue';
import Cart from './views/Cart.vue';
import Login from './views/Login.vue';
Vue.use(Router);
export default new Router({
routes: [
{ path: '/', component: Home },
{ path: '/product/:id', component: Product },
{ path: '/cart', component: Cart },
{ path: '/login', component: Login }
]
});Paso 4: Configurar Vuex
Crea un archivo store.js en la carpeta src y configura el estado inicial.
// src/store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
products: [],
cart: [],
user: null
},
mutations: {
setProducts(state, products) {
state.products = products;
},
addToCart(state, product) {
state.cart.push(product);
},
setUser(state, user) {
state.user = user;
}
},
actions: {
fetchProducts({ commit }) {
// Simulación de una llamada a una API
const products = [
{ id: 1, name: 'Producto 1', price: 100 },
{ id: 2, name: 'Producto 2', price: 200 }
];
commit('setProducts', products);
}
}
});
- Diseño de la Interfaz de Usuario
Paso 1: Crear Componentes Básicos
Crea componentes para la cabecera, pie de página y navegación.
<!-- src/components/Header.vue -->
<template>
<header>
<h1>Tienda en Línea</h1>
<nav>
<router-link to="/">Inicio</router-link>
<router-link to="/cart">Carrito</router-link>
<router-link to="/login">Iniciar Sesión</router-link>
</nav>
</header>
</template>
<script>
export default {
name: 'Header'
};
</script>Paso 2: Crear Vistas
Crea las vistas para el inicio, producto, carrito y login.
<!-- src/views/Home.vue -->
<template>
<div>
<Header />
<h2>Productos</h2>
<div v-for="product in products" :key="product.id">
<router-link :to="'/product/' + product.id">{{ product.name }}</router-link>
<p>{{ product.price }}</p>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex';
import Header from '../components/Header.vue';
export default {
name: 'Home',
components: { Header },
computed: {
...mapState(['products'])
},
created() {
this.$store.dispatch('fetchProducts');
}
};
</script>
- Gestión de Productos
Paso 1: Crear la Vista del Producto
Crea una vista detallada para cada producto.
<!-- src/views/Product.vue -->
<template>
<div>
<Header />
<div v-if="product">
<h2>{{ product.name }}</h2>
<p>{{ product.price }}</p>
<button @click="addToCart(product)">Agregar al Carrito</button>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex';
import Header from '../components/Header.vue';
export default {
name: 'Product',
components: { Header },
computed: {
product() {
return this.$store.state.products.find(
product => product.id === parseInt(this.$route.params.id)
);
}
},
methods: {
addToCart(product) {
this.$store.commit('addToCart', product);
}
}
};
</script>
- Carrito de Compras
Paso 1: Crear la Vista del Carrito
Crea una vista para mostrar los productos en el carrito.
<!-- src/views/Cart.vue -->
<template>
<div>
<Header />
<h2>Carrito de Compras</h2>
<div v-for="item in cart" :key="item.id">
<p>{{ item.name }} - {{ item.price }}</p>
</div>
<p>Total: {{ total }}</p>
</div>
</template>
<script>
import { mapState } from 'vuex';
import Header from '../components/Header.vue';
export default {
name: 'Cart',
components: { Header },
computed: {
...mapState(['cart']),
total() {
return this.cart.reduce((sum, item) => sum + item.price, 0);
}
}
};
</script>
- Autenticación de Usuarios
Paso 1: Crear la Vista de Login
Crea una vista para el inicio de sesión de usuarios.
<!-- src/views/Login.vue -->
<template>
<div>
<Header />
<h2>Iniciar Sesión</h2>
<form @submit.prevent="login">
<input v-model="username" placeholder="Nombre de Usuario" />
<input v-model="password" type="password" placeholder="Contraseña" />
<button type="submit">Iniciar Sesión</button>
</form>
</div>
</template>
<script>
import Header from '../components/Header.vue';
export default {
name: 'Login',
components: { Header },
data() {
return {
username: '',
password: ''
};
},
methods: {
login() {
// Simulación de autenticación
const user = { username: this.username };
this.$store.commit('setUser', user);
this.$router.push('/');
}
}
};
</script>
- Sistema de Pago
Paso 1: Simular el Pago
Añade un botón de pago en la vista del carrito.
<!-- src/views/Cart.vue -->
<template>
<div>
<Header />
<h2>Carrito de Compras</h2>
<div v-for="item in cart" :key="item.id">
<p>{{ item.name }} - {{ item.price }}</p>
</div>
<p>Total: {{ total }}</p>
<button @click="checkout">Pagar</button>
</div>
</template>
<script>
import { mapState } from 'vuex';
import Header from '../components/Header.vue';
export default {
name: 'Cart',
components: { Header },
computed: {
...mapState(['cart']),
total() {
return this.cart.reduce((sum, item) => sum + item.price, 0);
}
},
methods: {
checkout() {
alert('Pago realizado con éxito!');
this.$store.commit('setCart', []);
}
}
};
</script>
- Despliegue
Paso 1: Construir para Producción
Construye la aplicación para producción.
Paso 2: Desplegar en un Servidor
Sigue las instrucciones de tu proveedor de hosting para desplegar la aplicación. Puedes usar servicios como Netlify, Vercel o GitHub Pages.
Conclusión
En este proyecto, hemos construido un sitio web de comercio electrónico utilizando Vue.js. Hemos cubierto la configuración del proyecto, el diseño de la interfaz de usuario, la gestión de productos, el carrito de compras, la autenticación de usuarios y un sistema de pago simulado. Este proyecto te ha proporcionado una experiencia práctica en el desarrollo de una aplicación web completa con Vue.js.
¡Felicidades por completar el proyecto! Ahora estás listo para enfrentar desafíos más avanzados y construir aplicaciones más complejas con Vue.js.
Curso de Vue.js
Módulo 1: Introducción a Vue.js
- ¿Qué es Vue.js?
- Configuración del Entorno de Desarrollo
- Creando Tu Primera Aplicación Vue
- Entendiendo la Instancia de Vue
Módulo 2: Conceptos Básicos de Vue.js
- Sintaxis de Plantillas
- Vinculación de Datos
- Propiedades Computadas y Observadores
- Vinculación de Clases y Estilos
- Renderizado Condicional
- Renderizado de Listas
Módulo 3: Componentes de Vue.js
- Introducción a los Componentes
- Props y Eventos Personalizados
- Slots
- Componentes Dinámicos y Asíncronos
- Comunicación entre Componentes
Módulo 4: Vue Router
- Introducción a Vue Router
- Configuración de Vue Router
- Rutas Dinámicas
- Rutas Anidadas
- Guardias de Navegación
Módulo 5: Gestión de Estado con Vuex
- Introducción a Vuex
- Estado, Getters, Mutaciones y Acciones
- Módulos en Vuex
- Usando Vuex en Componentes
- Patrones Avanzados de Vuex
Módulo 6: Directivas de Vue.js
Módulo 7: Plugins de Vue.js
Módulo 8: Pruebas en Vue.js
- Pruebas Unitarias con Vue Test Utils
- Pruebas de Extremo a Extremo con Cypress
- Simulación de Dependencias
Módulo 9: Conceptos Avanzados de Vue.js
- Funciones de Renderizado y JSX
- Renderizado del Lado del Servidor (SSR) con Nuxt.js
- API de Composición de Vue 3
- Optimización del Rendimiento
Módulo 10: Construcción y Despliegue de Aplicaciones Vue.js
- Construcción para Producción
- Despliegue de Aplicaciones Vue.js
- Integración y Despliegue Continuos (CI/CD)