Hoy vamos a instalar el paquete vue-cli que nos permite generar, desde la línea de comandos, una estructura básica para nuestro proyecto Vue.js. Hay varios tipos de templates con diferentes paquetes y funcionalidades cada uno (las puedes ver aquí) y podemos elegir el que queramos según nuestras necesidades.
También pasaremos el ejemplo creado con componentes en el post #4 a componentes de un solo archivo, es decir, crearemos a partir de uno de los templates que nos provee el paquete vue-cli, un ejemplo igual que el del post #4, pero en vez de que todos los componentes estén en el mismo archivo, cada componente será un archivo .vue con su HTML, JS y CSS.
Primero instalamos el paquete vue-cli:
|
1 |
npm install -g vue-cli |
Cuando finalice, vamos a crear la estructura básica para nuestro ejemplo. Yo voy a escoger el template llamado webpack-simple (el resto lo puedes ver aquí):
|
1 |
vue init webpack-simple todo-list |
Si te fijas, indicamos el nombre del template que queremos (webpack-simple) y seguidamente el nombre del proyecto que vamos a crear (todo-list).
Entramos dentro de la carpeta creada para nuestro proyecto, instalamos los paquetes necesarios y lo ejecutamos.
|
1 2 3 |
cd todo-list npm install npm run dev |
Una vez hecho todo ésto, vamos al navegador a http://localhost:8080/ y veremos algo así:
Si ves ésto, es que todo hasta aquí está funcionando.
Ahora vamos a empezar a crear el ejemplo. Como he dicho antes, vamos a pasar el ejemplo de la lista de tareas que hicimos con componentes a componentes de un solo archivo (cada componente será un archivo).
Si te fijas en el src/main.js la sintaxi es un poco diferente ya que se está utilizando JavaScript ES6 (el nuevo estándar de JS) con el compilador Babel (puedes ver en el package.json como se están añadiendo los paquetes y en el webpack.config.js como están siendo llamados) que transformará el código a JavaScript ES5.
Vamos a la carpeta src y abrimos el archivo App.vue y borramos su contenido. El archivo main.js lo dejamos como está.
Vamos a empezar creando el componente TaskItem. Creamos una carpeta dentro de src llamada components y ahí creamos un fichero llamado TaskItem.vue . Le añadimos este código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<template> <li> <input type="checkbox" v-model='task.done'> <span v-bind:class="{'task-done' : task.done}">{{ task.title }}</span> <button v-on:click='onClickRemove(task)'>x</button> </li> </template> <script> export default { name: 'task-item', props: ['task'], methods: { onClickRemove(task) { this.$emit('click-remove-task', task) } } } </script> <style> .task-done { text-decoration:line-through; } </style> |
Si te fijas, es el mismo código que hay en la versión anterior en el componente simplemente lo hemos adaptado a JavaScript ES6.
Ahora vamos a crear el componente TaskList. Como antes, creamos un archivo llamado TaskList.vue en src/components .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<template> <ul id="list-tasks"> <task-item v-for="(task, index) in tasks" :task='task' :key="index" @click-remove-task='removeTask'></task-item> </ul> </template> <script> import TaskItem from './TaskItem.vue'; export default { name: 'task-list', components: { 'task-item' : TaskItem }, props: ['tasks'], methods: { removeTask(task) { var index = this.tasks.indexOf(task) this.tasks.splice(index, 1) } } } </script> <style> </style> |
Lo mismo de antes, copiamos el código adaptándolo a JavaScript ES6. Hay una diferencia y es que como este componente necesita llamar al componente TaskItem tenemos que importarlo, por lo demás igual.
Ahora creamos el componente Tasks. Creamos el archivo en src/components :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<template> <div> <input type="text" placeholder='New task' v-model='newTask' @keyup.enter='addNewTask'> <p v-show='!tasks.length'>No tasks!</p> <task-list :tasks='tasks'></task-list> </div> </template> <script> import TaskList from './TaskList.vue'; export default { name: 'tasks', components: { 'task-list' : TaskList }, data () { return { newTask: '', tasks: [ { title: 'Tarea 1', done: false}, { title: 'Tarea 2', done: true} ] } }, methods: { addNewTask() { var newTaskObj = { title: this.newTask, done: false } this.tasks.push(newTaskObj) this.newTask = '' } } } </script> <style> </style> |
Igual que los anteriores y también importamos el componente TaskList, ya que se utiliza en el template.
Por último, vamos al archivo App.vue , que es el componente principal de la app como puedes ver el archivo main.js , y le agregamos este código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<template> <tasks></tasks> </template> <script> import Tasks from './components/Tasks.vue'; export default { name: 'app', components: { 'tasks' : Tasks }, data () { } } </script> <style> </style> |
Simplemente estamos importando el componente Tasks y llamándolo desde el template.
Ves al navegador a la URL http://localhost:8080/ y verás lo mismo que había en el ejemplo del post #4:
-
– https://es-vuejs.github.io/vuejs.org/v2/guide/single-file-components.html
– https://github.com/vuejs/vue-cli
Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.
CONTACTAR