Cuando queremos desarrollar una aplicación con Vue con toda la potencia de ES6, ademas detener un entorno de desarrollo listo, con de diferentes templates o configuraciones predefinidas dependiendo del nivel de complejidad de nuestra aplicación, entonces tenemos que mirar vue-cli.

Vue CLI

Vue  CLI nos brinda templates con es6, webserver, hot reload, bundle, sass, testing y mas. Depende de nuestro proyecto,  podemos elegir entre los diferentes templates:

  • simple 
  • webpack simple 
  • webpack
  • browserify
  • browserify simple.

Instalando Vue CLI

Para instalar vue-cli tenemos que tener nodejs instalado, e igual que cualquier otro paquete de nodejs usamos el siguiente comando para tenerlo disponible de forma global.

npm install -g vue-cli

Al finalizar instalación, podemos ver los templates que vue-cli disponibles con el comando vue list.

vue list muestra todo los templates disponibles.

En este demo utilizare webpack-simple, que me brinda webpack + vue-loader preconfigurado.

Para crear el proyecto escribimos el comando vue init webpack-simple holavue, este nos pedirá descripción del proyecto, el autor y si queremos usar Sass.

Ahora solo tenemos que entrar al directorio creado, ejecutar npm install, al finalizar npm run dev este iniciara webpack transpilando el código, detectando los cambios y el servidor web con la siguiente página de inicio.

npm run dev

 

Vue Project Template

Un vue proyect consta de un grupo de archivos y directorios:

.babelrc: define la configuración de babel para transpilar el código de es6 a es5.

.gitignore: específica a git que ignore los directorios y archivos innecesarios.

index.html: Página de inicio que hace referencia a una main.js que es la instancia principal de vue. package.json para los paquetes de nodejs.

webpack.config.js  Configura los loaders, webpack, compilación, minificación y varios temas mas.

main.js: Es punto de entrada y contiene una instancia de vue escrita en es6, sin un template y utilizando render, para sobrescribir la propiedad template, pasandole el componente App.vue.

import Vue from 'vue'
import App from './App.vue'

new Vue(
{
el: '#app',
 render: h => h(App)
})

Root Component y Single File Components .Vue

App.vue Es el componente root, esta formado de <template>, <script> y <style>. Este sera el component principal y de donde colgarán los demás componentes que crearemos.

Los archivos .vue o Single File Components nos permiten definir el template, nuestro código javascript y estilo css en un solo archivo, todo esto gracias a webpack y  vue-loader.

Una App.vue se compone de un template el cual representará los elementos que queremos en el DOM y  script donde definimos nuestro componente de Vue y  style escribimos los estilos del componente.

<template>
</template>
<script>
export default {
}
</script>
<style>
<style>

Ya con nuestra estructura por defecto creada con vue-cli podemos empezar a crear mas componentes, registrarlos y consumirlos desde nuestro RootComponent,  por ejemplo podemos crear un directorio components y dentro crear un archivo player.vue.

En template definimos una variable {{playmode}} que expondremos en data, (retornando en una función) y  el método changeMode() que cambiará el modo del juego.

<template>
<div>
  <h2>Lebron James is {{playmode}}</h2>
  <button @click="changeMode">Play!</button>
</div>
</template>
<script>
  export default {
      data: function(){
          return {
              playmode: 'with the ball'
          }
      },
      methods:{
          changeMode(){
              this.playmode = 'shooting';
          }
      }
  }
</script>
<style>
</style>

Usando el componente

Para utilizar nuestro componente, podemos registrarlo globalmente en Main.js, primero importamos con una alias el componente player y registramos o Vue.component especificando el selector o tag y el y la variable o el objeto que referencia el componente.

import Vue from 'vue'
import App from './App.vue'
import Player from './components/player.vue'
Vue.component('my-player',Player)
new Vue({
el: '#app',
render: h => h(App)
})

Ahora podemos llamar el tag <player></player> desde nuestro App.vue 

Registrando Multiple components

Pero si quisiéramos registrar varios componentes, suponiendo que tenemos un componente header, footer y team, podemos usar la propiedad components de nuestro root elements e importarlos:

<script>
  import TopArea  from './components/top-area.vue';
  import FooterArea from './components/footer-area.vue';
  import Team from './components/team.vue';
  import Player from './components/player.vue';
  export default {
      components: {
          'top-area': TopArea,
          'footer-area': FooterArea,
          'team': Team,
          'player': Player
      },
      data: function(){
          return {
              title: 'root component'
          }
      },
}
</script>

Scope Style

Una de las cosa que más me ha gustado de .vue es tener scope de el css, por defecto cualquier estilo que agregamos al style en cada componente se crea a nivel “global” por tanto afecta a todos los componentes ejemplo.

Todos los componentes que he creado tienen una clase .container si le pusiera un tamaño o color pues aplicaría y afectaría a todos, como puedo controlar eso ?

Agregando scoped a los estilos del componente, esto permite que el estilo solo se aplique al componente actual.

<style scoped>
   h2{
       color: red;
   }
   .container{
       border:1px solid;
       background: #cacaca;
   }
</style>

Deploy to Production

Vue  nos permite realizar un build listo para optimizar nuestro código y publicarlo en producción,  con el comando “npm run build” , esto crea la carpeta dist donde tendremos nuestro código minificado y optimizado listo.

npm run build

Hasta aquí una pequeña introducción a vue-cli , si deseas saber más puedes pasarte por la página oficial.

https://github.com/vuejs/vue-cli
https://github.com/vuejs-templates