Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

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

Demo

Cuando hablamos de Vue JS, estamos hablando de uno de los frameworks JavaScript más populares en la actualidad, hasta la fecha de este Post aún lo es, no sabemos que pase en el futuro, podemos utilizar otras herramientas para complementar nuestro trabajo con Vue JS, como Vuetify el cual nos permite hacer uso de componentes basados en Material Design, para ver el potencial de ambas herramientas juntas, vamos a crear un página web, acompáñame en esta nueva aventura, vamos con ello.

Partes

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

Asimismo te invito a escuchar el Podcast: “Como Hacer De La Programación Un Estilo De Vida” 

Spotify: Sound Cloud:

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

Nuevo Proyecto en Vue JS

Vamos a empezar creando un nuevo proyecto con Vue JS, para esto ejecutamos el siguiente comando.


Durante la creación del nuevo proyecto, hay unas preguntas que Vue Cli se te irá haciendo, no quiero enfocarme en ellas y salirme del tema, si tienes alguna duda puedes escribirla en los comentarios y te estaré respondiendo sin problemas.

A mi proyecto le puse de nombre pagina-web-vuejs-vuetify, tu le puedes dar el nombre que desees. Luego de crear el proyecto Vue JS me ha generado un conjunto de directorios y archivos útiles para que el proyecto funcione correctamente.


Para verificar que el proyecto con Vue JS se creo correctamente, corremos el servidor de Vue JS, ejecutando el siguiente comando.


Entonces si voy al navegador y accedo al dirección local http://localhost:8080/ que me indica Vue CLI en la consola, debería de ver sin problemas que el nuevo proyecto se ha creado correctamente.

Ahora pasemos a instalar y desplegar Vuetify en Vue JS.

Desplegando Vuetify y Vue Router

Las librerías Vuetify y Vue Router son indispensables para crear este proyecto, entonces vamos a instalarlas a continuación.

Vuetify

Para usar Vuetify en Vue JS podemos hacer uso dela versión alojada en CDN como indica su documentación, pero yo lo instalaré mediante la consola de comandos ejecutando el siguiente comando.

Me hace una pregunta sobre cambios en el repositorio del proyecto, presiono y seguido de la tecla ENTER para decirle que si y dejamos que la consola haga su trabajo.


Luego me hace un pregunta para seleccionar un Preset, elijo la opción por defecto Default (recommended)


Y con esto tengo instalado Vuetify, si estoy ejecutando el servidor de Vue JS y voy al navegador, debería de ver la siguiente pantalla.

En la imagen anterior puedes ver que automáticamente se ha reemplazado la vista de Vue JS que tenia por defecto, por una nueva vista creada con elementos de Vuetify como la app-bar de la parte superior donde esta el texto o logo Vuetify.

Ahora pasemos a instalar Vue Router.

Vue Router

Ya que nuestra página web va tener 4 páginas que son Home, Nosotros, Servicios y Contacto, necesitamos crear sus respectivas rutas, estas rutas las voy a crear con Vue Router la cual es una librería oficial de Vue JS para poder crearlas, voy a instalar Vue Router ejecutando el siguiente comando en mi consola.


Si bien hemos instalado tanto Vuetify como Vue Router, pero tenemos que instanciarlos para poder usarlos, para esto abrimos el archivo llamado main.js que se encuentra en pagina-web-vuejs-vuetify > src > main.js


Dentro del archivo main.js instancio en la parte superior Vuetify y Vue Router, asimismo dentro de la instancia new Vue() envío Vuetify y Vue Router a mi componente principal App (App.vue).


Bien hasta aquí terminamos la primera parte de este tutorial, hemos creado un nuevo proyecto en Vue JS, asimismo he desplegado Vuetify y Vue Router, con esto ya tenemos listo todo para comenzar a crear las páginas de nuestro sitio web.

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)

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

Salir de la versión móvil