آموزش ساخت پلاگین Vue

|-- src
    |-- plugins
        |-- magic

توی پوشه magic یک فایل می‌سازیم به اسم magic.js:

|-- src
    |-- plugins
        |-- magic
            |-- magic.js

فایل magic.js، فایل اصلی پلاگین ما هست که باید اون رو به فریم‌ورک شناسایی کنیم (که مرحله بعد اون رو انجام می‌دیم). ابتدا این فایل رو باز می‌کنیم و محتویات زیر رو توی اون قرار می‌دیم:

const Magic = {};

Magic.install = function(Vue, options) {
    
};

export { Magic as default };

نحوه‌ی ساختن یک پلاگین ویو به صورت بالا هست. یعنی یک آبجکت خالی به همراه یک پراپرتی به اسم install می‌سازیم. محتویات این پراپرتی، یک تابع هست. توی این تابع قراره کارایی که این پلاگین انجام بده رو بنویسیم.

خب اینجا فقط یک پلاگین خالی رو ساختیم. مرحله بعد باید این پلاگین رو به فریم‌ورک شناسایی کنیم.

مرحله ۲: شناسایی پلاگین به فریم‌ورک

فایل src/main.js رو باز می‌کنیم. ابتدا فایل magic.js رو وارد می‌کنیم (خط ۳) و بعد با متد use، اون رو به فریم‌ورک شناسایی می‌کنیم (خط ۵):

import Vue from "vue";
import App from "./App.vue";
import Magic from "./plugins/magic/magic";

Vue.use(Magic);

Vue.config.productionTip = false;

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

خب پلاگین رو هم به فریم‌ورک شناسایی کردیم و همه چیز آماده هست تا عملکرد و کار‌های دلخواهمون رو توسط پلاگینی که ساختیم رو توی برنامه استفاده کنیم.

مرحله ۳: اضافه کردن عملکردهای دلخواه

ما می‌تونیم هر کاری قبلاً بدون پلاگین‌ها و توی خود برنامه انجام می‌دادیم رو توی پلاگین‌ها هم داشته باشیم. مثلاً ساخت کامپوننت و یا Mixin. اگه نمی‌دونین Mixin چیه، پست زیر رو بخونین:

برای مثال، یک Mixin می‌سازیم تا یک متد رو به صورت سراسری توی برنامه داشته باشیم. فایل magic.js رو باز می‌کنیم و یک Mixin می‌سازیم که یک متد داره به اسم myFirstMethod:

const Magic = {};

Magic.install = function(Vue, options) {
  Vue.mixin({
    methods: {
      myFirstMethod() {
        alert('MY FIRST PLUGIN! 👌')
      }
    }
  });
};

export { Magic as default };

حالا هر جایی از برنامه می‌تونیم از myFirstMethod استفاده کنیم. فایل App.vue رو باز می‌کنیم و توی قسمت mounted از این متد استفاده می‌کنیم:

export default {
  mounted() {
    this.myFirstMethod()
  }
};

با بارگزاری مجدد صفحه، یک alert می‌گیریم با محتویات: MY FIRST PLUGIN! 👌

توی آموزش زیر بصورت پیشرفته‌تر استفاده از یک پلاگین ویوو رو یاد بگیرید:

خب دوستان امیدوارم استفاده کرده باشید از این پست. سبز باشید مثل Vue  😉👌