Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

Queremos mejorar la calidad de nuestros cursos. Por favor ayúdanos llenando esta pequeña encuesta
Proyecto base SPA con Vue, Vuex, VueRouter, Axios y Element-Ui
Actualizado el 14 Enero, 2018 y leído 6,755 veces
Calificación: 10.00 / 10

Proyecto base SPA con Vue, Vuex, VueRouter, Axios y Element-Ui

Anexsoft

Muy bien, en este tutorial les voy a compartir un base project que he realizado para aplicaciones SPA usando Vue y allegados a este.

 

¿Qué necesitamos?

Lo primero que necesitamos es tener instalado todo el entorno de NODE en nuestra PC, luego de esto ejecutaremos el siguiente comando.

npm install -g vue-cli

 

Opcional

Para crear el SPA tenemos un template básico que nos permite tener Vue + VueRouter que es lo escencial para crear un SPA y es ofrecido por el equipo de Vue. Asimismo, todo el base project ha sido hecho sobre este comando. Ejecutar este comando por si quieres hacerlo desde cero y por tu cuenta.

vue init webpack spa

Más información en el siguiente link https://scotch.io/tutorials/how-to-build-a-simple-single-page-application-using-vue-2-part-1

 

¿Qué tenemos en nuestro base project?

Este proyecto base ya tiene ciertas cosas avanzadas para agilizar el desarrollo, es decir la idea de un base project es clonarlo/descargarlo y comenzar a usarlo omitiendo aspectos de configuración que se vuelven tedioso. Recaldado esto vamos a comenzar a explicar que cosas he usado y para que sirven.

Dependencias usadas

  • VueJs: pues este es nuestro poderoso framework para crear componentes ui reutilizables.
  • Vue-Router: hará que podamos crear una aplicación SPA ya que nos permite navegar por la URL y cargar componentes de VueJs
  • Vuex: permite compartir recursos durante el ciclo de vida nuestro aplicación. Por ejemplo, si queremos hacer uso de variables globales con Vuex se vuelve una tarea sencilla.
  • Axios: nuestra poderosa y popular librería para realizar peticiones ajax.
  • Element-UI: el Boostrap para Vue. ¿Se entiende no?, es un kit completo para enriquerer nuestro proyecto con componentes reutilziables como grids, datepicker, inputnumber, etc.

 

Estructura del proyecto

Esto esta mejor explicado en el video adjunto pero vamos hacer un pequeño resumen. Bien, me voy a enfocar más que nada en la carpeta src:

 

Componentes

Irán nuestros componentes reutilizables que vamos creando. Es decir las páginas de navegación de nuestro proyecto.

<template>
<div>
<h2>Example Module</h2>
<div v-loading="loading">
  <el-table :data="items" :default-sort = "{prop: 'title', order: 'ascending'}" style="width: 100%">
    <el-table-column prop="id" label="Id" sortable width="50"></el-table-column>
    <el-table-column prop="title" label="Títutlo" sortable>
      <template slot-scope="scope">
        <a :href="'#/example/' + scope.row.id">{{ scope.row.title }}</a>
      </template>
    </el-table-column>
    <el-table-column prop="body" label="Mensaje"></el-table-column>
  </el-table>
</div>
</div>
</template>

<script>
export default {
  name: "ExampleIndex",
  data() {
    return {
      loading: false,
      items: []
    };
  },
  created() {
    let self = this;
    self.getAll();
  },
  methods: {
    getAll() {
      let self = this;
      self.loading = true;

      self.$store.state.services.exampleService
        .getAll()
        .then(r => {
          self.loading = false;
          self.items = r.data;
        })
        .catch(r => {});
    }
  }
};
</script>

Shared: esta carpeta deberíamos usarlo para componentes compartidos en todo nuestro proyecto. Por ejemplo, el menú de navegación se encuentra allí.

 

Router

Contiene las rutas de nuestro proyecto y aquí hacemos el enlace de una ruta con un componente x. Por ejemplo, si queremos cargar una página que sea de las últimas noticias, aquí haremos el enlace de estos.

import Vue from 'vue'
import Router from 'vue-router'
import Default from '@/components/Default'
import ExampleIndex from '@/components/example/Index'
import ExampleView from '@/components/example/View'

Vue.use(Router)

const routes = [
  { path: '/', name: 'Default', component: Default },
  { path: '/example', name: 'ExampleIndex', component: ExampleIndex },
  { path: '/example/:id', name: 'ExampleView', component: ExampleView },
]

export default new Router({
  routes
})

 

Services

Como buenas prácticas de desarrollo lo ideal es reutilizar servicios, en nuestro caso las peticiones AJAX a nuestras API lo vamos a guardar aquí para evitar hacer directamente un petición AJAX desde nuestro componente.

class ExampleService {
    axios
    baseUrl

    constructor(axios) {
        this.axios = axios
        this.baseUrl = 'https://jsonplaceholder.typicode.com/'
    }

    getAll(params) {
        let self = this;
        return self.axios.get(`${self.baseUrl}posts`);
    }

    get(id) {
        let self = this;
        return self.axios.get(`${self.baseUrl}posts/${id}`);
    }
}

export default ExampleService

 

Store

Esto es la configuración de Vuex y donde le decimos que queremos guardar para que sea compartido. En nuestro caso vamos a guardar los servicios.

Store/Index.js

import Vue from 'vue'
import Vuex from 'Vuex'
import services from './services'

Vue.use(Vuex)

const state = {
    services
}

export default new Vuex.Store({
    state
})

Store/services.js

import Axios from 'axios'
import exampleService from '../services/ExampleService'

// Axios Configuration
Axios.defaults.headers.common.Accept = 'application/json'

export default {
    exampleService: new exampleService(Axios)
}

 

¿Cómo descargar y ejecutar el proyecto?

El link al repositorio se encuentra en el adjunto, lo clonan e instalan las dependencias mediante el comando.

npm install

Tenemos 2 entornos de trabajo

Dev Environment

Esto creará un servidor local para que podamos hacer pruebas

npm run dev

PROD Environment

Esto compilará y crear una carpeta bundle donde encontraremos nuestros archivos necesarios. Estos archivos lo copian y lo pegan donde desean trabajar o lo suben a su host ya que, es el resultado final.

npm run prod

¡Adquiera ya!

  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter
  • Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

    Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#
  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC

Últimas publicaciones

Encuesta

¿Cómo nos conociste?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2018 Anexsoft, blog y cursos online de TI.