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

9 minuto(s)

Demo

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, recuerda que dominar Vue JS y Vuetify aumentarán las probabilidades de conseguir tu próximo empleo de Desarrollador Web y bueno 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.

Nota: El newsletter lo voy a colocar en todas las páginas del proyecto, ya que ayudará a generar clientes a los cuales se les puede enviar un correo con promociones, novedades, ofertas, etc.

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 esto 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.