3. Vue CLI y ficheros .vue

En el articulo anterior aprendimos cómo crear un componente de forma global y algunas directivas básicas y condicionales. A continuación vamos a crear nuestro primer componente local (usando archivos.vue) y, de paso, aprender a usar Vue Cli, una herramienta bastante conveniente para generar desde el terminal, en segundos, todo un proyecto Vue con sus dependencias.

El primer paso será instalar Vue CLI de manera global en nuestro sistema

npm install -g vue-cli

Seguidamente crearemos nuestro primer proyecto, el cual llamaremos vue-demo. Usaremos la plantilla webpack-simple (podemos usar varias plantillas que nos generarán diferentes scaffoldings).

vue init webpack-simple vue-demo

Al ejecutar el comando, nos hará unas cuantas preguntas. Podemos dejar las respuestas por defecto presionando Enter en todas ellas.

Ya solo nos queda entrar en el directorio del proyecto e instalar las dependencias.

cd vue-demo
npm install

Finalmente corremos webpack junto con un server y el módulo HMR activado (Que se encargará de compilar y mostrar en el browser cualquier cambio que hagamos en el código)

npm run dev

Se nos abrirá automaticamente una pestaña en el navegador con nuestra App.

Estructura del archivo .vue

Para empezar a familiarizarnos con la magia de HMR (Hot Module Replacement), comenzaremos por eliminar casi la totalidad del template que viene por defecto en el archivo src/App.vue

<template>
  <div id="app">
    <p>Hello World</p>
  </div>
</template>

Guarda los cambios y dirígete al nevegador. ¡Magia! Con el módulo HMR activado, no tenemos que preocuparnos de refrescar el navegador y tampoco perderás los valores que tengan tus propiedades en ese momento.

Como ya habrás podido observar, un archivo .vue se compone de tres secciones. template, script y style(Ésta última es opcional)

Ahora, para probarlo todo en conjunto, le daremos un estilo propio al texto y haremos que el nombre del saludo sea dinámico.

<template>
  <div id="app">
    <p class="title">Hola {{ name }}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      name: 'Laraveles'
    }
  }
}
</script>

<style>
.title {
  text-align: center;
  color: red;
}
</style>

Cómo vimos antes, al guardar los cambios en tu editor todos los cambios estarán disponibles en el navegador ¡Sin refrescar! (Ahora no solo amas a Vue, también a su CLI)

En la próxima lección crearemos un componente «hijo» en su propio archivo .vue y aprenderemos a comunicarnos con él, pasando información de «padre» a «hijo» y viceversa.

Para terminar, si tienes dudas o sugerencias acerca de este articulo, puedes hacerla a través de los comentarios o unirte al Slack de Laraveles en el nuevo canal #Front podrás preguntar más acerca de las maravillas que nos trae Vue JS. Solo tienes que probar.

Comparte este artículo

Entra en la discusión y deja tu comentario

Veces