El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Projecte 2: Lloc web de comerç electrònic

Següent ►
►

En aquest projecte, construirem un lloc web de comerç electrònic utilitzant Vue.js. Aquest projecte ens permetrà aplicar molts dels conceptes apresos al llarg del curs, com ara components, Vue Router, Vuex, i més. El lloc web inclourà funcionalitats bàsiques com la visualització de productes, un carret de compra, i un procés de pagament.

Objectius del projecte

  • Crear una aplicació Vue.js completa amb múltiples components.
  • Utilitzar Vue Router per gestionar la navegació entre pàgines.
  • Implementar la gestió d'estat amb Vuex per manejar el carret de compra.
  • Aplicar estils i disseny responsiu per a una millor experiència d'usuari.

Estructura del projecte

  1. Configuració inicial
  2. Creació de components
  3. Configuració de Vue Router
  4. Implementació de Vuex
  5. Estils i disseny responsiu
  6. Funcionalitats avançades

  1. Configuració inicial

Instal·lació de Vue CLI

Primer, assegura't de tenir instal·lat Vue CLI. Si no el tens, pots instal·lar-lo amb el següent comandament:

npm install -g @vue/cli

Creació del projecte

Crea un nou projecte Vue utilitzant Vue CLI:

vue create ecommerce-website

Segueix les instruccions per configurar el projecte segons les teves preferències.

Instal·lació de dependències addicionals

Instal·la Vue Router i Vuex:

npm install vue-router vuex

  1. Creació de components

Estructura de carpetes

Organitza les carpetes del projecte de la següent manera:

src/
├── assets/
├── components/
│   ├── ProductList.vue
│   ├── ProductItem.vue
│   ├── Cart.vue
│   ├── Checkout.vue
├── views/
│   ├── Home.vue
│   ├── ProductDetail.vue
│   ├── CartView.vue
│   ├── CheckoutView.vue
├── router/
│   └── index.js
├── store/
│   └── index.js
└── App.vue

Component ProductList.vue

<template>
  <div class="product-list">
    <ProductItem v-for="product in products" :key="product.id" :product="product" />
  </div>
</template>

<script>
import ProductItem from './ProductItem.vue';

export default {
  components: {
    ProductItem
  },
  data() {
    return {
      products: [
        { id: 1, name: 'Product 1', price: 100 },
        { id: 2, name: 'Product 2', price: 200 },
        // Afegeix més productes aquí
      ]
    };
  }
};
</script>

<style scoped>
.product-list {
  display: flex;
  flex-wrap: wrap;
}
</style>

Component ProductItem.vue

<template>
  <div class="product-item">
    <h3>{{ product.name }}</h3>
    <p>{{ product.price }} €</p>
    <button @click="addToCart">Afegir al carret</button>
  </div>
</template>

<script>
export default {
  props: ['product'],
  methods: {
    addToCart() {
      this.$store.commit('addToCart', this.product);
    }
  }
};
</script>

<style scoped>
.product-item {
  border: 1px solid #ccc;
  padding: 16px;
  margin: 16px;
  width: 200px;
}
</style>

Component Cart.vue

<template>
  <div class="cart">
    <h2>Carret de compra</h2>
    <div v-for="item in cart" :key="item.id" class="cart-item">
      <p>{{ item.name }} - {{ item.price }} €</p>
      <button @click="removeFromCart(item)">Eliminar</button>
    </div>
    <p>Total: {{ total }} €</p>
    <router-link to="/checkout">Procedir al pagament</router-link>
  </div>
</template>

<script>
export default {
  computed: {
    cart() {
      return this.$store.state.cart;
    },
    total() {
      return this.cart.reduce((sum, item) => sum + item.price, 0);
    }
  },
  methods: {
    removeFromCart(item) {
      this.$store.commit('removeFromCart', item);
    }
  }
};
</script>

<style scoped>
.cart {
  padding: 16px;
}
.cart-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
</style>

Component Checkout.vue

<template>
  <div class="checkout">
    <h2>Pagament</h2>
    <form @submit.prevent="submitOrder">
      <div>
        <label for="name">Nom</label>
        <input type="text" id="name" v-model="name" required />
      </div>
      <div>
        <label for="address">Adreça</label>
        <input type="text" id="address" v-model="address" required />
      </div>
      <button type="submit">Enviar comanda</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      address: ''
    };
  },
  methods: {
    submitOrder() {
      // Aquí podries enviar la comanda a un servidor
      alert(`Comanda enviada per ${this.name} a ${this.address}`);
      this.$store.commit('clearCart');
      this.$router.push('/');
    }
  }
};
</script>

<style scoped>
.checkout {
  padding: 16px;
}
</style>

  1. Configuració de Vue Router

Fitxer router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import ProductDetail from '../views/ProductDetail.vue';
import CartView from '../views/CartView.vue';
import CheckoutView from '../views/CheckoutView.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  { path: '/product/:id', component: ProductDetail },
  { path: '/cart', component: CartView },
  { path: '/checkout', component: CheckoutView }
];

const router = new VueRouter({
  mode: 'history',
  routes
});

export default router;

Integració de Vue Router a App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

<style>
/* Estils globals */
</style>

  1. Implementació de Vuex

Fitxer store/index.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    cart: []
  },
  mutations: {
    addToCart(state, product) {
      state.cart.push(product);
    },
    removeFromCart(state, product) {
      state.cart = state.cart.filter(item => item.id !== product.id);
    },
    clearCart(state) {
      state.cart = [];
    }
  }
});

Integració de Vuex a main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

  1. Estils i disseny responsiu

Estils globals

Afegeix estils globals a src/assets/styles.css i importa'ls a main.js:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
}

Importació d'estils globals a main.js

import './assets/styles.css';

  1. Funcionalitats avançades

Filtratge i cerca de productes

Afegeix un component de cerca i filtratge a ProductList.vue per permetre als usuaris buscar productes per nom o categoria.

Autenticació d'usuaris

Implementa un sistema d'autenticació bàsic per permetre als usuaris registrar-se i iniciar sessió abans de fer una compra.

Integració amb una API de pagament

Integra una API de pagament com Stripe per processar pagaments reals.

Conclusió

En aquest projecte, hem creat un lloc web de comerç electrònic complet utilitzant Vue.js. Hem aplicat molts dels conceptes apresos al llarg del curs, com ara components, Vue Router, Vuex, i més. Aquest projecte ens ha permès veure com tots aquests conceptes es poden combinar per crear una aplicació web funcional i atractiva.

Amb això, estàs preparat per abordar projectes més complexos i personalitzats amb Vue.js. Bona sort i feliç programació!

◄ Anterior
◄
Següent ►
►

Curs de Vue.js

Mòdul 1: Introducció a Vue.js

Mòdul 2: Conceptes bàsics de Vue.js

Mòdul 3: Components de Vue.js

Mòdul 4: Vue Router

Mòdul 5: Gestió d'estat amb Vuex

Mòdul 6: Directives de Vue.js

Mòdul 7: Plugins de Vue.js

Mòdul 8: Proves en Vue.js

Mòdul 9: Conceptes avançats de Vue.js

Mòdul 10: Construcció i desplegament d'aplicacions Vue.js

Mòdul 11: Projectes de Vue.js del món real

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats