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

Publicado: 5 Mayo 2019 por José Luis García Martínez

Categorías:
Tutorial 26

Guía de primeros pasos en vuejs 3

1. Prerrequisitos e instalación
2. Creando componentes
3. Plugins visual code
4. linter : eslint
5. Generador de componentes

1. Prerrequisitos e instalación

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.

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.