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

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

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.

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.

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

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.

Bien hasta aquí terminamos la primera parte de este tutorial, hemos creado un nuevo proyecto en Vue JS y hemos desplegado Vuetify, 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)

  • En la siguiente parte de este tutorial, crearemos el header, footer y el contenido de la página Home.
  • 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