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

سلام دوستان. می‌خوایم با فریم‌ورک ویو (Vue) یک پلاگین گالری تصاویر ساده درست کنیم. هرچند پلاگین‌های حرفه‌ای زیادی رو می‌تونین توی سطح وب پیدا و استفاده کنیم، هدف این آموزش، بیشتر، آشنایی با فوت و فن‌های فریم‌ورک ویو هست. توی این آموزش یاد می‌گیریم که چطوری:

• یک برنامه ویو رو راه‌اندازی کنیم
• یک پلاگین ویو بسازیم و اون رو به فریم‌ورک شناسایی کنیم
• برای پلاگینمون کامپوننت‌های سراسری درست کنیم
• با اجزای مختلف کامپوننت‌ها مثل props و slot ها آشنا می‌شیم

همه این موارد، به اضافه چند نکته کاربردی بررسی رو توی ادامه می‌کنیم 😉

 

۱. ساخت یک برنامه ویو

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

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

vue create gallery

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

cd gallery
npm run serve

 

۲. آماده‌سازی پلاگین گالری

توی مسیر src یک پوشه می‌سازیم به اسم plugins که توی اون قراره پلاگین‌های برنامه رو قرار بدیم. یک پوشه دیگه توی مسیر plugins درست می‌کنیم به اسم gallery که می‌خوایم محتویات و فایل‌های پلاگین گالری رو توی اون قرار بدیم. الان ساختار پوشه‌های برنامه بصورت زیر هست:

|-- src
    |-- plugins
        |-- gallery

یک فایل به اسم Gallery.js توی پوشه gallery درست می‌کنیم. این، فایل اصلی پلاگین ما هست که باید اون رو به فریم‌ورک شناسایی کنیم. به این فایل کدهای زیر رو اضافه می‌کنیم:

const Gallery = {};

Gallery.install = function(Vue, options) {

};

export { Gallery as default };

حالا باید پلاگینمون رو به فریم‌ورک شناسایی کنیم. فایل main.js که توی مسیر src هست رو باز می‌کنیم. محتویات این فایل بصورت زیر هست که ما باید کدهای خط ۳ و ۵ رو به این فایل اضافه کنیم:

import Vue from 'vue'
import App from './App.vue'
import Gallery from './plugins/gallery/Gallery'

Vue.use(Gallery)

Vue.config.productionTip = false

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

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

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

۳. ساخت کامپوننت‌های پلاگین

همونطور که می‌دونیم، گالری باید یک کامپوننت اصلی داشته باشه. این کامپوننت، نقش یک Container برای تصاویر رو ایفا می‌کنه. همچنین، ما برای تصاویر، می‌خوایم یک کامپوننت جدا بسازیم و اون رو وارد کامپوننت اصلی کنیم. یعنی کد HTML بصورت زیر خواهد شد:

<gallery>
  <gallery-item src="1.jpg" />
  <gallery-item src="2.jpg" />
  <gallery-item src="3.jpg" />
  <gallery-item src="4.jpg" />
</gallery>

توی این کد، کامپوننت gallery، کامپوننت اصلی هست و کامپوننت‌های gallery-item، تصاویر ما هستن که به کامپوننت اصلی پاس داده میشن. اسم کامپوننت gallery-item رو می‌ذاریم کامپوننت فرزند. خیلی زود یاد می‌گیریم که چطوری این کار رو انجام بدیم.

ابتدا کامپوننت اصلی رو می‌سازیم. توی پوشه پلاگینمون، یک پوشه درست می‌کنیم به اسم components تا کامپوننت‌های پلاگین رو توی اون قرار بدیم. تا الان ساختار پوشه‌های برنامه بصورت زیر هست:

|-- src
    |-- plugins
        |-- gallery
            |-- Gallery.js
            |-- components

توی پوشه components یک فایل درست می‌کنیم به اسم Main.vue. این فایل همون کامپوننت اصلی ما هست. کدهای زیر رو بطور موقت به این فایل اضافه می‌کنیم:

<template>

</template>

<script>
export default {}
</script>

خب این کامپوننت رو باید به پلاگین شناسایی کنیم. فایل اصلی پلاگین یعنی Gallery.js رو باز می‌کنیم تا این کار رو انجام بدیم:

const Gallery = {};

Gallery.install = function(Vue, options) {
    Vue.component('gallery', require('./components/Main').default)
};

export { Gallery as default };

به این فایل، کد خط ۴ رو اضافه کردیم. توی این خط، کامپوننت رو با عنوان gallery بصورت سراسری به فریم‌ورک شناسایی کردیم. الان می‌تونیم هر جایی از برنامه از این کامپوننت استفاده کنیم.

مرحله بعد کامپوننت فرزند رو باید بسازیم. یک فایل دیگه به اسم Item.vue به پوشه components اضافه می‌کنیم و با محتویات زیر:

<template>

</template>

<script>
export default {}
</script>

حالا این کامپوننت رو هم باید رجیستر کنیم. فایل اصلی پلاگین یعنی Gallery.js رو باز می‌کنیم و کد خط ۵ رو به اون اضافه می‌کنیم:

const Gallery = {};

Gallery.install = function(Vue, options) {
    Vue.component('gallery', require('./components/Main').default)
    Vue.component('gallery-item', require('./components/Item').default)
};

export { Gallery as default };

خب تا اینجا کامپوننت‌های پلاگین رو هم ساختیم. باید بریم تا کامپوننت‌ها رو یکم شخصی‌سازی و کدهامون رو بهش اضافه کنیم.

برای آشنایی با کامپوننت‌های ویو، می‌تونین پست زیر رو بخونین:

 

