Quasar y VueJS

Después de mucho tiempo para ser más exactos 4 años ..., vuelvo a publicar en mi blog esta vez hablare sobre Quasar, un framewok basado en VueJS, para desarrollar aplicaciones responsivas tanto para Web, Windows, IOS y Android.

Sólo hay que modificar el target de compilación y le decimos para que plataforma lo queremos, si así es... y tan solo con Html5, CSS y VueJS.

Esto me parece muy bueno ya que Quasar nos provee de muchos controles para nuestras aplicaciones y con el uso de VueJS la potencia que tiene es enorme y nos deja a nuestra creatividad e imaginación para desarrollar muchas cosas, sumado a esto el uso de Axios, Router, Vuex ... etc ni que decir.

Unos de los requisitos principales es el conocimiento de NodeJS felizmente existe mucha documentación del tema.

Aquí les dejo el link Quasar 

Quasar

Los pasos para iniciar un proyecto en Quasar son los siguientes:

• Si no está instalado el Framework de Quasar en la PC hay que instalarlo por única vez por medio de la terminal con el siguiente comando: npm install -g @quasar/cli
• Creamos el proyecto, con el comando $ quasar create y le decimos que opciones necesitamos usar, van desde axios, vuex .. etc

Seguido de ello ya se genera un layout completamente funcional y responsivo y con VueJS empezamos a dar forma a nuestra imaginación.

por ejemplo, crear componentes Vue o agregar páginas, es bajo el mismo concepto de Single File Component 

<template> </template> <script> // This is where your Javascript goes // to define your Vue component, which // can be a Layout, a Page or your own // component used throughout the app. export default { // } </script> <style> /* This is where your CSS goes */ </style>

La estructura de directorios es conocida si ya antes han trabajado con WebPack

. ├── src/ │ ├── assets/ # dynamic assets (processed by webpack) │ ├── statics/ # pure static assets (directly copied) │ ├── components/ # .vue components used in pages & layouts │ ├── css/ # CSS/Stylus/Sass/... files for your app | | ├── app.styl | │ └── quasar.variables.styl # Quasar Stylus variables for you to tweak │ ├── layouts/ # layout .vue files │ ├── pages/ # page .vue files │ ├── boot/ # boot files (app initialization code) │ ├── router/ # Vue Router | | ├── index.js # Vue Router definition | │ └── routes.js # App Routes definitions │ ├── store/ # Vuex Store | | ├── index.js # Vuex Store definition | │ ├── <folder> # Vuex Store Module... | │ └── <folder> # Vuex Store Module... │ ├── App.vue # root Vue component of your App │ └── index.template.html # Template for index.html ├── src-ssr/ # SSR specific code (like production Node webserver) ├── src-pwa/ # PWA specific code (like Service Worker) ├── src-cordova/ # Cordova generated folder used to create Mobile Apps ├── src-electron/ # Electron specific code (like "main" thread) ├── src-bex/ # BEX (browser extension) specific code (like "main" thread) ├── dist/ # where production builds go │ ├── spa/ # example when building SPA │ ├── ssr/ # example when building SSR │ ├── electron/ # example when building Electron │ └── .... ├── quasar.conf.js # Quasar App Config file ├── babel.config.js # Babeljs config ├── .editorconfig # editor config ├── .eslintignore # ESlint ignore paths ├── .eslintrc.js # ESlint config ├── .postcssrc.js # PostCSS config ├── .stylintrc # Stylus lint config ├── .gitignore # GIT ignore paths ├── package.json # npm scripts and dependencies └── README.md # readme for your website/App

Sólo necesitamos de Visual Studio Code, para porder hacer uso de esta tecnologia, ahora para nuestro BackEnd, podemos usar cualquier tecnologia en la que podamos implementar nuestras api, web api, micro servicios, rest ....

por ejemplo una web api creada en C# con Netcore 2.1

using ESoftware.Optimus.BusinessEntity;
using ESoftware.Optimus.BusinessLogic;
using Microsoft.AspNetCore.Mvc;

namespace ESoftware.Optimus.Api.Controllers
{
    [Route("api/Preferences")]
    [ApiController]
    public class PreferencesController : ControllerBase
    {
        private readonly PreferencesBL oBL;
        public PreferencesController(PreferencesBL obl)
        {
            oBL = obl;
        }


        [Route("Insert")]
        [HttpPost]
        public JsonResult Insert(PreferencesBE oEntity)
        {
            return new JsonResult(oBL.Insert(oEntity));
        }

        [Route("Update")]
        [HttpPost]
        public JsonResult Update(PreferencesBE oEntity)
        {
            return new JsonResult(oBL.Update(oEntity));
        }

      


        [Route("GetByUserID")]
        [HttpGet]
        public IActionResult GetByUserID(int USR_ERP_ID)
        {
            return new JsonResult(oBL.GetByUserID(USR_ERP_ID));
        }



    }
}

para poder hacer uso o consumir la api y asignar los valores al localStorage, desde VueJS, hacemos uso de axios

//Obtener el preferences
axiosInstance
.get("api/Preferences/GetByUserID?USR_ERP_ID=" + self.oEntity.USR_ERP_ID)
     .then(preferencesResponse => {
                LocalStorage.set("_preferences", preferencesResponse.data);
 });

El resultado es una page, rápida profesional, ya que el uso de Router, nos permite navegar entre las page sin ver el postbak esto hace que la carga se muy rápida para el usuario

Eloy