¿Que es VueJS?

Podemos definir VueJS como un Framework Web Progresivo, ya que nos permite ir escalando progresivamente nuestra aplicación según lo vamos necesitando.

VueJS ofrece en su core un renderizado declarativo y un sistema de componentes.

El renderizado declarativo se basa en el concepto de la reactividad entre la vista y el modelo pudiendo refrescarse en ambos lados.

Cuando cambiamos los datos del modelo la vista se refresca y cuando cambiamos desde la vista un valor los datos del modelo se refrescan.

A continuación un ejemplo muy simple de como empezar a usar VueJS.

index.html

Preparando nuestro entorno

Con esta breve introducción a VueJS, ya podemos empezar a preparar el entorno de trabajo.

Comenzamos instalando una extensión para Google Chrome llamada Vue Devtools, que no es necesaria pero es muy útil para depurar nuestras aplicaciones.

Lo siguiente que haremos sera instalar la linea de comandos de VueJS (vue-cli) usando npm con el siguiente comando: npm i -g @vue/cli-init.

Si necesitas mas información sobre el CLI de VueJS (templates, opciones, configuraciones), puedes consultar toda la información en la web de npm. 

Empezando con nuestras pruebas

Con el CLI de VueJS instalado crearemos una carpeta para nuestro proyecto y allí dentro vamos a generar nuestra aplicación con el siguiente comando: vue init webpack-simple my-app.

El comando anterior tiene 2 parámetros:

• webpack-simple: Es uno de los templates que ofrece el CLI de VueJs.
• my-app: El nombre de la aplicación

Cuando ejecutemos el comando nos aparecerá un asistente para la configuración del proyecto que deberemos ir rellenando.

Una vez terminado el proceso deberíamos tener la siguiente estructura.

A continuación una breve explicación de la estructura del proyecto:

• .babelrc: Es el fichero de configuración de babel. Babel es un transpilador de código.
• .gitignore: Ignorar ficheros y/o carpetas para nuestro repositorio en git.
• index.html: Es nuestro archivo principal, donde se inicia todo.
• package.json: Contiene toda la configuración de nuestro proyecto.
• webpack.config.js: Es nuestro archivo de configuración para webpack.
• node_modules: Carpeta donde se guardan todas las dependencias que necesitamos.
• README.md: Información sobre nuestro proyecto.
• src: Aquí esta todo el código de nuestra aplicación.
  • main.js: Aquí se instancia nuestra aplicación.
  • App.vue: Este sería nuestro componente principal. En los archivos .vue se añaden los estilos (css), la lógica (js) y la estructura (html).
  • assets: Carpeta con los recursos.

Ahora que sabemos como es la estructura del proyecto vamos a ejecutarlo.

Si seguimos las instrucciones que aparecen en el archivo README.me deberíamos instalar las dependencias necesarias usando el siguiente comando npm i.

Y finalmente para servir la aplicación en nuestro ordenador (localhost) usaremos el comando npm run dev o si queremos construir la aplicación para producción usaremos el comando npm run build.

App.vue

Esto mola!!!, que bien!!, tengo mi primera aplicación en VueJS, pero…., ¿si no hemos desarrollado nada?,¿Si se ha creado todo automáticamente?.

Tranquilo, ahora vamos a cambiar algunas cosas de App.vue para empezar a familiarizarnos con VueJS.

App.vue

A continuación me gustaría hacer una pequeña pausa en el curso de VueJS y explicar una herramienta llamada Eslint, que aunque no pertenece a VueJS, si que es una ayuda para tener nuestro código homogéneo.

Eslint es una herramienta que nos permite hacer ciertos tipos de comprobaciones:

• Establecer un estilo de código homogéneo para todo el desarrollo y futuros desarrollos, permitiendo definir unas reglas para todos las apliquen en el código.
• Podemos configurar esas reglas instalándolas como librerías de npm.

Para poder usarlo en nuestro proyecto debemos usar los siguiente comandos:

• npm i -D eslint
• npm i -D eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node
• npm i -D eslint-plugin-html

Una vez terminada la instalación vamos a crear un archivo en la raíz del proyecto llamado .eslintrc con la siguiente configuración:

Si queremos comprobar si funciona eslint, tenemos múltiples opciones, ya sea usando webpack, añadiendo un plugin a nuestro editor de código o desde la propia consola.

Evidentemente la mejor opción es usar webpack para que compruebe nuestro código cuando se esta preparando la aplicación y usar el plugin en nuestro editor de código para tener el aviso en el momento que estamos desarrollando.

Para finalizar vamos a configurar webpack para que use eslint.

Instalaremos el loader necesario usando el siguiente comando npm i -D eslint-loader.

El siguiente paso es configurar webpack añadiendo una nueva regla

Y por último configurar nuestro archivo de configuración de eslint.

Con esto ya sabemos que es VueJS y como preparar nuestro entorno de trabajo.