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:
- Que es Vue JS, Historia y otros detalles
- Tu primer Hola Mundo con Vue JS
- 5 Extensiones que te harán más Productivo(a) con Vue JS
- 6 Buenas Prácticas para Desarrolladores Vue JS
- Como Leer un archivo JSON con Vue JS 2.6.11 + Tabla de Bootstrap 4
- Como Crear un Buscador en Tiempo Real con Vue JS 2.6.11 (Buscador de Pokemones) – Parte 1
- Como Leer un EndPoint de API REST que devuelve datos JSON con Vue JS 3 y Axios 0.21.1 – Parte 1
- Puedes ver más en la categoría Vue JS.
Asimismo te invito a escuchar el Podcast: “Porque Todo Desarrollador Debes Ser Autodidacta” y “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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
/pagina-web-vuejs-vuetify ├── .git ├── /node_modules ├── /public ├── /src ├── /assets ├── /components ├── /Home ├── /Nosotros ├── /Servicios // Creo este Directorio ├── Footer.vue ├── Home.vue ├── Menu.vue ├── Nosotros.vue ├── /plugins ├── /router ├── /views ├── App.vue ├── main.js ├── .gitignore ├── babel.config.js ├── package-lock.json ├── package.json ├── README.md ├── vue.config.js ├── yarn.lock |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/pagina-web-vuejs-vuetify ├── .git ├── /node_modules ├── /public ├── /src ├── /assets ├── /components ├── /Home ├── /Nosotros ├── /Servicios ├── IntroduccionServicios.vue // Creo este Archivo ├── Footer.vue ├── Home.vue ├── Menu.vue ├── Nosotros.vue ├── /plugins ├── /router ├── /views ├── App.vue ├── main.js ├── .gitignore ├── babel.config.js ├── package-lock.json ├── package.json ├── README.md ├── vue.config.js ├── yarn.lock |
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).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<template> <v-container class="mt-10" > <div class="mt-6 mb-3 text-center"> <h1> Servicios </h1> </div> <v-row align="center" justify="center" > <div class="col-md-12"> <p class="text-justify"> Etiam varius, quam at accumsan laoreet, ligula ante luctus tellus, at euismod justo urna non arcu. Maecenas dignissim nec justo eget varius. Suspendisse ullamcorper sapien non pulvinar tincidunt. Phasellus venenatis, lacus ac semper aliquet, metus arcu feugiat mauris, id feugiat risus urna ut orci. Curabitur blandit lacus sit amet eleifend mattis. Fusce odio orci, lacinia a vulputate ac, sollicitudin nec justo. Nulla pretium condimentum diam nec luctus. Morbi vehicula semper dignissim. Quisque imperdiet felis vitae feugiat sagittis. Pellentesque magna nulla, cursus vitae semper sed, ornare sit amet odio. Nulla in nisi maximus, feugiat justo sit amet, venenatis lectus. Aliquam erat volutpat. Nunc et tellus in libero cursus vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ultricies velit eget orci interdum, sit amet aliquet mi imperdiet. <br><br> A continuación todos nuestros servicios: </p> </div> </v-row> </v-container> </template> |
A continuación el código completo del archivo IntroduccionServicios.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<template> <v-container class="mt-10" > <div class="mt-6 mb-3 text-center"> <h1> Servicios </h1> </div> <v-row align="center" justify="center" > <div class="col-md-12"> <p class="text-justify"> Etiam varius, quam at accumsan laoreet, ligula ante luctus tellus, at euismod justo urna non arcu. Maecenas dignissim nec justo eget varius. Suspendisse ullamcorper sapien non pulvinar tincidunt. Phasellus venenatis, lacus ac semper aliquet, metus arcu feugiat mauris, id feugiat risus urna ut orci. Curabitur blandit lacus sit amet eleifend mattis. Fusce odio orci, lacinia a vulputate ac, sollicitudin nec justo. Nulla pretium condimentum diam nec luctus. Morbi vehicula semper dignissim. Quisque imperdiet felis vitae feugiat sagittis. Pellentesque magna nulla, cursus vitae semper sed, ornare sit amet odio. Nulla in nisi maximus, feugiat justo sit amet, venenatis lectus. Aliquam erat volutpat. Nunc et tellus in libero cursus vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ultricies velit eget orci interdum, sit amet aliquet mi imperdiet. <br><br> A continuación todos nuestros servicios: </p> </div> </v-row> </v-container> </template> <script> export default { name: 'IntroduccionServicios', } </script> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
/pagina-web-vuejs-vuetify ├── .git ├── /node_modules ├── /public ├── /src ├── /assets ├── /components ├── /Home ├── /Nosotros ├── /Servicios ├── GaleriaServicios.vue // Creo este Archivo ├── IntroduccionServicios.vue ├── Footer.vue ├── Home.vue ├── Menu.vue ├── Nosotros.vue ├── /plugins ├── /router ├── /views ├── App.vue ├── main.js ├── .gitignore ├── babel.config.js ├── package-lock.json ├── package.json ├── README.md ├── vue.config.js ├── yarn.lock |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 |
<template> <v-container class="mt-10" > <v-row align="center" justify="center" > <div class="col-md-4"> <div class="mt-6 mb-3 text-center"> <img src="img/s1.png" /> <h2 class="mt-5">Servicio 1</h2> </div> <p class="text-justify"> Vestibulum eu vulputate lacus, eget dignissim velit. Sed odio enim, accumsan eu ligula sit amet, aliquet egestas elit. Donec auctor et quam ut dapibus. Donec a iaculis mauris. Donec molestie leo at ipsum eleifend consectetur. Phasellus quis lacus commodo, commodo ligula ac, volutpat tortor. Praesent imperdiet pellentesque feugiat. </p> </div> <div class="col-md-4"> <div class="mt-6 mb-3 text-center"> <img src="img/s2.png" /> <h2 class="mt-5">Servicio 2</h2> </div> <p class="text-justify"> Vestibulum eu vulputate lacus, eget dignissim velit. Sed odio enim, accumsan eu ligula sit amet, aliquet egestas elit. Donec auctor et quam ut dapibus. Donec a iaculis mauris. Donec molestie leo at ipsum eleifend consectetur. Phasellus quis lacus commodo, commodo ligula ac, volutpat tortor. Praesent imperdiet pellentesque feugiat. </p> </div> <div class="col-md-4"> <div class="mt-6 mb-3 text-center"> <img src="img/s3.png" /> <h2 class="mt-5">Servicio 3</h2> </div> <p class="text-justify"> Vestibulum eu vulputate lacus, eget dignissim velit. Sed odio enim, accumsan eu ligula sit amet, aliquet egestas elit. Donec auctor et quam ut dapibus. Donec a iaculis mauris. Donec molestie leo at ipsum eleifend consectetur. Phasellus quis lacus commodo, commodo ligula ac, volutpat tortor. Praesent imperdiet pellentesque feugiat. </p> </div> </v-row> <v-row align="center" justify="center" > <div class="col-md-4"> <div class="mt-6 mb-3 text-center"> <img src="img/s4.png" /> <h2 class="mt-5">Servicio 4</h2> </div> <p class="text-justify"> Vestibulum eu vulputate lacus, eget dignissim velit. Sed odio enim, accumsan eu ligula sit amet, aliquet egestas elit. Donec auctor et quam ut dapibus. Donec a iaculis mauris. Donec molestie leo at ipsum eleifend consectetur. Phasellus quis lacus commodo, commodo ligula ac, volutpat tortor. Praesent imperdiet pellentesque feugiat. </p> </div> <div class="col-md-4"> <div class="mt-6 mb-3 text-center"> <img src="img/s5.png" /> <h2 class="mt-5">Servicio 5</h2> </div> <p class="text-justify"> Vestibulum eu vulputate lacus, eget dignissim velit. Sed odio enim, accumsan eu ligula sit amet, aliquet egestas elit. Donec auctor et quam ut dapibus. Donec a iaculis mauris. Donec molestie leo at ipsum eleifend consectetur. Phasellus quis lacus commodo, commodo ligula ac, volutpat tortor. Praesent imperdiet pellentesque feugiat. </p> </div> <div class="col-md-4"> <div class="mt-6 mb-3 text-center"> <img src="img/s6.png" /> <h2 class="mt-5">Servicio 6</h2> </div> <p class="text-justify"> Vestibulum eu vulputate lacus, eget dignissim velit. Sed odio enim, accumsan eu ligula sit amet, aliquet egestas elit. Donec auctor et quam ut dapibus. Donec a iaculis mauris. Donec molestie leo at ipsum eleifend consectetur. Phasellus quis lacus commodo, commodo ligula ac, volutpat tortor. Praesent imperdiet pellentesque feugiat. </p> </div> </v-row> <v-row align="center" justify="center" > <div class="col-md-4"> <div class="mt-6 mb-3 text-center"> <img src="img/s7.png" /> <h2 class="mt-5">Servicio 7</h2> </div> <p class="text-justify"> Vestibulum eu vulputate lacus, eget dignissim velit. Sed odio enim, accumsan eu ligula sit amet, aliquet egestas elit. Donec auctor et quam ut dapibus. Donec a iaculis mauris. Donec molestie leo at ipsum eleifend consectetur. Phasellus quis lacus commodo, commodo ligula ac, volutpat tortor. Praesent imperdiet pellentesque feugiat. </p> </div> <div class="col-md-4"> <div class="mt-6 mb-3 text-center"> <img src="img/s8.png" /> <h2 class="mt-5">Servicio 8</h2> </div> <p class="text-justify"> Vestibulum eu vulputate lacus, eget dignissim velit. Sed odio enim, accumsan eu ligula sit amet, aliquet egestas elit. Donec auctor et quam ut dapibus. Donec a iaculis mauris. Donec molestie leo at ipsum eleifend consectetur. Phasellus quis lacus commodo, commodo ligula ac, volutpat tortor. Praesent imperdiet pellentesque feugiat. </p> </div> <div class="col-md-4"> <div class="mt-6 mb-3 text-center"> <img src="img/s9.png" /> <h2 class="mt-5">Servicio 9</h2> </div> <p class="text-justify"> Vestibulum eu vulputate lacus, eget dignissim velit. Sed odio enim, accumsan eu ligula sit amet, aliquet egestas elit. Donec auctor et quam ut dapibus. Donec a iaculis mauris. Donec molestie leo at ipsum eleifend consectetur. Phasellus quis lacus commodo, commodo ligula ac, volutpat tortor. Praesent imperdiet pellentesque feugiat. </p> </div> </v-row> </v-container> </template> |
A continuación el código completo del archivo GaleriaServicios.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 |
<template> <v-container class="mt-10" > <v-row align="center" justify="center" > <div class="col-md-4"> <div class="mt-6 mb-3 text-center"> <img src="img/s1.png" /> <h2 class="mt-5">Servicio 1</h2> </div> <p class="text-justify"> Vestibulum eu vulputate lacus, eget dignissim velit. Sed odio enim, accumsan eu ligula sit amet, aliquet egestas elit. Donec auctor et quam ut dapibus. Donec a iaculis mauris. Donec molestie leo at ipsum eleifend consectetur. Phasellus quis lacus commodo, commodo ligula ac, volutpat tortor. Praesent imperdiet pellentesque feugiat. </p> </div> <div class="col-md-4"> <div class="mt-6 mb-3 text-center"> <img src="img/s2.png" /> <h2 class="mt-5">Servicio 2</h2> </div> <p class="text-justify"> Vestibulum eu vulputate lacus, eget dignissim velit. Sed odio enim, accumsan eu ligula sit amet, aliquet egestas elit. Donec auctor et quam ut dapibus. Donec a iaculis mauris. Donec molestie leo at ipsum eleifend consectetur. Phasellus quis lacus commodo, commodo ligula ac, volutpat tortor. Praesent imperdiet pellentesque feugiat. </p> </div> <div class="col-md-4"> <div class="mt-6 mb-3 text-center"> <img src="img/s3.png" /> <h2 class="mt-5">Servicio 3</h2> </div> <p class="text-justify"> Vestibulum eu vulputate lacus, eget dignissim velit. Sed odio enim, accumsan eu ligula sit amet, aliquet egestas elit. Donec auctor et quam ut dapibus. Donec a iaculis mauris. Donec molestie leo at ipsum eleifend consectetur. Phasellus quis lacus commodo, commodo ligula ac, volutpat tortor. Praesent imperdiet pellentesque feugiat. </p> </div> </v-row> <v-row align="center" justify="center" > <div class="col-md-4"> <div class="mt-6 mb-3 text-center"> <img src="img/s4.png" /> <h2 class="mt-5">Servicio 4</h2> </div> <p class="text-justify"> Vestibulum eu vulputate lacus, eget dignissim velit. Sed odio enim, accumsan eu ligula sit amet, aliquet egestas elit. Donec auctor et quam ut dapibus. Donec a iaculis mauris. Donec molestie leo at ipsum eleifend consectetur. Phasellus quis lacus commodo, commodo ligula ac, volutpat tortor. Praesent imperdiet pellentesque feugiat. </p> </div> <div class="col-md-4"> <div class="mt-6 mb-3 text-center"> <img src="img/s5.png" /> <h2 class="mt-5">Servicio 5</h2> </div> <p class="text-justify"> Vestibulum eu vulputate lacus, eget dignissim velit. Sed odio enim, accumsan eu ligula sit amet, aliquet egestas elit. Donec auctor et quam ut dapibus. Donec a iaculis mauris. Donec molestie leo at ipsum eleifend consectetur. Phasellus quis lacus commodo, commodo ligula ac, volutpat tortor. Praesent imperdiet pellentesque feugiat. </p> </div> <div class="col-md-4"> <div class="mt-6 mb-3 text-center"> <img src="img/s6.png" /> <h2 class="mt-5">Servicio 6</h2> </div> <p class="text-justify"> Vestibulum eu vulputate lacus, eget dignissim velit. Sed odio enim, accumsan eu ligula sit amet, aliquet egestas elit. Donec auctor et quam ut dapibus. Donec a iaculis mauris. Donec molestie leo at ipsum eleifend consectetur. Phasellus quis lacus commodo, commodo ligula ac, volutpat tortor. Praesent imperdiet pellentesque feugiat. </p> </div> </v-row> <v-row align="center" justify="center" > <div class="col-md-4"> <div class="mt-6 mb-3 text-center"> <img src="img/s7.png" /> <h2 class="mt-5">Servicio 7</h2> </div> <p class="text-justify"> Vestibulum eu vulputate lacus, eget dignissim velit. Sed odio enim, accumsan eu ligula sit amet, aliquet egestas elit. Donec auctor et quam ut dapibus. Donec a iaculis mauris. Donec molestie leo at ipsum eleifend consectetur. Phasellus quis lacus commodo, commodo ligula ac, volutpat tortor. Praesent imperdiet pellentesque feugiat. </p> </div> <div class="col-md-4"> <div class="mt-6 mb-3 text-center"> <img src="img/s8.png" /> <h2 class="mt-5">Servicio 8</h2> </div> <p class="text-justify"> Vestibulum eu vulputate lacus, eget dignissim velit. Sed odio enim, accumsan eu ligula sit amet, aliquet egestas elit. Donec auctor et quam ut dapibus. Donec a iaculis mauris. Donec molestie leo at ipsum eleifend consectetur. Phasellus quis lacus commodo, commodo ligula ac, volutpat tortor. Praesent imperdiet pellentesque feugiat. </p> </div> <div class="col-md-4"> <div class="mt-6 mb-3 text-center"> <img src="img/s9.png" /> <h2 class="mt-5">Servicio 9</h2> </div> <p class="text-justify"> Vestibulum eu vulputate lacus, eget dignissim velit. Sed odio enim, accumsan eu ligula sit amet, aliquet egestas elit. Donec auctor et quam ut dapibus. Donec a iaculis mauris. Donec molestie leo at ipsum eleifend consectetur. Phasellus quis lacus commodo, commodo ligula ac, volutpat tortor. Praesent imperdiet pellentesque feugiat. </p> </div> </v-row> </v-container> </template> <script> export default { name: 'GaleriaServicios', } </script> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/pagina-web-vuejs-vuetify ├── .git ├── /node_modules ├── /public ├── /src ├── /assets ├── /components ├── /Home ├── /Nosotros ├── /Servicios ├── Footer.vue ├── Home.vue ├── Menu.vue ├── Nosotros.vue ├── Servicios.vue // Creo este Archivo ├── /plugins ├── /router ├── /views ├── App.vue ├── main.js ├── .gitignore ├── babel.config.js ├── package-lock.json ├── package.json ├── README.md ├── vue.config.js ├── yarn.lock |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<template> <v-app> <v-main> <Menu/> <IntroduccionServicios/> <GaleriaServicios/> <Newsletter/> <router-view> <v-content> </v-content> </router-view> <Footer/> </v-main> </v-app> </template> |
Paso seguido, dentro de las etiquetas <script></script> importo los componentes y defino el título de la página Servicios.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<script> import Menu from './Menu'; import Footer from './Footer'; import IntroduccionServicios from './Servicios/IntroduccionServicios'; import GaleriaServicios from './Servicios/GaleriaServicios'; import Newsletter from './Home/Newsletter'; export default { name: 'Servicios', watch: { $route: { immediate: true, handler(to) { document.title = to.meta.title || 'Servicios - Mi Proyecto'; } }, }, components: { Menu, Footer, IntroduccionServicios, GaleriaServicios, Newsletter, }, } </script> |
Y si ejecuto el servidor local mediante el siguiente comando.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
npm run serve > pagina-web-vuejs-vuetify@0.1.0 serve > vue-cli-service serve INFO Starting development server... ... ... ... (Continua el arranque del servidor) ... ... <s> [webpack.Progress] 95% emitting CopyPlugin <s> [webpack.Progress] 98% after emitting <s> [webpack.Progress] 98% after emitting CopyPlugin DONE Compiled successfully in 17042ms18:46:03 <s> [webpack.Progress] 100% App running at: - Local: http://localhost:8080/ - Network: http://192.168.0.11:8080/ Note that the development build is not optimized. To create a production build, run yarn build. |
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.