Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Desarrollo Web / Primeros pasos con Quasar Framework

Primeros pasos con Quasar Framework

Autor jc mouse viernes, julio 3, 2020

Quasar es un proyecto Open Source basado en el Framework Vue que nos permite desarrollar proyectos de todo tipo, por ejemplo, aplicaciones móviles híbridas, aplicaciones PWA (Progresive Web Aplication), aplicaciones SPA (Single Page Aplicaction), SSR (Server Side Rendering) y aplicaciones de escritorio.

En este post daremos los primeros pasos para trabajar con este framework realizando el típico «Hola Mundo» para lo cual paso a paso iremos instalando, configurando, modificando y ejecutando nuestro proyecto de ejemplo.

¿Qué necesitamos?

  • NPM (Sistema de Gestión de paquetes) instalado y configurado
  • Node JS v10 o superior
  • Visual Studio Code
  • Navegador Web
  • Quasar Framework

Comencemos:

Paso 1. Instalar Quasar CLI

Lo primero que debemos hacer, y por una única vez, es instalar Quasar CLI. Para lo cual, en una terminal escribimos lo siguiente:

npm install -g @quasar/cli

Podemos verificar su correcta instalación escribiendo en consola solo «quasar» y este desplegara información en pantalla.

Paso 2. Crear el proyecto Quasar

Ya que tengamos instalado Quasar CLI, en consola escribimos el comando «quasar create <nombre-proyecto>» seguido del nombre de nuestro proyecto, es decir:

quasar create hola-mundo

Antes de descargar todo el kit de Quasar Framework, el asistente nos realizara algunas preguntas referentes a nuestro proyecto, veamos cuales son:

Las primeras 4 preguntas se refieren a, el nombre del proyecto (ej. «hola-mundo»), nombre del producto (Ej.»Hola Mundo Cruel»), una descripción y el nombre del autor.

desarrollo web javascript vue

A continuación  nos pide que seleccionemos un preprocesador CSS, nos recomienda Sass, puedes aceptar la recomendación y presionar [enter] o seleccionar None (ninguno) como hicimos para este ejemplo.

css preprocessor sass

Después nos pregunta el tipo de estrategia que queremos que use Quasar. Dejamos la primera opción, el Auto-import y presionamos [enter]. Esta opción puede ser cambiada después así que no hay mucho problema en cual elegimos ahora.

componentes quasar

La siguiente pregunta tiene que ver con las características de nuestro proyecto, tenemos varias opciones disponibles, podemos seleccionar/deseleccionar items, usando la [barra espaciadora]. Para este ejemplo seleccionamos Vuex.

eslint

Luego nos pregunta si queremos seguir instalando dependencias una vez creado el proyecto, nos recomienda Yarn, también disponemos de NPM, seleccionamos el segundo y [enter]

instalador de paquetes javascript

Finalmente comienza a instalar todas las dependencias en nuestro proyecto, debemos esperar a que la descarga termine, varia según la configuración que se haya elegido, para este ejemplo descarga unos 200 MB.

A continuación podemos observar los archivos generados para nuestro proyecto.

archivos de un proyecto quasar

Paso 3. Abrir el proyecto en Visual Studio Code

Ahora es el turno de abrir el editor VSC y cargar nuestro proyecto. A continuación podemos ver lo que contiene un proyecto de Quasar Framework.

visual studio code proyecto quasar

Describiremos cada uno de las carpetas y archivos más adelante en nuevos post.

Paso 4. Desplegar la aplicación

Abrimos una nueva terminal en VSC y escribimos el comando «quasar dev», esto desplegara el proyecto en modo SPA.

ejecutar proyecto spa con quasar en chrome

Esperamos unos segundos la compilación y se abrirá el proyecto en el navegador predeterminado con la dirección http://localhost:8080/#/

Aplicacion SPA de Quasar Framework

Ya para terminar, realizaremos una pequeña edición en el proyecto.

Nos dirigimos a la carpeta layouts y abrimos el archivo MainLayout.vue, buscamos la linea de código que dice «Quasar App» y la reemplazamos por «Hola Mundo».

codigo js quasar en vsc

A continuación nos dirigimos a la carpeta assets, que es donde se guardan los recursos de la aplicación, encontraremos un solo archivo SVG, el cual corresponde al logo de Quasar, lo abrimos y reemplazaremos todo el contenido a partir de la etiqueta <svg> por:

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"> 
 <g>
  <title>background</title>
  <rect fill="#fff" id="canvas_background" height="202" width="402" y="-1" x="-1"/>
  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
   <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
  </g>
 </g>
 <g>
  <title>Layer 1</title>
  <text stroke="#000" transform="matrix(3.3084950833703886,0,0,5,-38.305007559216605,-69.8125) " xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_1" y="41.453125" x="17.709009" stroke-width="0" fill="#000000">JC Mouse</text>
 </g>
</svg>

Guardamos y automáticamente se refresca la vista de nuestra aplicación en el navegador:

tutorial quasar en español

enjoy!

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

«Hola Mundo» en kotlin con Eclipse

«Hola Mundo» en kotlin con Eclipse

Kotlin es un lenguaje de programación de tipado estático que corre sobre la máquina virtual de Java y que también puede...

Primeros pasos en Jaspersoft Studio

Primeros pasos en Jaspersoft Studio

¿Que es Jaspersoft Studio? Jaspersoft Studio es el nuevo diseñador de informes basado en Eclipse para JasperReports y Ja...

Convertir objetos java en XML

Convertir objetos java en XML

Continuando con el estudio del meta lenguaje XML (Lenguaje de Marcado Extensible) bastante utilizado en el intercambio d...

Crea un servicio web REST con PHP y MYSQL -Parte 2

Crea un servicio web REST con PHP y MYSQL -Parte 2

Segunda parte del tutorial «Crea un servicio web REST con PHP y MYSQL«, en esta segunda y ultima parte se completara la...

Servicio Web SOAP en Java

Servicio Web SOAP en Java

En este post vamos a construir un Servicio Web bajo el protocolo SOAP (Simple Object Access Protocol) el cual básicament...

Ejemplo de operaciones CRUD con MyBatis 3

Ejemplo de operaciones CRUD con MyBatis 3

«MyBatis es una herramienta de persistencia Java que se encarga de mapear sentencias SQL y procedimientos almacenados co...

Comparte lo que sabes

Categorias

Últimas entradas

WhatsApp anuncio a través de su blog que ya se encuentra disponible la función de envío de fotos y videos TEMPORALES, es...

Muchas de las innovaciones computacionales de la NASA se desarrollaron para ayudar a explorar el espacio, pero ahora la...

TikTok es una plataforma de microvideos muy popular entre los jóvenes el cual cuenta ya con millones de videos cortps de...

Una clase JTree permite mostrar datos de una forma jerárquica y en realidad este objeto no contiene sus datos; es decir,...

Herramientas

Generador de Enlaces a Whatsapp