Refactorización de Importaciones en Vue.js con Plugins

Clase 13 de 27 • Curso Avanzado de Vue.js 2

Contenido del curso

Bienvenida al curso

1
Vue consumiendo APIs oficiales de Blizzard
13:27 min

VueCli, configuración inicial del proyecto y consumo del API de Blizzard

Creación de los componentes y layouts de nuestro proyecto

Agregando funcionalidades avanzadas a nuestro proyecto

Nuestro proyecto va creciendo, poco a poco, con librerías, configuraciones y demás contenido.
El fichero de arranque main.js está haciéndose un poco difícil de manejar debido a todo el contenido que le estamos metiendo.

Una buena idea puede ser llevarse todo el código de librerías de terceros a una carpeta externa. Esta carpeta ya la tenemos creada y se llama /plugins. Vamos a meter ahí el código de Bootstrap-Vue y de FontAwesome. Luego lo importaremos en el main.js y así quedará mas limpio y legible nuestro código.

Empezamos creando el fichero BootstrapVue.js dentro de /plugins, y le damos el siguiente contenido:

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

Tal y como dice la documentación, importamos BootstrapVue, nos traemos el CSS y después hacemos 'uso' de BootstrapVue desde Vue.

Hacemos lo mismo con FontAwesome, creamos el fichero fontAwesome.js dentro de /plugins y movemos todo el contenido que había en main.js a este fichero:

import Vue from 'vue'

import { library } from '@fortawesome/fontawesome-svg-core'
import { faSkull, faCrown, faDungeon, faHatWizard, faHammer, faGem } from '@fortawesome/free-solid-svg-icons'
import { faVuejs, faBootstrap, faFontAwesome, faGithub, faBattleNet } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(
 faSkull,
 faCrown,
 faDungeon,
 faHatWizard,
 faHammer,
 faGem,
 faVuejs,
 faBootstrap,
 faFontAwesome,
 faGithub,
 faBattleNet
)

// Esta es la forma de registrar un componente global con Vue
// El primer parámetro es cómo queremos que se use/llame nuestro componente desde el HTML
// El segundo parámetro es la referencia al componente (que acabamos de importar)
Vue.component('font-awesome-icon', FontAwesomeIcon)

Tu carpeta de /plugins se vería así:

📂 /plugins
   ├── bootstrapVue.js
   └── fontAwesome.js

Lo que hemos hecho es mover el todo el contenido de dichas librerías fuera del main.js y ponerlo en archivos independientes. Ahora queda hacer referencia a estos archivos desde el main.js para que todo siga funcionando tal y como estaba antes. Lo puedes hacer de la siguiente forma:

// BootstrapVue
import './plugins/bootstrapVue'

// Vue Font-Awesome
import './plugins/fontAwesome'

Ya que estamos en el apartado de refactorizar y estamos tocando el main.js, podemos quitar el console.log('Hola 🌝') que pusimos al principio, que ya no nos sirve para nada.
Tu fichero main.js completo se vería así:

import Vue from 'vue'
// BootstrapVue
import './plugins/bootstrapVue'

// Vue Font-Awesome
import './plugins/fontAwesome'

import App from './App.vue'
import router from './router'
import store from './store'

// CSS global
import './assets/css/main.styl'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  methods: {
    // Nuestra función
    init () {
      store.dispatch('oauth/getToken')
    }
  },
  // Hook created
  created () {
    this.init()
  },
  render: h =&gt; h(App)
}).$mount('#app')

Te habrás dado cuenta de que hemos importado Vue 2 veces, una para el fichero de BootstrapVue.js y otra vez para el de fontAwesome.js. No te preocupes, no vamos a tener código duplicado y nuestra aplicación no va a ser el doble de grande. De esto se encarga Webpack, solo lo incluirá una vez en el bundle final.

¡Fíjate!, ahora nuestro archivo queda más limpio y legible 👏. Hemos agrupado contenido por funcionalidad. A partir de ahora, todas las librerías que vayamos metiendo las podemos dejar dentro de la carpeta /plugins para tener nuestro código más ordenado.

Comentarios

Michael Torres Morán

student•

Debido a que pueden haber varios plugins a implementarse en la App, lo que se puede optar la mantener la app más limpia aún seria crear un archivo index.js dentro de la carpeta plugins, en donde vayan todos los imports.

plugins/index.js

// Bootstrap Vue
import './bootstrapVue'

// FontAwesome
import './fontAwesome'

main.js

import Vue from 'vue'

import App from './App.vue'
import router from './router'
import store from './store'

import './plugins'
import './assets/css/app.styl'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  created() {
    this.init()
  },
  methods: {
    init() {
      store.dispatch('oauth/getToken', null, { root: true })
    }
  },
  render: h =&gt; h(App)
}).$mount('#app')

Jorge Baumann

teacher•

Es totalmente válido y correcto. Más adelante, cuando llegue el tema de las custom directives hacemos eso que mencionas. Las dos formas son válidas.

Carlos Eduardo Gomez García

teacher•

Genial, yo lo que haría para ordenar todo aún más es crear un archivo index.js en plugins y ahí hacer el import de todos los plugins y en main simplemente importar el index

También me pregunto cómo se haría la misma refactorización en Vue 3, porque ahí ya no podemos hacer Vue.use sino ahora es createApp().use(), lo mas probable es que para fontAwesome hagamos un export del fontawesome, y para boostrap igual hagamos el export de Bootstrap, de todas maneras a la fecha que escribo esto todavía no existe Boostrap Vue para Vue 3, y ya que hablo de esto, ¿Cómo se haría toda esta lógica y métodos y hooks que tenemos en el main en Vue 3? xD Porque en Vue 3 ya pasas directamente el componente, no se si dentro de createApp se puedan poner todas esas cosas jaja

Jhonathan Alfonso

student•

Buen aporte bro, hay que sacar el curso de Vue 3.

Elvis Saavedra

student•

Justo estoy trabajando con vue 3, haciendo esto me funcionó

/src/plugins/fontAwesome.js

import { library } from '@fortawesome/fontawesome-svg-core'
import {
  faSkull,
  faCrown,
  faDungeon,
  faHatWizard,
  faHammer,
  faGem,
} from '@fortawesome/free-solid-svg-icons'
import {
  faVuejs,
  faBootstrap,
  faFontAwesome,
  faGithub,
  faBattleNet,
  faUikit,
} from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(
  faSkull,
  faCrown,
  faDungeon,
  faHatWizard,
  faHammer,
  faGem,
  faVuejs,
  faBootstrap,
  faFontAwesome,
  faGithub,
  faBattleNet,
  faUikit,
)

export { FontAwesomeIcon }

/src/main.js

import { FontAwesomeIcon } from '@/plugins/fontAwesome'
.
.
.
app.component('font-awesome-icon', FontAwesomeIcon)

Alexis Mora Sanchez

student•

Que pasada!, Vuetify hace este paso por nosotros!

Andrés David Solarte Vidal

student•

Eso iba a comentar. Vuetify ahorra mucho codigo.

Manuel Ojeda

student•

Ups, creo que me adelanté una clase 😅

Jorge Baumann

teacher•

Sí, pero tuviste bien ojo 😜

Nicolas Alejandro Middi

student•

Vengo laburando mucho en el refact de mis aplicaciones y partir los archivos me parece fundamental... esta clase lo deja muy claro

Cheché Pech

student•

Yeah man!

alberto ayala rodriguez

student•

Me fascina el orden y la manera que refactorizó, nah de auténticos magos 10/10

import Vue from 'vue'

import { library } from '@fortawesome/fontawesome-svg-core'
import { faSkull, faCrown, faDungeon, faHatWizard, faHammer, faGem } from '@fortawesome/free-solid-svg-icons'
import { faVuejs, faBootstrap, faFontAwesome, faGithub, faBattleNet } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(
 faSkull,
 faCrown,
 faDungeon,
 faHatWizard,
 faHammer,
 faGem,
 faVuejs,
 faBootstrap,
 faFontAwesome,
 faGithub,
 faBattleNet
)

