¿Como modularizar proyecto VueJS sin la necesidad de compilar?

Este es mi primer post. En este, voy a explicar un truco para usar VueJS de otra manera. La documentación oficial de VueJS ofrece 2 maneras de definir componentes Vue. En este post ofreceré una manera alternativa y no oficial.

Segun la documentación de VueJS, la manera más básica de definir componentes es usando Vue.component. Esto puede funcionar bien para proyectos muy pequeños, pero a medida que crece el proyecto surge la necesidad de modularizarlo.

VueJS provee otra manera, y es el uso de Componentes de un Solo Archivo (Single File Components) (Véase: https://es.vuejs.org/v2/guide/single-file-components.html), pero su uso requiere compilar el proyecto cada vez que se hace un cambio.

Por ejemplo, podemos definir un componente en el archivo “App.vue” de la siguiente manera:

<template>
  <p>Hola {{ nombre }}!</p>
</template>
 
<script>
export default {
  data() {
    return {
      nombre: 'Pedro'
    }
  }
}
</script>
 
<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

Hoy en día, la mayoría de los navegadores modernos (no es el caso de Internet Explorer), soportan javascript versión ES6 y el uso de módulos ES6. Además, si se quiere utilizar VueRouter (de la manera habitual), se necesita de un navegador que soporte dynamic import(). Los navegadores más usados ya lo soportan (Véase: https://caniuse.com/#feat=es6-module-dynamic-import)

Para escribir el ejemplo anterior como modulo ES6, primero hay que cambiar la extensión del archivo a ".js", quedando el nombre "App.js". Y su código fuente sería el siguiente:

const style = document.createElement('style');
style.textContent = /*css*/ `
  .saludo {
    font-size: 2em;
    text-align: center;
  }
`;
document.head.appendChild(style);
 
export default {
  template: /*html*/ `
    <p class="saludo">Hola {{ nombre }}!</p>
  `,
  data() {
    return {
      nombre: 'Pedro'
    }
  }
}

Analizaremos cada una de las lineas del código:

const style = document.createElement('style');

Esta linea crea un elemento style. El lenguaje HTML tiene 2 maneras de definir estilos CSS. Una forma es usando elementos link, por ejemplo: <link rel="stylesheet" href="styles.css">. La otra forma es utilizando elementos style, esta es la que utilizaremos.

style.textContent = /*css*/ `
  .saludo {
    font-size: 2em;
    text-align: center;
  }
`;

En este bloque de código agregamos el código CSS al elemento style. Notese que he agregado el comentario /*css*/. Si utilizamos Visual Studio Code como editor de código, podemos instalar la extensión "es6-string-css", que nos permite tener resaltado de sintaxis en el código CSS.

Además, he agregado la clase "saludo" al elemento p. Esto lo hago así, porque el atributo scoped (usado en la etiqueta style de los Single File Components) no está soportado por el navegador. Entonces, debo agregar clases a cada elemento al que le doy estilos.

document.head.appendChild(style);

Esta linea agrega el elemento style al elemento head del documento, pues todos los estilos CSS se definen ahí. Ademas, cabe aclarar que este código se ejecutara una sola vez, por lo que no vamos a tener estilos CSS repetidos.

export default {
  template: /*html*/ `
    <p class="saludo">Hola {{ nombre }}!</p>
  `,
  data() {
    return {
      nombre: 'Pedro'
    }
  }
}

En este bloque de código, a diferencia del ejemplo original, se agrega la propiedad template. Esta es la manera tradicional que se usa para definir la plantilla HTML cuando usábamos Vue.component. Ademas, aparece el comentario /*html*/, que sirve para que el editor resalte la sintaxis del código HTML. Para eso, se debe instalar en Visual Studio Code, la extensión "es6-string-html".

Con todo esto, ya no necesitamos compilar el proyecto cada vez que hagamos cambios al mismo. Y al no tener la etapa de compilación, podremos probar código y depurar en tiempo de ejecución sin necesidad de ninguna configuración previa.

Si el proyecto tiene muchas componentes dependientes el uno del otro, puede llegar a ser una desventaja, pues, la carga de la aplicación web se retrasaría, ya que el navegador realiza muchas peticiones HTTP, una por cada componente. Para solventar esta situación, se puede utilizar los componentes que ofrecen bibliotecas como Vuetify, Buefy, ElementUI, BootstrapVue, etc. Des esa manera, no estas reinventando la rueda y utilizas menos componentes propios, por lo que tu aplicación cargará más rapido.

Por ultimo, hay que aclarar que cuando se use las bibliotecas Vue, VueRouter, Vuex y demás. Se puede usar tanto la versión para navegador (Full UMD), como la versión modulo ES6. (Véase: https://vuejs.org/v2/guide/installation.html)

Les dejo el código fuente del archivo “index.html”:

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="vue.min.js"></script>
   <title>Saludo</title>
</head>
<body>
   <div id="app"></div>
   <script type="module" src="main.js"></script>
</body>
</html>

y el del archivo “main.js”:

import App from './App.js';
 
new Vue({
   el: '#app',
   render: createElement => createElement(App)
});

Saludos!

¿Como hacer un buscador con PHP y MySQL?

Deja un comentario

Your email address will not be published / Required fields are marked *