Como Crear una Página Web con Vue JS 2.6.11 y Vuetify 2.3.10 – Parte 3

Vue JS | | Comunidad: Crear un Post, Eventos Devs, Foro

En la Parte 2 de este tutorial llamada Como Crear una Página Web con Vue JS 2.6.11 y Vuetify 2.3.10 – Parte 2 realizamos la creación de dos elementos importantes en nuestra página web, me refiero al menú que pasa a ser el header del sitio y el footer o pie de página, estos dos elementos aparecerán en todas las páginas del sitio web, en esta 3ra parte crearemos el contenido de la página Home, vamos con ello.

Partes

Antes de continuar, te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “Las Buenas Prácticas Un Hábito Importante en la Programación”:

Spotify: Sound Cloud: Apple Podcasts:

Bien ahora continuemos con el Post: Como Crear una Página Web con Vue JS 2.6.11 y Vuetify 2.3.10 – Parte 3.

Antes de crear el contenido de la página Home voy abrir el archivo App.vue que se encuentra en pagina-web-vuejs-vuetify > src > App.vue

Abro el archivo App.vue y dentro de el voy a llamar al componente Menú y Footer que había creado en la Parte 2 de este tutorial. (He colocado a continuación todo el código completo del archivo App.vue).

He colocado también los elementos <router-view></router-view> y <v-content></v-content> en ellos cambiará el contenido por cada ruta que sea visitada.

Bien mi página principal o Home va tener un Slider (Carousel) que mostrará unas imágenes, debajo colocaré una sección de servicios destacados y debajo de los servicios un formulario para que los usuarios se suscriban al Newsletter o boletín de novedades.

Home

Para mantener un orden voy a crear un directorio llamado Home dentro del directorio components, en el colocaré todos los componentes que formarán parte del contenido de la página Home.

Bien ahora pasaré a crear el primer elemento de la página Home que será el Slider (Carousel).

Slider (Carousel)

Creo un archivo llamado Carousel.vue dentro de pagina-web-vuejs-vuetify > src > components > Home > Carousel.vue

Abro el archivo Carousel.vue y dentro de las etiquetas <template></template> agrego un v-carousel y dentro de el llamo los items que he definido en las etiquetas script y veremos luego.

Ahora dentro de las etiquetas <script></script> agrego los elementos del Carousel y determinadas configuraciones adicionales.

A continuación el código completo del archivo Carousel.vue

Terminado este Post integraré todos los componentes de la página Home, pero para tener una idea de como se ve la página hasta ahora, veamos la siguiente imagen.

En la imagen anterior, puedes ver que el Carousel tiene 2 flechas a los costados y con ella se pueden avanzar o retroceder a la siguiente imagen. Ahora voy a crear los servicios destacados.

Servicios Destacados

Para esta sección creo un archivo llamado ServiciosDestacados.vue en pagina-web-vuejs-vuetify > src > components > Home > ServiciosDestacados.vue

Abro el archivo ServiciosDestacados.vue y dentro de las etiquetas <template></template> agrego una imagen para cada servicio, el titulo de cada servicio, una descripción y un botón con el texto Leer Más … 

A continuación el código completo del archivo ServiciosDetacados.vue

Al terminar este Post integraré todos los componentes de la página Home, pero para tener una idea de como se ve la página hasta ahora, veamos la siguiente imagen.

Ahora pasaré a crear el Newsletter debajo de los Servicios Detacados.

Newsletter

Para este elemento voy a crear un archivo llamado Newsletter.vue en ServiciosDestacados.vue en pagina-web-vuejs-vuetify > src > components > Home > Newsletter.vue 

Abro el archivo Newsletter.vue y dentro de las etiquetas <template></template> agrego un formulario con un botón al lado derecho, en este formulario el usuario puede ingresar su correo para suscribirse al Newsletter.

Ahora dentro de las etiquetas <script></script> agrego una validación de los correos que los usuarios ingresen para registrarse al Newsletter.

A continuación el código completo del archivo Newsletter.vue

Luego de esta sección integraré todos los componentes de la página Home, pero para tener una idea de como se ve la página hasta ahora, veamos la siguiente imagen.

Bueno ya tenemos creado entonces todo el contenido de la página Home, pero para que la página Home pueda verse bien con todos sus elementos voy a integrar todos los módulos, para este creo un archivo llamado Home.vue en pagina-web-vuejs-vuetify > src > components > Home.vue 

Abro el archivo Home.vue y dentro de las etiquetas <template></template> aparte del Menú y el Footer, agrego los componentes que he creado anteriormente, estos son el Carousel, ServiciosDetacados y Newsletter.

Dentro de las etiquetas <script></script> importo los componentes y defino el título de la página Home.

Si ejecuto el servidor local mediante el siguiente comando.

Y voy a la ruta local http://localhost:8080/ debería de ver la página Home con todos sus elementos correspondientes.

Bien hasta aquí terminamos con esta segunda parte en donde creamos el contenido de la página Home y realizamos otras tareas importantes.

Ten Paciencia, lo que quiero es que conozcas bien como crear este proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje. 

Nota (s)

  • En la siguiente parte de este tutorial, crearemos el contenido de la página Nosotros.
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
0 Comments
Inline Feedbacks
View all comments