۴. آماده‌سازی پلاگین فرزند

همونطور که بررسی کردیم، هر تصویری که گالریمون داره رو می‌خوایم به عنوان یک کامپوننت در نظر بگیریم. یعنی هر کامپوننت فرزند، نقش یک تصویر رو ایفا می‌کنه. کامپوننت Item.vue رو باز می‌کنیم و به اون دو پراپرتی به اسم‌های src و caption اضافه می‌کنیم (خط ۷):

<template>

</template>

<script>
export default {
  props: ['src', 'caption']
}
</script>

زمانی از پراپرتی‌ها استفاده می‌کنیم که می‌خوایم یک‌سری اطلاعات رو از بیرون به کامپوننت پاس بدیم. ما می‌خوایم آدرس تصویر و یک متن (caption) دلخواه رو از بیرون به کامپوننت پاس بدیم.

قسمت template این فایل رو بصورت زیر تغییر می‌دیم:

<template>
  <div class="gallery-item">
    <img :src="src">
    <p class="caption" v-if="caption">{{ caption }}</p>
  </div>
</template>

که محتویات نهایی فایل Item.vue بصورت زیر هست:

<template>
  <div class="gallery-item">
    <img :src="src">
    <p class="caption" v-if="caption">{{ caption }}</p>
  </div>
</template>

<script>
export default {
  props: ['src', 'caption'],
}
</script>

 

۵. آماده‌سازی پلاگین اصلی

همونطور که گفتیم، پلاگین اصلی، نقش یک Container رو ایفا می‌کنه. برای اینکه بتونیم کامپوننت‌های فرزند رو توی پلاگین اصلی نشون بدیم، از slot ها استفاده می‌کنیم. فایل Main.vue رو باز می‌کنیم و محتویات زیر رو جایگزین اون می‌کنیم:

<template>
  <div class="gallery">
    <slot />
  </div>
</template>


<script>
export default {

}
</script>

توی مرحله قبل گفتیم که برای پاس دادن اطلاعات به کامپوننت از props استفاده می‌کنیم. استفاده از اسلات (slot) یک روش پیشرفته‌تر برای پاس دادن اطلاعات از بیرون به کامپوننت هست. با اسلات می‌تونیم یک کد شامل HTML رو هم پاس بدیم. تگ <slot> که توی خط ۳ می‌بینین، محلی هست برای اطلاعاتی که از بیرون پاس داده میشن. به صورت، هر چیزی که بین تگ باز و بسته <gallery> قرار بگیره، توی قسمت slot خواهد نشست.

 

۶. پیاده‌سازی پلاگین

خب حالا وقتشه خروجی چیزایی که نوشتیم رو ببینیم. فایل App.vue که توی مسیر src هست رو باز و محتویات زیر رو جایگزین می‌کنیم:

<template>
  <div id="app">
    <gallery>
      <item-gallery src="/images/1.jpg" caption="Just do it" />
      <item-gallery src="/images/2.jpg" caption="Just did it" />
      <item-gallery src="/images/3.jpg" />
      <item-gallery src="/images/4.jpg" />
      <item-gallery src="/images/5.jpg" />
      <item-gallery src="/images/6.jpg" />
    </gallery>
  </div>
</template>

<script>
export default { }

توی این کد، ابتدا از کامپوننت اصلی یعنی gallery استفاده کردیم. و به تعداد تصاویری که داریم، کامپوننت item-gallery اضافه کردیم. همونطور که گفتیم، چیزی که داخل تگ gallery قرار گرفته، جایگزین قسمت slot توی کامپوننت اصلی میشه.

همچنین دقت کنین که تصاویر رو توی مسیر public/images قرار دادم. هرچند، میشه آدرس‌های دیگه‌ای رو هم به src ها پاس داد. مرحله آخر، مقداری دستورات CSS به کد اضافه می‌کنیم. این دستورات رو به آخر فایل Main.vue و بعد از تگ پایانی <script> اضافه می‌کنیم:

<style>
  .gallery {
    text-align: center;
  }
  .gallery .gallery-item {
    display: inline-block;
    width: 33%;
    margin: 10px;
  }

  .gallery .gallery-item img {
    width: 100%
  }
</style>

حالا با باز کردن آدرس http://localhost:8080 توی مرورگر، چیزی می‌بینیم بصورت زیر خواهد بود:

توی کد بالا، ما ۶ تا تصویر اضافه کردیم. اگه تصاویر ما جای دیگه مثلاً توی data باشه:

// App.vue

export default {
  data() {
    return {
      images: [
        { src: "/images/1.jpg", caption: 'Just do it' },
        { src: "/images/2.jpg", caption: 'Just did it' },
        { src: "/images/3.jpg", caption: '' },
        { src: "/images/4.jpg", caption: '' },
        { src: "/images/5.jpg", caption: '' },
        { src: "/images/6.jpg", caption: '' },
      ]
    }
  }
}

می‌تونیم اونها رو با حلقه بصورت زیر نمایش بدیم:

<template>
  <div id="app">
    <gallery>
      <gallery-item 
        v-for="(image, index) in images"
        :src="image.src"
        :caption="image.caption"
        v-bind:key="index"
      />
    </gallery>
  </div>
</template>

خب دوستان این آموزشی بود که بیشتر سعی داشتم یک سری نکات فنی برای کار با فریم‌ورک Vue رو ارائه بدم. قطعاً میشه به این پلاگین امکانات بیشتری اضافه و اون رو شخصی‌سازی کرد که اونها رو با آموزش‌های متنوع دیگه کار می‌کنیم. امیدوارم استفاده کرده باشید. روزتون خوش 😉