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

سلام دوستان! توی این آموزش می‌خوایم یاد بگیریم که چطوری یک پلاگین شخصی Vue برای خودمون بسازیم. یک پلاگین چیه؟ پلاگین به نرم‌افزاری گفته میشه که به برنامه اضافه میشه تا یک سری ویژگی‌هایی رو به اون اضافه کنه. پلاگین‌ها قابلیت استفاده مجدد دارن. یعنی طوری نوشته میشن که بشه توی برنامه‌های مختلف از اونها استفاده کرد. هنگام توسعه‌ی یک برنامه، قطعاً کدهای تکراری وجود دارن که ما از اونها توی جاهای مختلف حتی پروژه‌های مختلف استفاده می‌کنیم. اگه این کدها رو طوری بنویسم که بشه توی پروژه‌های مختلف اضافه کرد، به این کدها میگن پلاگین 😉

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

برای این پست از Vue CLI استفاده می‌کنیم. توی آموزش زیر خیلی راحت این ابزار رو نصب کنین:

مرحله صفر

اسم این مرحله، مرحله صفر هست به این دلیل که می‌خوایم یک برنامه ویو رو از اول بسازیم. اگه چنین برنامه‌ای آماده دارین (مثلاً از پروژه لاراولی استفاده می‌کنین) این مرحله رو نادیده بگیرید.

حالا یک برنامه ویو رو با دستور زیر توی خط فرمان اجرا می‌کنیم. دقت کنین که این دستور، برنامه‌ی ما رو توی مسیر فعلی خط فرمان می‌سازه:

vue create MyVueApp

بعد از اینکه نصب کامل شد، توی ترمینال، دو دستور زیر رو می‌زنیم تا وارد پوشه برنامه بشیم و اون رو اجرا کنیم:

cd MyVueApp
npm run serve

بعد از اجرا شدن دستورات بالا، توی مرورگر مسیر http://localhost:8080 رو باز می‌کنیم تا برنامه‌مون رو ببینیم:

اگه چنین صفحه‌ای می‌بینید، یعنی نصب و اجرا با موفقیت انجام شده.

 

مرحله ۱: آماده‌سازی پوشه‌ها و فایل‌ها

مسیر src، مسیری هست که ما توی اون کدهامون رو قرار میدیم. (اگه از لاراول استفاده می‌کنید، مسیر resources/js رو در نظر بگیرید). ابتدا توی این مسیر، یک پوشه درست می‌کنیم به اسم plugins که توی اون قراره پلاگین‌هامون رو تعریف کنیم:

|-- public
|-- src
    |-- plugins
    |-- ...

بهتره که پلاگین‌هامون رو توی پوشه‌های اختصاصی نگهداری کنیم. اسم پلاگین رو می‌ذاریم magic و یک پوشه به همین اسم توی مسیر plugins درست می‌کنیم:

|-- 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  😉👌