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?
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.
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.
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.
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.
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]
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.
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.
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.
Esperamos unos segundos la compilación y se abrirá el proyecto en el navegador predeterminado con la dirección http://localhost:8080/#/
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».
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:
enjoy!
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! :)
SDKMAN! es una herramienta para la administración de versiones paralelas de varios programas de desarrollo de software c...
En esta ocasión aprenderemos a conectaros con una base de datos Oracle desde Laravel. Es un tutorial sencillo y cortito,...
Para ponerse a tono con el ambiente mundialista de Brasil 2014, en este post construiremos un swing java al que llamarem...
En este tuto realizaremos la implementación y ejecución de procedimientos almacenados de MySQL en Java, si quieres darle...
MAUS es una aplicación para dispositivos móviles con el Sistema Operativo Android que te permite realizar exámenes desde...
j2html es una biblioteca para java que permite generar código html seguro desde código java utilizando sus propias etiqu...
Por lo general se usan transacciones a nivel base de datos y posteriormente se llaman estos a través de procedimientos a...
En este post, aprenderemos como conectar Visual Basic 6 con SQL Server, abrir una tabla, leer su contenido y mostrar est...
Lo que veremos en este post es la configuración del driver para PHP de SQL Server que ha creado Microsoft el cual permit...
Google Bard la inteligencia artificial de Google se actualiza con una mejora que entra a competir con el resto de IAs y...