Desarrolla aplicaciones en Vue rápidamanente con Quasar

Quasar Framework es un framework de código abierto basado en Vue.js que nos permite desarrollar aplicaciones web, móviles y de escritorio de alta calidad con una sola base de código.

Su objetivo es facilitarnos y acelerar el desarrollo, proporcionando una gran cantidad de componentes, herramientas y configuraciones listas para usar.

Instalación de Quasar

Para empezar a usar Quasar, necesitamos tener Node.js y npm (o yarn) instalados.

Creación de un Nuevo Proyecto

Una vez instalada la CLI, podemos crear un nuevo proyecto con el siguiente comando:

npm init quasar

Sigamos las instrucciones en pantalla para configurar nuestro nuevo proyecto.

Iniciando el Servidor de Desarrollo

Para comenzar a trabajar en nuestro nuevo proyecto, naveguemos hasta el directorio del proyecto y ejecutemos:

cd quasar-project
quasar dev

Esto iniciará un servidor de desarrollo y abrirá nuestra aplicación en el navegador.

Instalación de Quasar CLI

De forma opcional, podemos instalar Quasar CLI globalmente en nuestro sistema utilizando npm:

npm install -g @quasar/cli

Estructura del Proyecto

La estructura básica de un proyecto Quasar incluye directorios y archivos como:

• src/: Contiene el código fuente de la aplicación.
• src/components/: Componentes Vue reutilizables.
• src/layouts/: Plantillas de diseño.
• src/pages/: Vistas o páginas de la aplicación.
• quasar.conf.js: Archivo de configuración del proyecto.

Cómo Usar Quasar

Creación de componentes

Podemos crear nuevos componentes dentro del directorio src/components/. Aquí hay un ejemplo de un componente básico:

<template>
  <q-btn @click="sayHello" label="Click Me"/>
</template>

<script>
export default {
  methods: {
    sayHello() {
      this.$q.notify({
        message: 'Hello, Quasar!',
        color: 'green'
      });
    }
  }
}
</script>

Uso de componentes predefinidos

Quasar proporciona un montón de componentes UI que podemos utilizar fácilmente. Por ejemplo, para agregar un botón y un cuadro de diálogo, podemos hacerlo así:

<template>
  <div>
    <q-btn label="Open Dialog" @click="showDialog = true" />
    <q-dialog v-model="showDialog">
      <q-card>
        <q-card-section>
          <div class="text-h6">Dialog Title</div>
        </q-card-section>

        <q-card-section>
          This is a simple dialog.
        </q-card-section>

        <q-card-actions align="right">
          <q-btn flat label="Close" color="primary" @click="showDialog = false" />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDialog: false
    }
  }
}
</script>

Configuración de rutas

Las rutas de nuestra aplicación se configuran en el archivo src/router/routes.js. Aquí hay un ejemplo básico:

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/Index.vue') },
      { path: 'about', component: () => import('pages/About.vue') }
    ]
  }
]

export default routes;

Construcción para Producción

Cuando estemos listos para desplegar nuestra aplicación, podemos generar los archivos optimizados para producción con:

quasar build

Este comando creará una carpeta dist/ con los archivos listos para ser servidos en un servidor web.