Vue یک فریم ورک جاوااسکریپت برای ساخت رابط کاربری وب است. باهاش می تونی از یه فرم تعاملی ساده تا داشبورد و اپلیکیشن تک صفحه ای کامل بسازی. روی یه سایت معمولی می شه کم کم واردش کرد و برای پروژه های بزرگ هم ابزارهای جانبی خودش رو داره.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
Vue رو ایوان یو ساخته و الان یکی از شناخته شده ترین فریم ورک های جاوااسکریپته. مشکلی که حل می کنه آشناست. صفحه ای داری که داده توش عوض می شه، مثل تعداد سبد خرید، نتیجه فیلتر محصولات یا مرحله های یه فرم. نمی خوای برای هر تغییر دستی سراغ DOM بری و عنصرها رو یکی یکی عوض کنی. تو فقط وضعیت داده رو تعریف می کنی و Vue خودش صفحه رو با اون هماهنگ نگه می داره.
ساختارش بر پایه کامپوننته. هر تکه از رابط، مثل کارت محصول یا نوار جستجو، یه قطعه مستقل می شه و ظاهر، منطق و استایلش کنار هم قرار می گیره. تو پروژه های بزرگ این کار نگهداری کد رو راحت تر می کنه. به Vue «پیش رونده» هم می گن، چون لازم نیست همه چیز رو یکجا بهش بسپاری. می تونی فقط یه بخش از صفحه رو باهاش بسازی یا کل پروژه رو.
برای سایت های وردپرسی ایرانی چند کاربرد ملموس داره: فرم سفارش چندمرحله ای، فیلتر و مرتب سازی زنده محصولات، حساب کاربری سفارشی یا پنل مدیریتی داخل یه افزونه. اگه قالب یا افزونه اختصاصی می نویسی و jQuery دیگه برات کافی نیست، Vue انتخاب خوبیه. ولی همه جا لازمش نداری. اگه فقط یه منوی موبایل یا یه اسلایدر ساده می خوای، آوردن یه فریم ورک کامل زیادیه.
موقع انتخاب دو چیز رو در نظر بگیر. اول اینکه Vue رو می تونی بدون هیچ ابزار ساخت و فقط با یه فایل جاوااسکریپت تو صفحه بیاری، یا یه پروژه کامل با ابزار ساخت راه بندازی. برای وردپرس روش اول راحت تره. دوم سئو: اگه محتوای سایتت باید حتما کامل و آماده برای موتور جستجو دیده بشه، اپ تک صفحه ای معمولی ریسک داره و بهتره رندر سمت سرور رو در نظر بگیری. برای این کار معمولا Nuxt رو کنار Vue می ذارن. مستندات و ساختار نسخه های مختلف Vue هم با هم فرق دارن، پس موقع دنبال کردن آموزش ها مطمئن شو نسخه آموزش با نسخه ای که استفاده می کنی یکیه. مجوزش MIT هست و استفاده تجاری آزاده.
نسخه های رسمی و بدون تغییر Vue تو مخزن داخلی ما هم هست. وقتی دسترسی به منبع اصلی کنده یا قطعه، می تونی از همین جا بگیری و کارت رو بدون وقفه جلو ببری.
راهنمای استفاده
ساده ترین راه برای شروع، افزودن Vue مستقیم به صفحه است. لازم نیست چیزی نصب یا کامپایل کنی.
فایل Vue رو از همین صفحه دانلود کن، یا از کد آماده پایین همین صفحه استفاده کن.
کد رو تو صفحه یا قالبت، قبل از اسکریپت خودت، اضافه کن. تو وردپرس معمولا این کار رو با wp_enqueue_script تو functions.php یا افزونه ات انجام می دی.
یه عنصر با شناسه مشخص تو HTML بذار تا Vue همون بخش رو مدیریت کنه.
تو اسکریپت خودت یه اپلیکیشن بساز، داده و متدها رو تعریف کن و به همون عنصر وصلش کن.
تو HTML از دستورهایی مثل v-if، v-for و v-model برای نمایش شرطی، لیست و فرم استفاده کن.
اگه می خوای پروژه کامل بسازی، بسته npm با نام vue رو تو پروژه ات نصب کن و کنارش یه ابزار ساخت مثل Vite بذار. برای کامپوننت هات هم از فایل های .vue استفاده کن.
یه نکته برای وردپرس: Vue رو فقط تو صفحه هایی لود کن که واقعا لازمش دارن، نه تو کل سایت. این طوری سرعت بقیه صفحه ها پایین نمی آد و احتمال تداخل با اسکریپت های دیگه هم کمتر می شه.
نشانی مستقیم فایل اصلی 2.5.12https://mirror.wbweb.ir/npm/vue@2.5.12/dist/vue.min.js
پرسش‌های رایج
آره. فایل مستقیم Vue رو با wp_enqueue_script تو قالب یا افزونه اضافه می کنی و بعدش یه عنصر HTML تو صفحه رو بهش می سپاری. برای فرم ها، فیلتر محصولات و بخش های تعاملی کوچیک همین کافیه. فقط اگه پروژه بزرگ شد و فایل های .vue خواستی، سراغ ابزار ساخت برو.
به خودی خود نه، می تونن کنار هم باشن. مشکل وقتی شروع می شه که jQuery و Vue هر دو یه عنصر رو دستکاری کنن. بهتره بخشی که Vue مدیریت می کنه رو جدا نگه داری و jQuery رو بهش وصل نکنی. هر کدوم مسئول بخش خودش باشه تا اتفاق عجیبی نیفته.
هر دو برای ساخت رابط کاربری کامپوننتی هستن. Vue معمولا یادگیری ملایم تری داره و می شه کم کم واردش شد. React اکوسیستم بزرگی داره و بازار کار وسیعی هم پشتشه. انتخاب بیشتر به تجربه تیم و نیاز پروژه برمی گرده، نه اینکه یکی همیشه بهتر باشه.
اگه محتوا فقط سمت مرورگر ساخته بشه، ممکنه برای موتور جستجو دردسر درست کنه. ولی اگه Vue فقط برای بخش های تعاملی یه صفحه معمولی وردپرسی باشه، معمولا مشکلی نیست. برای سایت هایی که کل محتواشون باید ایندکس بشه، رندر سمت سرور مثل Nuxt رو در نظر بگیر.
jQuery یه کتابخانه جاوااسکریپت متن باز برای کار با عنصرهای صفحه است. با چند خط کد می تونی عنصرها رو پیدا کنی، به کلیک و رویدادها واکنش نشون بدی، درخواست Ajax بفرستی و انیمیشن ساده بسازی. هنوز خیلی از قالب ها و افزونه های وردپرسی بهش تکیه دارن.
alpinejs یه کتابخانه جاوااسکریپت سبکه که با چند attribute مستقیم توی HTML به صفحه رفتار تعاملی می ده: منوی باز و بسته، مودال، تب، آکاردئون و فرم زنده. Caleb Porzio ساخته و مجوزش MIT هست. برای سایت هایی مناسبه که به React یا Vue کامل نیازی ندارن.
React یه کتابخانه جاوااسکریپت برای ساخت رابط کاربریه. صفحه رو به تکه های مستقل به اسم کامپوننت تقسیم می کنی و هر تکه داده و نمایش خودش رو مدیریت می کنه. برای داشبورد، اپلیکیشن تحت وب و بخش های تعاملی سایت وردپرسی به کار می آد و مجوزش MIT هست.
آخرین نسخه
۱۹.۳.۱
نسخه‌ها
۴۰
به‌روزرسانی
چیزی که لازم دارید اینجا نیست؟
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.
