Menu

Introducción a Vue

vuejs - October 18, 2018 por Carlos Rojas | Edita este Post.
Vue CLI3.2 .1

Una parte fundamental de cualquier producto es elegir cuidadosamente su framework el cual es una decisión arquitectonica clave. Vue es uno de los nuevos jugadores en este campo y entra a competir contra React y Angular.

Vue es un framework progresivo para construir interfaces de usuario. el nucleo de la biblioteca esta diseñado para encargarse solo de la capa de la vista y es por eso facilmente adaptable al trabajo con proyectos existentes. Por otro lado, Si no quieres mezclar Vue en otros proyectos es perfectamente capaz de soportar sofisticadas SPA usado con herramientas modernas y bibliotecas soportadas.

Paso 1: Instalando lo necesario.

Para comenzar nuestro primer proyecto en Vue vamos a utilizar el CLI oficial que podemos encontrar en cli.vuejs.org.

$npm install -g @vue/cli

Adicionalmente, voy a instalar el cli-service-global que es necesario si quiero correr un servidor local.

$npm install -g @vue/cli-service-global

una vez tenga todo listo podemos verificar con:

$vue --version

Paso 2: Crear un Proyecto nuevo.

El CLI me ayudara a crear toda la estructura necesaria para iniciar my proyecto en Vue.

$vue create hello-world

con esto tendremos todos los archivos necesarios para comenzar nuestro proyecto.

Paso 3: Instalar Plugins.

Vue tiene una arquitectura basada en plugins la cual hace que podamos agregar las cosas que consideremos necesarias para nuestro proyecto y no tener dependencias innecesarias.

Para nuestro ejemplo vamos a generar una petición http hacia randomuser.me la cual es una de las tareas más basicas en una SPA. y para esto utilizaremos la biblioteca Axios.

$vue add axios

ya con esto tendremos todo lo necesario para crear nuestro primer proyecto en Vue.

Paso 4: Probando nuestro serve local.

Nos ubicamos en nuestra carpeta src/ y ejecutamos.

$vue serve

y debes ver la pagina de inicio por defecto de un proyecto en Vue.

Hasta aca ya tenemos nuestra primera App en Vue sin necesidad de mucho codigo. Increible no?.

Paso 5: Modificando nuestro Componente.

Ahora si ingresas al proyecto de vue con tu editor favorito veras en la carpeta src/ un componente que carga todo. Llamado App.vue y una carpeta components/ vamos a abrir esa carpeta y veras el componente components/HelloWorld.vue. el cual se ve de la siguiente manera.

<template>
  <div class="hello">
    <h1></h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Paso 6: Agregadando nuestros llamado Http.

Vamos a modificar nuestro archivo components/HelloWorld.vue y le vamos a agregar un llamado en el momento que ya esta cargado mounted.

<template>
  <div class="hello">
    <h1></h1>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'HelloWorld',
  data: function () {
    return {
      msg: {}
    }
  },
  mounted: function () {
    axios({ method: "GET", "url": "https://randomuser.me/api" }).then(result => {
        this.msg = result.data.results;
      }, error => {
        console.error(error);
      });
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

es decir el componente se va a cargar y va a llamar al Api en randomUser y nos va a traer esa info y se la va a asignar a la variable msg.

Bueno espero sea de ayuda al iniciar con Vue y hasta un proximo post :)

Ver código

Recuerda:

Si quieres ejecutar este demo en tu computadora, debes tener el entorno de ionic instalado y luego de descargar o clonar el proyecto debes ubicarte en tu proyecto en la terminal y luego ejecutar

npm install

esto es para descargar todas las dependencias del proyecto.

¡Compártelo!

Artículos relacionados: