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
)
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:
import './plugins/bootstrapVue'
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'
import './plugins/bootstrapVue'
import './plugins/fontAwesome'
import App from './App.vue'
import router from './router'
import store from './store'
import './assets/css/main.styl'
Vue.config.productionTip = false
new Vue({
router,
store,
methods: {
init () {
store.dispatch('oauth/getToken')
}
},
created () {
this.init()
},
render: h => 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.
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.