El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Proyecto 3: Plataforma de Blogs

¡Fin!

En este módulo, construiremos una plataforma de blogs completa utilizando Vue.js. Este proyecto te permitirá aplicar y consolidar todos los conceptos aprendidos en los módulos anteriores, desde la creación de componentes hasta la gestión de estado con Vuex y el enrutamiento con Vue Router.

Objetivos del Proyecto

  • Crear una aplicación de blog funcional con Vue.js.
  • Implementar la gestión de estado con Vuex.
  • Configurar el enrutamiento con Vue Router.
  • Utilizar componentes dinámicos y asíncronos.
  • Desplegar la aplicación en un entorno de producción.

Estructura del Proyecto

  1. Configuración Inicial
  2. Diseño de la Interfaz de Usuario
  3. Gestión de Estado con Vuex
  4. Enrutamiento con Vue Router
  5. Implementación de Funcionalidades Clave
  6. Despliegue de la Aplicación

  1. Configuración Inicial

Instalación de Vue CLI

Primero, asegúrate de tener Vue CLI instalado. Si no lo tienes, puedes instalarlo con el siguiente comando:

npm install -g @vue/cli

Creación del Proyecto

Crea un nuevo proyecto Vue.js:

vue create blog-platform

Selecciona las opciones predeterminadas o personaliza según tus necesidades.

Instalación de Dependencias Adicionales

Instala Vue Router y Vuex:

cd blog-platform
npm install vue-router vuex

  1. Diseño de la Interfaz de Usuario

Estructura de Componentes

Organiza tu proyecto en una estructura de carpetas clara:

src/
  ├── assets/
  ├── components/
  ├── views/
  ├── router/
  ├── store/
  ├── App.vue
  └── main.js

Creación de Componentes Básicos

Crea los componentes básicos en la carpeta components:

  • Header.vue
  • Footer.vue
  • PostList.vue
  • PostDetail.vue
  • CreatePost.vue

Ejemplo de Header.vue:

<template>
  <header>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/create">Create Post</router-link>
    </nav>
  </header>
</template>

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

<style scoped>
nav {
  display: flex;
  justify-content: space-around;
}
</style>

  1. Gestión de Estado con Vuex

Configuración de Vuex

Crea un archivo store/index.js y configura Vuex:

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    posts: []
  },
  mutations: {
    ADD_POST(state, post) {
      state.posts.push(post);
    },
    SET_POSTS(state, posts) {
      state.posts = posts;
    }
  },
  actions: {
    addPost({ commit }, post) {
      commit('ADD_POST', post);
    },
    fetchPosts({ commit }) {
      // Simulación de una llamada a una API
      const posts = [
        { id: 1, title: 'First Post', content: 'This is the first post.' },
        { id: 2, title: 'Second Post', content: 'This is the second post.' }
      ];
      commit('SET_POSTS', posts);
    }
  },
  getters: {
    allPosts: state => state.posts
  }
});

  1. Enrutamiento con Vue Router

Configuración de Vue Router

Crea un archivo router/index.js y configura Vue Router:

import Vue from 'vue';
import Router from 'vue-router';
import PostList from '@/components/PostList.vue';
import PostDetail from '@/components/PostDetail.vue';
import CreatePost from '@/components/CreatePost.vue';

Vue.use(Router);

export default new Router({
  routes: [
    { path: '/', component: PostList },
    { path: '/post/:id', component: PostDetail, props: true },
    { path: '/create', component: CreatePost }
  ]
});

  1. Implementación de Funcionalidades Clave

Listado de Posts

En PostList.vue, muestra la lista de posts:

<template>
  <div>
    <h1>Blog Posts</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        <router-link :to="'/post/' + post.id">{{ post.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: 'PostList',
  computed: {
    ...mapGetters(['allPosts'])
  },
  created() {
    this.$store.dispatch('fetchPosts');
  }
}
</script>

Detalle de un Post

En PostDetail.vue, muestra los detalles de un post:

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>
  </div>
</template>

<script>
export default {
  name: 'PostDetail',
  props: ['id'],
  computed: {
    post() {
      return this.$store.state.posts.find(post => post.id === parseInt(this.id));
    }
  }
}
</script>

Creación de un Nuevo Post

En CreatePost.vue, permite la creación de un nuevo post:

<template>
  <div>
    <h1>Create a New Post</h1>
    <form @submit.prevent="createPost">
      <div>
        <label for="title">Title:</label>
        <input type="text" v-model="title" required>
      </div>
      <div>
        <label for="content">Content:</label>
        <textarea v-model="content" required></textarea>
      </div>
      <button type="submit">Create Post</button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'CreatePost',
  data() {
    return {
      title: '',
      content: ''
    };
  },
  methods: {
    createPost() {
      const newPost = {
        id: Date.now(),
        title: this.title,
        content: this.content
      };
      this.$store.dispatch('addPost', newPost);
      this.$router.push('/');
    }
  }
}
</script>

  1. Despliegue de la Aplicación

Construcción para Producción

Construye la aplicación para producción:

npm run build

Despliegue en un Servidor

Sigue las instrucciones específicas de tu servidor de elección (por ejemplo, Netlify, Vercel, Heroku) para desplegar la aplicación.

Conclusión

En este proyecto, hemos construido una plataforma de blogs completa utilizando Vue.js. Hemos cubierto la configuración inicial, el diseño de la interfaz de usuario, la gestión de estado con Vuex, el enrutamiento con Vue Router, la implementación de funcionalidades clave y el despliegue de la aplicación. Este proyecto te ha permitido aplicar y consolidar todos los conceptos aprendidos en los módulos anteriores, preparándote para desarrollar aplicaciones Vue.js más complejas y robustas en el futuro.

◄ Anterior
◄
¡Fin!

Curso de Vue.js

Módulo 1: Introducción a Vue.js

Módulo 2: Conceptos Básicos de Vue.js

Módulo 3: Componentes de Vue.js

Módulo 4: Vue Router

Módulo 5: Gestión de Estado con Vuex

Módulo 6: Directivas de Vue.js

Módulo 7: Plugins de Vue.js

Módulo 8: Pruebas en Vue.js

Módulo 9: Conceptos Avanzados de Vue.js

Módulo 10: Construcción y Despliegue de Aplicaciones Vue.js

Módulo 11: Proyectos Reales con Vue.js

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados