Componentes de un Solo Archivo (Single File Components)

Introducción

En muchos proyectos de Vue los componentes globales son definidos usando Vue.component, seguido de new Vue({ el: '#container' }) para apuntar a un elemento contenedor en el cuerpo de cada página.

Esto puede funcionar muy bien para proyectos pequeños y medianos, donde JavaScript solo se usa para mejorar ciertas vistas. Sin embargo, en proyectos más complejos, o cuando la interfaz está exclusivamente impulsada por JavaScript, varias desventajas se hacen evidentes:

Todo esto se resuelve mediante Componentes de un Solo Archivo con extensión .vue, que pueden usarse con herramientas de compilación como Webpack o Browserify.

Aquí tenemos un ejemplo de un archivo que llamaremos Hello.vue:

Ejemplo de Componente de un Solo Archivo (click para ver código como texto)

Ahora tenemos:

Como prometimos, podemos también usar pre-procesadores como Pug, Babel (con módulos ES2015) y Stylus para obtener componentes más limpios y con más funcionalidades.

Ejemplo de Componente de un Solo Archivo con pre-procesadores (click para ver código como texto)

Estos lenguajes específicos son solo ejemplos. Usted podría usar, con la misma facilidad, Bublé, TypeScript, SCSS, PostCSS, o cualquier otro pre-procesador que le ayude a ser productivo. Si utiliza Webpack con vue-loader, también le ofrece soporte de primera clase para módulos CSS.

¿Qué sucede con la separación de intereses?

Es importante notar que la separación de intereses no equivale a la separación de tipos de archivo. En el desarrollo moderno de UI nos encontramos con que, en lugar de dividir el código base dentro de 3 capas enormes que se entrelazan entre sí, tiene mucho más sentido dividirlas dentro de componentes más livianos, y componer las capas entre sí. Dentro de un componente, su plantilla, lógica y estilos están inherentemente acoplados; ubicándolos en un mismo lugar logramos que el componente sea más coherente y mantenible.

Incluso si no le gusta la idea de utilizar Componentes de un Solo Archivo, puede aprovechar las características de hot-reload y compilación previa, separando su JavaScript y CSS en archivos diferentes:

<!-- my-component.vue -->
<template>
<div>Esto será precompilado</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

Empezando

Ejemplo con Sandbox

Si quiere profundizar y comenzar a jugar con Componentes de un Solo Archivo, visite esta aplicación to-do de ejemplo en CodeSandbox.

Para usuarios nuevos en Sistemas de Compilación de Módulos en JavaScript

Con los componentes .vue entramos en el reino de las aplicaciones JavaScript avanzadas. Esto significa aprender a usar algunas herramientas adicionales, si es que usted aún no lo ha hecho:

Luego de tomarse un día para profundizar en estos recursos, le recomendamos consultar Vue CLI 3. Siga las instrucciones y debería tener un proyecto Vue con componentes .vue, ES2015, y hot-reload en unos pocos minutos!

Para Usuarios Avanzados

La Interfaz de Línea de Comandos (CLI) se encarga de la mayoría de las configuraciones de herramientas para usted, pero también permite una personalización detallada a través de sus propias opciones de configuración.

En caso de que prefiera definir su configuración de compilación desde cero, deberá configurar manualmente Webpack con vue-loader. Para obtener más información sobre Webpack, consulte su Documentación Oficial y la Academia Webpack.

Ya sea que prefiera Webpack o Browserify, hemos documentado plantillas para ambos, tanto para proyectos simples como otros más complejos. Le recomendamos visitar github.com/vuejs-templates, eligiendo la plantilla correcta para usted, y seguir las instrucciones en el archivo README para generar un nuevo proyecto con vue-cli.