1

لدي مشكلة في استخدام المكتبات داخل vue js ??

السلام عليكم

انا مبتدأ في ال vue js و حاليا اصمم موقع و واجهتني مشكلة وهي انني لم اعرف كيف استخدم مكتبات الجافاسكريبت و الجكويري داخل المشروع , اتمنى افادتي و لو بالقليل و شكرا لكم

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

3
Abdallah_NourAldin أضف ردا

لاضافة المكتبات في مشروع الVUE

يمكنك من خلال استعمال الNPM

لتنزيل الpackages و المكتبات المراد استعمالها

مثلاً في حالة كنت تريد استعمال jQuery في داخل مشروعك

تبحث عن npm jQuery و سيظهر لك الامر الخاص بتنزيل المكتبة والذي هو "npm install jquery"

  • الأمر npm (node package manager) هي الأداة الخاصة بالتحكم بالمكتبات (مكتبات الnode)
  • الأمر install لتنزيل المكتبات التي يتم تحديدها
  • ثم تقوم بكتابة اسم المكتبة المراد تنزيلها (في هذه الحالة jquery)

وهكذا بامكانك استعمال أي مكتبة في مشروعك الVUE

0
mohamed74_MO أضف ردا

شكرا لك اخي

نعم اعرف كيف اثبت المكتبات عن طريق npm , المشكلة عندي كيف اشغل هذه المكتبات داخل المشروع

فمثلا اريد تشغيل مكتبة isotope فأين أضع هذا الكود : 

$('.grid').isotope({
  // options
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});

لكي تشتغل المكتبة

1
Abdallah_NourAldin أضف ردا

تحتاج لاضافة الكود داخل VUE lifecycle methods

والأنسب في هذه الحالة هو mounted

مثال عليها: سيتم تنفيذها بمجرد ان تم بناء الcomponent

mounted() {
console.log("mounted")
}

(سيتم تنفيذها بمجرد ان تم بناء الcomponent)

0
mohamed74_MO أضف ردا

جربت الطريقة لكن لم تشتغل , لا أعرف ما السبب

شكرا لك أخي على كل حال

1
waelaljamal أضف ردا

علينا تضمن جيكويري في ملف المكون component الذي نريده:

import JQuery from 'jquery'
window.$ = JQuery
أو مباشرة
import $ from 'jquery'

ثم وضع الشيفرة المرادة ضمن الدالة التالية التي تنفذ مع الحدث mount أي بعد تحميل الصفحة:

mounted () {
   // شيفرة جيكويري
}

إن واجهتم مشكلة في تحميل جيكوري بوساطة npm يمكن تضمينها مباشرة برابط حسب الإصدار الذي تريده:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
0
mohamed74_MO أضف ردا

جربت الطريقة لكن لم تشتغل , لا أعرف ما السبب

شكرا لك أخي على كل حال

0
waelaljamal أضف ردا

ماذا حدث بالضبط وأين تظهر المشكلة.

هل يظهر أخطاء في Console في المتصفح؟

وتأكد من تطابق محددات الوصول واستهداف العنصر المطلوب.

0
waelaljamal أضف ردا

إن كنت تستخدم webpack فيجب تضمين جيكويري هكذا من خلال:

expose-loader

لتثبيته:

npm install expose-loader --save-dev

ثم:

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jquery: 'jquery',
      'window.jQuery': 'jquery',
      jQuery: 'jquery'
    })
  ]
  ...
}
0
Abdallah_NourAldin
  • حذف بواسطة المستخدم