El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem com crear un plugin de Vue.js des de zero. Els plugins són una manera poderosa d'estendre la funcionalitat de Vue i permeten compartir funcionalitats comunes entre diferents aplicacions Vue.

Què és un plugin de Vue.js?

Un plugin de Vue.js és essencialment un objecte o una funció que pot ser utilitzat per afegir funcionalitats globals a una aplicació Vue. Això pot incloure:

Mètodes globals o propietats.
Directives globals.
Components globals.
Filtres globals.
Qualsevol altra funcionalitat que necessiti ser accessible a tota l'aplicació.

Passos per crear un plugin de Vue.js

Crear l'estructura del plugin

Comencem creant un fitxer nou per al nostre plugin. Per exemple, creem un fitxer anomenat myPlugin.js.

// myPlugin.js
export default {
  install(Vue, options) {
    // Aquí afegirem la funcionalitat del nostre plugin
  }
}

Afegir funcionalitats al plugin

Afegirem algunes funcionalitats globals al nostre plugin. Per exemple, afegirem un mètode global, una directiva i un component.

Afegir un mètode global

Podem afegir un mètode global utilitzant Vue.prototype.

// myPlugin.js
export default {
  install(Vue, options) {
    Vue.prototype.$myMethod = function() {
      console.log('Aquest és un mètode global!');
    }
  }
}

Afegir una directiva global

Podem afegir una directiva global utilitzant Vue.directive.

// myPlugin.js
export default {
  install(Vue, options) {
    Vue.prototype.$myMethod = function() {
      console.log('Aquest és un mètode global!');
    }

    Vue.directive('my-directive', {
      bind(el, binding, vnode) {
        el.style.color = binding.value;
      }
    });
  }
}

Afegir un component global

Podem afegir un component global utilitzant Vue.component.

// myPlugin.js
export default {
  install(Vue, options) {
    Vue.prototype.$myMethod = function() {
      console.log('Aquest és un mètode global!');
    }

    Vue.directive('my-directive', {
      bind(el, binding, vnode) {
        el.style.color = binding.value;
      }
    });

    Vue.component('my-component', {
      template: '<div>Hola, sóc un component global!</div>'
    });
  }
}

Utilitzar el plugin en una aplicació Vue

Per utilitzar el nostre plugin en una aplicació Vue, hem d'importar-lo i instal·lar-lo utilitzant Vue.use.

// main.js
import Vue from 'vue';
import App from './App.vue';
import MyPlugin from './myPlugin';

Vue.use(MyPlugin);

new Vue({
  render: h => h(App),
}).$mount('#app');

Exemple pràctic

Ara que hem creat el nostre plugin, vegem com podem utilitzar les funcionalitats que hem afegit.

<!-- App.vue -->
<template>
  <div id="app">
    <my-component></my-component>
    <div v-my-directive="'red'">Aquest text serà vermell</div>
    <button @click="useMyMethod">Fes clic per utilitzar el mètode global</button>
  </div>
</template>

<script>
export default {
  methods: {
    useMyMethod() {
      this.$myMethod();
    }
  }
}
</script>

Exercici pràctic

Exercici

Crea un plugin de Vue.js que afegeixi les següents funcionalitats:

Un mètode global anomenat $greet que accepti un nom com a argument i mostri un missatge de benvinguda a la consola.
Una directiva global anomenada v-highlight que canviï el color de fons de l'element a groc.
Un component global anomenat greeting-component que mostri un missatge de benvinguda.

Solució

// myGreetingPlugin.js
export default {
  install(Vue, options) {
    Vue.prototype.$greet = function(name) {
      console.log(`Hola, ${name}! Benvingut a Vue.js!`);
    }

    Vue.directive('highlight', {
      bind(el, binding, vnode) {
        el.style.backgroundColor = 'yellow';
      }
    });

    Vue.component('greeting-component', {
      template: '<div>Benvingut a la nostra aplicació Vue.js!</div>'
    });
  }
}

// main.js
import Vue from 'vue';
import App from './App.vue';
import MyGreetingPlugin from './myGreetingPlugin';

Vue.use(MyGreetingPlugin);

new Vue({
  render: h => h(App),
}).$mount('#app');

<!-- App.vue -->
<template>
  <div id="app">
    <greeting-component></greeting-component>
    <div v-highlight>Aquest text té un fons groc</div>
    <button @click="greetUser">Fes clic per saludar</button>
  </div>
</template>

<script>
export default {
  methods: {
    greetUser() {
      this.$greet('Estudiant');
    }
  }
}
</script>

Conclusió

En aquest tema, hem après com crear un plugin de Vue.js i com afegir funcionalitats globals com mètodes, directives i components. Els plugins són una eina poderosa per estendre la funcionalitat de Vue i compartir funcionalitats comunes entre diferents aplicacions. Practica creant els teus propis plugins per familiaritzar-te amb aquest procés i millorar les teves habilitats de desenvolupament amb Vue.js.

Creant un plugin de Vue.js

Què és un plugin de Vue.js?

Passos per crear un plugin de Vue.js

Crear l'estructura del plugin

Afegir funcionalitats al plugin

Afegir un mètode global

Afegir una directiva global

Afegir un component global

Utilitzar el plugin en una aplicació Vue

Exemple pràctic

Exercici pràctic

Exercici

Solució

Conclusió

Curs de Vue.js

Mòdul 1: Introducció a Vue.js

Mòdul 2: Conceptes bàsics de Vue.js

Mòdul 3: Components de Vue.js

Mòdul 4: Vue Router

Mòdul 5: Gestió d'estat amb Vuex

Mòdul 6: Directives de Vue.js

Mòdul 7: Plugins de Vue.js

Mòdul 8: Proves en Vue.js

Mòdul 9: Conceptes avançats de Vue.js

Mòdul 10: Construcció i desplegament d'aplicacions Vue.js

Mòdul 11: Projectes de Vue.js del món real