السلام عليكم
انا مبتدأ في ال vue js و حاليا اصمم موقع و واجهتني مشكلة وهي انني لم اعرف كيف استخدم مكتبات الجافاسكريبت و الجكويري داخل المشروع , اتمنى افادتي و لو بالقليل و شكرا لكم
لدي مشكلة في استخدام المكتبات داخل vue js ??
لاضافة المكتبات في مشروع الVUE
يمكنك من خلال استعمال الNPM
لتنزيل الpackages و المكتبات المراد استعمالها
مثلاً في حالة كنت تريد استعمال jQuery في داخل مشروعك
تبحث عن npm jQuery و سيظهر لك الامر الخاص بتنزيل المكتبة والذي هو "npm install jquery"
- الأمر npm (node package manager) هي الأداة الخاصة بالتحكم بالمكتبات (مكتبات الnode)
- الأمر install لتنزيل المكتبات التي يتم تحديدها
- ثم تقوم بكتابة اسم المكتبة المراد تنزيلها (في هذه الحالة jquery)
وهكذا بامكانك استعمال أي مكتبة في مشروعك الVUE
شكرا لك اخي
نعم اعرف كيف اثبت المكتبات عن طريق npm , المشكلة عندي كيف اشغل هذه المكتبات داخل المشروع
فمثلا اريد تشغيل مكتبة isotope فأين أضع هذا الكود :
$('.grid').isotope({
// options
itemSelector: '.grid-item',
layoutMode: 'fitRows'
});
لكي تشتغل المكتبة
تحتاج لاضافة الكود داخل VUE lifecycle methods
والأنسب في هذه الحالة هو mounted
مثال عليها: سيتم تنفيذها بمجرد ان تم بناء الcomponent
mounted() {
console.log("mounted")
}
(سيتم تنفيذها بمجرد ان تم بناء الcomponent)
علينا تضمن جيكويري في ملف المكون 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>
ماذا حدث بالضبط وأين تظهر المشكلة.
هل يظهر أخطاء في Console في المتصفح؟
وتأكد من تطابق محددات الوصول واستهداف العنصر المطلوب.
إن كنت تستخدم webpack فيجب تضمين جيكويري هكذا من خلال:
expose-loader
لتثبيته:
npm install expose-loader --save-dev
ثم:
module.exports = {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
})
]
...
}
التعليقات