En esta lección aprenderemos cómo podemos separar nuestros componentes en diferentes archivos que permitan a cada componente agrupar sus plantillas y código de JavaScript en un mismo lugar. Estos archivos que tendrán la extensión .vue, se llaman «Single File Components» y podremos utilizarlos por supuesto gracias a webpack y vue-loader los cuales instalamos en la lección pasada haciendo uso de vue-cli. En esta lección también haremos uso de Hot Module Replacement (HMR) que nos permitirá hacer cambios en el código y poder verlos reflejados automáticamente en el navegador, sin necesidad de recargar la página.
Notas
El archivo main.js va a ser el nuevo archivo principal donde se va a crear el objeto VM:
import Vue from 'vue'
import App from './App.vue'
var vm = new Vue({
el: '#app',
render: h => h(App)
})
En la primera línea del archivo cargamos e importamos a Vue, lo que quiere decir que ya no necesitaremos hacer referencia al CDN. En la segunda línea se importa otro componente (App) que luego se carga en nuestra aplicación mediante una Render Function:
render: h => h(App)
Aprende más sobre las Render Functions de Vue.js.
El componente App es el archivo App.vue que se encuentra en el directorio src/. Las extensiones .vue son un tipo de archivo con el que vamos a trabajar de ahora en adelante y es en estos archivos donde se definirá todo el código de la aplicación, no sólo JavaScript sino también las plantillas de Vue e incluso CSS, aunque esto último es opcional. Sin embargo en lugar de crear un componente global dentro del archivo, exportamos un objeto donde vamos a tener los datos, métodos, computed properties, etc.:
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
Al pasar el código de nuestra aplicación de tareas a App.vue ya no necesitamos hacer referencia al elemento #app ya que el componente App.vue se cargará a través de la función render en el archivo main.js:
export default {
el: '#app', // Esto ya no es necesario hacerlo en App.vue
methods: {
/**/
También convertimos el valor de la propiedad data de un objeto a una función que va a retornar un objeto, como aprendimos en la lección sobre componentes:
data: function () {
return {
new_task: '',
/**/
}
}
No es necesario definir los estilos CSS dentro del archivo .vue, estos son opcionales.
Si sigues los ejemplos y no carga el CSS de la aplicación, es debido a que no estamos incluyendo a Bootstrap como una dependencia en package.json.
Por el momento incluimos el CSS de forma manual en el archivo en el archivo index.html:
... <head> <meta charset="utf-8"> <title>curso-vue-styde</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="style.css" rel="stylesheet">
El contenido del archivo style.css de nuestra aplicación de tareas lo pasamos a un archivo del mismo nombre ubicado en el directorio generado por Vue.js.
Si estas usando el servidor de desarrollo de webpack y realizas cambios en un archivo estatico como index.html es necesario recargar la página de forma manual.
Dentro del directorio src creamos un nuevo archivo llamado Task.vue y dentro de este colocamos el código de nuestro componente app-task. El código HTML de la plantilla lo debemos encerrar en etiquetas <template>:
// src/Task.vue
<template>
<li class="list-group-item"
:class="{editing: editing, completed: !task.pending}"
...
Dentro del mismo archivo Task.vue definimos el código JavaScript del componente justo debajo de la etiqueta <template>:
// src/Task.vue
<script>
export default {
data: function () {
return {
editing: false,
draft: ''
};
},
/**/
</script>
Una vez hecho esto importamos el componente Task en App.vue, esto lo hacemos dentro de la etiqueta <script> del componente App.vue. Además en la definición del componente App incluimos el componente Task:
<script>
import Task from './Task.vue'
export default: {
components: {
'app-task': Task
},
methods: {
/**/
}
/**/
}
</script>
Con components podemos registrar componentes locales dentro de otro componente o del objeto VM principal.
Dentro del directorio src creamos un archivo llamado event-bus.js y en este archivo creamos el Event Bus, pero en lugar de hacerlo como una variable global, simplemente lo exportamos:
// src/event-bus.js import Vue from 'vue' export default new Vue;
Para utilizar el objeto Vue necesitamos importarlo, tal como se encuentra en el archivo main.js. Al importar Vue no hacemos referencia al nombre de un archivo si no que se hace referencia al nombre del componente, tal como aparece en el archivo package.json:
"dependencies": {
"vue": "^2.2.1"
},
En el archivo Task.vue le hacemos referencia a event-bus.js importandolo:
<script>
import EventBus from './event-bus.js'
export default {
/**/
}
<script>
Dentro del directorio src nuevamente creamos otro archivo, esta vez llamado Icon.vue donde colocaremos el código del componente app-icon. También definimos una etiqueta <template> donde colocamos la plantilla del componente:
// src/Icon.vue
<template>
<span class="cssClasses" aria-hidden="true"></span>
</template>
<script>
export default {
props: ['img'],
computed: {
cssClasses: function () {
return 'glyphicon glyphicon-'+this.img;
}
}
}
</script>
Nuestro componente Icon.vue debemos importarlo y registrarlo en Task.vue para poder utilizarlo:
<script>
import EventBus from './event-bus.js'
import Icon from './Icon.vue'
export default {
components: {
'app-icon': Icon
},
/**/
</script>
Recuerda que en el proceso de desarrollo muy a menudo vamos a equivocarnos, por lo tanto es importante acostumbrarnos a leer los errores para tratar de encontrar la solución a los problemas que se van presentando. Para ello te recomiendo muchísimo utilizar el plugin de Vue para Chrome que te proporcionará mensajes detallados de advertencias, errores y sugerencias.
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
Lección anterior Introducción a vue-cli y webpack Lección siguiente Uso de ES6 en Vue con webpack y Babel