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

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

Demo

En la parte anterior de este tutorial creamos los ementos el contenido de la página Nosotros, creamos un texto de introducción de la página y debajo colocamos la misión, objetivo y visión de la organización. Todos estos elementos los manejamos mediante la creación de los componentes InformacionAdicional.vue y SobreNosotros.vue. En esta parte 4 vamos a crear el contenido de la página Servicios, vamos con ello.

Partes

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

Asimismo te invito a escuchar el Podcast: “Porque Todo Desarrollador Debes Ser Autodidacta“5 Habilidades que Debe Tener un Desarrollador Backend” (Anchor Podcast): 

Spotify: Sound Cloud: Apple Podcasts Anchor 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 5.

Servicios

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

Entonces pasaré a crear el primer elemento de la página Servicios que será un texto de introducción a los servicios. 

Introducción a Servicios

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

Paso seguido abro el archivo IntroduccionServicios.vue y dentro de las etiquetas <template></template> agrego un v-container y dentro de el coloco un encabezado h1 con el texto Servicios, debajo coloco un texto de introducción a los servicios (coloco texto fake). 

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

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

Ahora pasemos al siguiente componente que contendrá información con todos los servicios la empresa. 

Galeria de Servicios

En esta sección voy a colocar 3 columnas y 3 filas con los servicios de la organización. Creo un archivo llamado GaleriaServicios.vue en pagina-web-vuejs-vuetify > src > components > Servicios > GaleriaServicios.vue

Abro el archivo GaleriaServicios.vue y dentro de las etiquetas <template></template> coloco 3 columnas y 3 filas con todos los sercicios de la empresa. Cada servicio tiene una imagen referencial. 

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

Para tener una idea de como se ve la página hasta ahora, veamos la siguiente imagen.

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

Paso seguido abro el archivo Servicios.vue y dentro de las etiquetas <template></template> aparte del Menú y el Footer, agrego los componentes que he creado anteriormente, estos son IntroduccionServicios y GaleriaServicios 

Paso seguido, dentro de las etiquetas <script></script> importo los componentes y defino el título de la página Servicios.

Y si ejecuto el servidor local mediante el siguiente comando.

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

Bueno hasta aquí terminamos con esta cuarta parte en donde creamos el contenido de la página Servicios con todos sus elementos respectivos.

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 y última de este tutorial, crearemos el contenido de la página Contacto.
  • 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