Tu primera aplicación con Node.js, Vue.js y Quasar


¡Hola!

Haz tu decisión, lo primordial es entender qué es Node.js, ya lo explico aquí: http://reynaldramirez.com/2019/11/15/la-utilidad-de-node-js-como-programador-hoy-en-dia/
Bien, una ves entiendes esto procedamos entonces a crear la aplicación, debes primeramente asegurarte de que ya tienes instalado Node.js en tu computadora para que así cualquier petición de proceso que hagamos al navegador sea posible, de lo contrario, no podremos pasar a hacer esto. En cambio, si lo tienes instalado será posible para ti continuar con este Step by Step.

¿No lo tienes instalado? Aquí te dejaré un tutorial de cómo se instala Node.js en tu computadora de los mismos creadores de este servicio:
Instalación: https://nodejs.org/es/download/
Documentación: https://nodejs.org/es/docs/

¿Ya lo instlaste? Sigamos... Procede a comprobar que lo tienes bien instalado, para esto abre tu Power Shell o Consola y corre el siguiente comando: node -v 
Output de Ejemplo: v4.0.3
Comprueba también que tienes el npm, corriendo el siguiente comando:
npm -v
Output de Ejemplo: 6.9.0

Ahora procede a correr el siguiente comando, está vigente hasta la fecha: npm install -g @quasar/cli

Este comando lo que hará es proceder a instalar el CLI o Interfaz de Comando en Linea, nos permitirá configurar de manera automática y “amigable” la aplicación que crearemos con quasar (en este caso).

Ahora creemos el proyecto en quasar, pero antes de continuar debes dirigirte al directorio en donde deseas crear el proyecto, es decir, si quieres crearlo en Documents o Documentos (que es donde normalmente una persona nueva en esto lo crearía) entonces deberás correr un comando como el siguiente:
cd C:\Users\nombreDeTuUsuario\Documents\quasar\proyecto

Si deseas puedes cambiar “\quasar\” por el nombre del proyecto que deseas crear y obviar entonces lo que sigue, que es “\proyecto”.

Luego de que ya tienes claro en donde quieres crear tu proyecto y te has dirigido a la dirección en donde quieres que se ubiquen los archivos que darán funcionamiento al mismo, debes entonces correr el comando que le dirá a Node.js que quieres que ese proyecto sea uno de tipo Vue.js pero utilizando el Framework de Quasar. ¿Cómo?

quasar create <nombre del proyecto> (youtube-todo, asi yo le pondre de nombre mientras tanto)

Entre las opciones/preguntas que nos saldrán seleccionaremos las siguientes, en orden:
1. Nombre del proyecto – La dejamos por defecto –
2. Nombre del producto o de producción – Lo dejamos por defecto –
3. Descripción del proyecto – Le ponemos la que queramos o lo dejamos por defecto –
4. Selecciona el pre-procesador de CSS preferido – Seleccionamos None, por ahora – (en mi caso me gusta mucho Sass)
5. Ahora nos dice que podemos utilizar los componentes y directivos de Quasar si deseamos o también podemos trabajar de forma “manual” – Seleccionaremos ‘Importar Automáticamente lo que este en uso’
6. Selecciona los features o complementos necesarios para el proyecto:
– Utilizaremos Vuex y Axios –
7. Ahora nos pregunta por Cordova si lo queremos disponible, simplemente lo ignoraremos.
8. Luego nos pregunta si queremos seguir usando NPM
– Si, usar NPM –

De tu haber logrado todo esto, habras terminado la INSTALACIÓN del proyecto.

Luego nos dirigiremos a nuestra Consola de Comandos y escribiremos el nombre del directorio que contiene nuestro proyecto recién creado.

Y correremos: cd youtube-todo
Una ves allí, escribiremos: code .
Esto nos abrirá el editor de texto, en mi caso tengo Visual Studio Code, si ustedes usan otro pues deben abrirlo mediante la metodología que ese editor tenga para abrir sus archivos.

Una ves allí debemos abrir el Power Shell o Terminal desde el mismo editor, ¿cómo?. En mi caso podemos hacerlo desde el Menú superior, en la opción “Ver” -> “Terminal” // o también podemos precionar CTRL + ñ; y se nos abrirá la Terminal automáticamente.

Entonces para finalizar, ejecutamos: quasar dev.
Y automáticamente nos dirigirá a nuestro navegdor con la aplicación de Quasar abierta.

Qué contendrá la aplicación?
Un menú responsive y un área completa de main o demo de demostración o muestra; además de la versión de la aplicación a la esquina superior izquierda y más!

Si te gustó, espera el próximo Step by Step… Donde estaré realizando un TODO completito.