Lección 2: Creando nuestro primer proyecto con Quasar Framework

Hola amigo lector, en esta primera entrega veremos como crear la estructura de nuestro proyecto con quasar-cli.

Quasar-CLI se define como el orgullo de Quasar Framework, es una herramienta que genera de forma automática la estructura del proyecto en cuestión de minutos. Además dispone de una serie de comandos  que asegura se sigan las mejores prácticas de Quasar. 

Tabla de contenidos

Instalar Nodejs

Antes de instalar quasar-cli debemos asegurarnos de que tenemos instalada la última versión de Node.js o una superior a la 8.9.0, para comprobarlo podemos escribir en la consola con el siguiente comando:

$ node -v 
v10.16.0

La forma más fácil y rápida de instalar Nodejs en Ubuntu es a través del repositorio oficial.

Actualizamos el cache

$ sudo apt update

Seguidamente se puede instalar Nodejs con el siguiente comando:

$ sudo apt install nodejs

Después de introducir la contraseña comienza la instalación.

Una vez finalizada la instalación de Node es necesario instalar NPM como administrador de paquetes de Nodejs.

$ sudo apt install npm

Por último comprobamos la versión instalada con el siguiente comando:

$ node -v 
v10.16.0

Instalación de quasar-cli

Ahora estamos listos para comenzar la instalación de quasar-cli, nos vamos a la consola y ejecutamos el siguiente comando para desinstalar quasar-clic en caso de que tengamos una versión inferior a la 1.0

$ sudo npm uninstall -g quasar-cli

Seguido ejecutamos el siguiente comando para instalar quasar-cli

$ sudo npm install -g @quasar/cli

De esta forma tendremos quasar-cli instalado en nuestro ordenador, para comprobarlo ejecutamos el comando:

$ quasar

y veremos la siguiente pantalla:

Crear nuestro primer proyecto con Quasar Framework

Ahora estamos listos para crear nuestro primer proyecto con Quasar. Vamos a crear una carpeta llamada tareas donde crearemos el frontend y el backend.

$ mkdir tareas

Nos movemos a la carpeta tareas para crear nuestro proyecto, el cual tendrá el nombre de frontend porque será donde crearemos toda la lógica para el frontend y de esta forma separarla del backend.

$ cd tareas
$ quasar create frontend

Seguidamente comienza a crearse la estructura del proyecto y es necesario completar algunas configuraciones como veremos a continuación.

En las primeras 4 opciones establecemos el nombre del proyecto, la descripción y el autor.

En la siguiente opción seleccionamos el preprocesardor de CSS que utilizaremos, nos movemos hacia abajo hasta llegar a Stylus  y presionamos Enter.

Seguido debemos seleccionar la forma en que se importarán los componentes de Quasar. Seleccionamos la segunda opción para importarlos de forma manual, es un poco más tediosa, pero el proyecto compila de forma más rápida y el tamaño del empaquetado será mucho menor.

Continuamos y seleccionamos las dependencias que vamos a instalar en el proyecto, es este caso:

• ESLint para escribir el código de forma estándar.
• Vuex para el manejo de los estados de variables.
• Axios para la comunicación con el backend.
• Vue-i18n para la internacionalización del proyecto.

Seguido seleccionamos el formato que utilizaremos en ESLint, seleccionamos la opción Standard

Por último seleccionamos NPM como el gestor de paquetes de Node.

Después de haber establecido todas las opciones del proyecto se instalarán todas las dependencias, la configuración final del proyecto debería de quedar como se muestra en la siguiente imagen. 

Terminada la instalación veremos el siguiente mensaje en la consola:

Seguidamente accedemos a la carpeta frontend y ejecutamos el proyecto

$ cd frontend
$ quasar dev

Esperamos a que se compile el proyecto y se abra automáticamente en el navegador.

De esta forma ya tendremos nuestro proyecto creado y ejecutándose.

Conclusiones

Como hemos podido ver Quasar-CLI  es una gran herramienta que nos facilita la creación de un proyecto en cuestión de minutos.

En la próxima lección estudiaremos la estructura de un proyecto y los comandos de Quasar-CLI