vuevuejsclivue
www.jolugama.com

Vuejs 3 - Primeros pasos - creación de proyecto, generación de componentes y directivas principales

Guía de primeros pasos en vuejs 3

1. Prerrequisitos e instalación

Guía oficial de la versión 3.x

1.1. instalación vue cli 3

$ npm install -g @vue/cli
# o
$ yarn global add @vue/cli

Además instalamos los siguientes:

$ npm i -g @vue/cli-plugin-babel @vue/cli-plugin-typescript @vue/cli-plugin-unit-mocha  eslint-plugin-vue @vue/cli-service

1.2. Creando proyecto

$ vue create miapp

Elije manual select.  y añade las características que quieras

1.3. Ejecutando app

$ npm run serve

$ npx vue-cli-service serve

2. Creando componentes

Vue no dispone de un cli tan completo como tiene Angular. Es por ello que la generación de los componentes han de ser a mano.

2.1. Eventos (click), métodos y directivas (if, bind)

Se crea un objeto de tipo vue, donde se indica el nombre de el componente el.

En data se almacena las variables scope que se necesitan en el html.

Un ejemplo de un componente, que dispone de su ts y el html.

mi-componente.html

<div id="app">
  <div v-if="mostrar">
    
    <img v-bind:src="imagen" />
    <img :src="imagen" />
    <!-- forma abreviada -->
  </div>
</div>

<div v-if="mostrar">
  
  <img :src="imagen" />
</div>

<button v-on:click="toggleMostrar">Mostrar/Ocultar</button>
<button @click="toggleMostrar">Mostrar/Ocultar</button>
<!-- forma abreviada -->

mi-componente.ts

const app = new Vue({
  el: "#app",
  data: {
    mostrar: true,
    mensaje: "Hola Vue!",
    imagen:
      "http://.../una-imagen.jpg"
  },
  methods: {
    toggleMostrar: function() {
      this.mostrar = !this.mostrar;
    }
  }
});

2.2. Single file component y separando la lógica del template

  • Single file component: desde el propio archivo vue, incrustando el template.
<div id="app" />;
const app = new Vue({
  el: "#app",
  template: `
    <div>
      <div v-if="mostrar">
        
        <img :src="imagen" />
      </div>
      <button @click="toggleMostrar">Mostrar/Ocultar</button>
    </div>
  `,
  data: {
    mostrar: true,
    mensaje: "Hola Vue!",
    imagen:
      "http://.../una-imagen.jpg"
  },
  methods: {
    toggleMostrar: function() {
      this.mostrar = !this.mostrar;
    }
  }
});
  • Usando <template> y separando el código del html

html

<div id="app"></div>
<template id="ejemplo">
  <div>
    <div v-if="mostrar">
      
      <img :src="imagen" />
    </div>
    <button @click="toggleMostrar">Mostrar/Ocultar</button>
  </div>
</template>

vue

const app = new Vue({
  el: '#app',
  template: '#ejemplo',
  data: {
    ...
  },
  methods: {
    ...
  }
})

2.3. Directiva for

vue

const app = new Vue({
  el: "#app",
  template: '#ejemplo',
  data: {
    cursos: [
      {
        name: "curso 1",
        url: "http://.../una-imagen.jpg"
      },
      {
        name: "curso 2",
        url:
          "http://.../una-imagen.jpg"
      },
      {
        name: "curso 3",
        url: "http://.../una-imagen.jpg"
      }
    ]
  }
});

html

<div id="app">
  <ul>
    <li v-for="(curso, index) in cursos" :key="index">
      <a :href="curso.url"></a>
    </li>
  </ul>
</div>

3. Plugins visual code

  • Vue VS Code Extension Pack

  • Vetur

4. linter : eslint

npm install -g eslint
eslint --init

5. Generador de componentes

Vue no tiene un cli tan bueno como el de Angular. Aún no dispone de generador de componentes. Puedes probar esta biblioteca

# $ npm install -g vue-generate-component
$ npm install -g vue-generate-component-typescript

Crea un componente:

$ vgc footer

y lo mueves a la carpeta correcta.

 
... y finalmente... Si te ha gustado, difúndelo. Es solo un momento. escríbe algo en comentarios 😉 Gracias.