// Esta es la forma de registrar un componente global con Vue
// El primer parámetro es cómo queremos que se use/llame nuestro componente desde el HTML
// El segundo parámetro es la referencia al componente (que acabamos de importar)
Vue.component('font-awesome-icon', FontAwesomeIcon)

import Vue from 'vue'
// BootstrapVue
import './plugins/bootstrapVue'

// Vue Font-Awesome
import './plugins/fontAwesome'

import App from './App.vue'
import router from './router'
import store from './store'

// CSS global
import './assets/css/main.styl'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  methods: {
    // Nuestra función
    init () {
      store.dispatch('oauth/getToken')
    }
  },
  // Hook created
  created () {
    this.init()
  },
  render: h =&gt; h(App)
}).$mount('#app')

import Vue from 'vue'

import App from './App.vue'
import router from './router'
import store from './store'

import './plugins'
import './assets/css/app.styl'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  created() {
    this.init()
  },
  methods: {
    init() {
      store.dispatch('oauth/getToken', null, { root: true })
    }
  },
  render: h =&gt; h(App)
}).$mount('#app')

import { library } from '@fortawesome/fontawesome-svg-core'
import {
  faSkull,
  faCrown,
  faDungeon,
  faHatWizard,
  faHammer,
  faGem,
} from '@fortawesome/free-solid-svg-icons'
import {
  faVuejs,
  faBootstrap,
  faFontAwesome,
  faGithub,
  faBattleNet,
  faUikit,
} from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(
  faSkull,
  faCrown,
  faDungeon,
  faHatWizard,
  faHammer,
  faGem,
  faVuejs,
  faBootstrap,
  faFontAwesome,
  faGithub,
  faBattleNet,
  faUikit,
)

export { FontAwesomeIcon }

Refactorización de Importaciones en Vue.js con Plugins

Bienvenida al curso

Vue consumiendo APIs oficiales de Blizzard

VueCli, configuración inicial del proyecto y consumo del API de Blizzard

Creación de Aplicaciones Vue.js con API de Diablo III

Desarrollo de Aplicaciones con APIs de Blizzard: Guía Completa

Estructura y gestión de carpetas en proyectos Vue.js

Instalación y configuración de librerías en Vue con Bootstrap

Configuración de Axios para llamadas a APIs de Diablo III

Gestión de Tokens con Vuex: Integración y Almacenamiento en Vue.js

Creación de los componentes y layouts de nuestro proyecto

Componente Reutilizable de Carga con Vue.js

Estilos CSS oscuros para aplicaciones Vue.js con Stylus

Creación de Layouts con Vue y Bootstrap para Mejorar la UI

Organización de Assets en Vue: Imágenes, Fuentes y CSS Globales

Creación de NavBar y Footer con BootstrapVue y FontAwesome

Refactorización de Importaciones en Vue.js con Plugins

Buscador de Perfiles en Diablo III: Creación de Formulario y Título

Rutas Dinámicas y Lazy Loading en Vue.js

Construcción y Consumo de APIs con Vue.js y Vuex

Creación y Uso de Componentes en Vue.js: MainBlock y TopHeroes

Visualización de Héroes con Bootstrap-Vue en Diablo III

Componente de Progreso de Actos en Vue.js

Implementación de Componentes Vue: MainBlock y PlayerStats

Navegación y Visualización de Artesanos en Vue.js

Funciones y Componentes para la Vista de Héroe en Vue.js

Agregando funcionalidades avanzadas a nuestro proyecto

Carga Diferida de Componentes en Vue.js: Mejora de Rendimiento

Implementación de Inventario de Objetos de Personaje en Vue.js

Directivas Personalizadas en Vue: Creación y Uso Básico

Configuración y despliegue de aplicaciones en Netlify con Vue.js

Creación y Personalización de Páginas en Vue.js