vue js (4): componentes complejos

Introducción a vue-cli

Nicholas Krushenick

archivado en: JavaScript / 2 Abril, 2017 / taller:

En la entrada anterior de este taller dedicado a vue.js vimos cómo preparar componentes básicos mediante el método component(). Este tipo de componentes funcionan para aplicaciones muy sencillas, pero se quedan cortos para proyectos grandes con decenas y decenas de piezas, donde es mejor recurrir a los denominados «single file components».

Este tipo de componentes se parecen a los nativos y a sus derivados de polymer y se caracterizan por contener de forma encapsulada todo el html, el js y las css que necesitan para ser operativos.

Se escriben de forma individual en archivos con la extensión .vue y constan de tres partes: la plantilla con el html (template), los estilos css y un script de naturaleza modular.

<template>

<p class="bar">

{{foo}}

</p>

</template>

<script>

module.exports = {

data: function() {

return {

foo: 'Awesome!'

}

}

}

</script>

<style scoped>

.bar {

color: red;

}
<style>

Pero antes de seguir contando cosas sobre este tipo de componentes, explicaré antes cómo incluirlos en una aplicación web y para eso necesitamos saber cómo funciona vue-cli.

vue-cli

Es ya costumbre en los frameworks más potentes de javaScript contar con una herramienta de consola (cli) que nos facilita la vida a la hora de preparar entornos y scaffoldings. En el caso de vue se llama vue-cli y podemos instalarla de forma global con el npm:

npm install -g vue-cli

Una vez instalado podemos lanzar ya un proyecto con el comando vue init, el cual acepta dos parámetros: el sistema general para tratar los componentes, por lo general webpack, y el nombre del proyecto.

vue init webpack demo

El asistente nos pregunta una serie de cuestiones habituales en estos procesos -como si queremos incluir test- y al terminar, en la carpeta especificada tenemos ya la base del proyecto. Nos vamos ahí y ejecutamos npm install para que se descarguen las dependencias, que en general estarán relacionadas con los tests (karma, mocha, sinon...), los validadores formales de código (eslint), los conversores de ecmaScript 6 a versiones antiguas (babel) y vue-herramientas, como el vue-loader. En el package.json, claro está, las tenemos todas listadas.

cd demo

npm install

Cuando termina el proceso en el directorio node_modules tenemos una montonera de cosas instaladas que no deben preocuparnos, pues a efectos prácticos su funcionamiento será transparente mientras desarrollamos.

Con todo listo, por consola podemos ejecutar los scripts que vienen especificados en el package.json;

  • npm dev: para lanzar un servidor con un watcher en tiempos de desarrollo.
  • npm build: para preparar la aplicación final, la que irá aproducción.
  • npm unit: test unitarios.
  • npm e2e: test e22
  • npm test: los dos anteriores
  • npm lint: el eslint

De momento, solo nos interesa lanzar un servidor y un watcher para que se refresque de forma automática cuando cambiamos algo, así que escribimos por consola:

npm run dev

Y, ale op, en http://localhost:8080 tenemos una página boilerplate con un componente vue.

Módulos y scaffolding

No voy a explicar cada uno de los archivos que genera el vue-cli cuando comenzamos una aplicación, pues sería tedioso para el lector y para mí, pero sí es interesante que veamos en general cómo se entrelazan los componentes de una aplicación tipo.

Como es habitual en estos casos, el index está prácticamente vacío. Tan solo incluye un div que sirve de escenario principal, donde se irán renderizando de forma dinámica los componentes. Claro está, por encima y por debajo de este div podemos añadir todo el código html que necesitemos. Los scripts se inyectan de forma automática cuando generamos el build.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>demo</title>

</head>

<body>

<div id="app"></div>

<!-- built files will be auto injected -->

</body>

</html>

En main.js se define la instancia principal, la que sirve de raíz para el resto de los componentes-nodo que forman el árbol de la aplicación.

new Vue({

el: '#app',

router,

template: '<App/>',

components: { App }

})

Y aquí ya nos encontramos con el sistema de módulos de vue.js basado en los módulos nativos de ecmaScript 6 (antes era el de common), que en esencia viene a funcionar de esta manera. Con la fórmula «import algo de algún sitio» incluimos en una pieza la parte del código de otras piezas que necesitemos. En este caso,  la propia librería vue, el router, que explicaré otro día, y el componente principal de la aplicación, que denominan App.

import Vue from 'vue'

import App from './App'

import router from './router'

El reverso de este sistema modular es la fórmula «export», donde se indica qué parte del código de un módulo se podrá importar. En general, existen dos maneras de especificar esto. Una es seteando el método export de module y otra es con la partícula default, para que el contenido indicado sea el que se exporte por defecto. Por ejemplo, dado este objeto:

var miObjeto = {

foo: ()=> {

}

}

Podríamos exportar el código siguiendo alguna de estas fórmulas equivalentes:

module.exports = miObjeto;

export default {

foo: ()=> {

}

}

En nuestro caso, donde cada componente es un módulo, debería bastarnos la fórmula default, tal y como podemos ver en el componente boilerplate que genera vue-cli, el que hay en Hello.vue:

<script>

export default {

name: 'hello',

data () {

return {

msg: 'Welcome to Your Vue.js App'

}

}

}
</script>

Todo junto en un esquema conceptual:

Bueno, todo esto es un poco lío si nunca hemos trabajado antes con módulos, pero espero que en próximas entradas quede todo un poco más claro. De momento lo dejo aquí.

|| Tags: , ,

valoración de los lectores sobre vue js (4): componentes complejos

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (3 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Aportar un comentario

*