جشنواره عیدانه راکت | عضویت ویژه راکت برای آخرین بار | افزایش قیمت‌ها از سال جدید | و ...

مشاهده اطلاعات بیشتر...
ثانیه
دقیقه
ساعت
روز
M Akhondi
3 سال پیش توسط M Akhondi مطرح شد
7 پاسخ

عدم استفاده از vue و jquery در کنار هم

سلام دوستان
یک قالب به پروژه لاراول اضافه کردم و بدون مشکل همه دستوراتی با jquery نوشته شده بود اجرا می شود.
پس از اضافه کردن vue به پروژه و معرفی فایل app.js انگار jquery شناسایی نشده باشد و قالب به مشکل خرد.
جهت رفع مشکل کد های webpack رو به شکل زیر ویرایش کردم


mix.js('resources/js/app.js', 'public/js')
    .extract([
        'jquery',
        'bootstrap-sass',
    ])
    .autoload({
        jquery: ['$', 'window.jQuery', 'jQuery', 'jquery']
    })
    .copy('node_modules/jquery/dist/jquery.min.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css');

مشکل رفع شد و قالب به درستی نمایش داده شد.
ولی حالا vue اجرا نمیشود

app.js

require('./bootstrap');
window.Vue = require('vue').default;
window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default;
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
    el: '#app'
});

view

<div id="app">
 <example-component></example-component>
</div>
<script src="{{ asset('js/app.js') }}"></script>

ثبت پرسش جدید
محمدحسن یگانه
تخصص : Full-Stack Web Developer Freel...
@mhyeganeh 3 سال پیش مطرح شد
0

پیشنهاد خاصی برای مسئله تون ندارم متاسفانه. فقط بصورت کلی استفاده همزمان از Vue.js و JQuery خیلی راهکار خوبی نیست تا جایی که می‌دونم و تجربه کردم و باعث میشه در ادامه هم با مسائل مختلفی روبرو بشوید.


M Akhondi
@m.akhondi68 3 سال پیش مطرح شد
0

@mhyeganeh
یعنی قالب مثل اینو چطور بایستی استفاده کنم
http://www.rtl-theme.com/theme-demo/145777


moha li
تخصص : توسعه دهنده لاراول و Vue
@mohaligateway 3 سال پیش مطرح شد
0

سلام
من توی چندتا قالب استفاده کردم مشکل خاصی نداشتم. هر دو فایل را توی یک فایل mix می کنید ؟
@m.akhondi68


M Akhondi
@m.akhondi68 3 سال پیش مطرح شد
0

یعنی همه این فایلها رو باید mix کنم


<script src="{{ asset('js/app.js') }}"></script>

<!-- BEGIN: Vendor JS-->
<script src="/theme-panel/assets/vendors/js/vendors.min.js"></script>
<script src="/theme-panel/assets/fonts/LivIconsEvo/js/LivIconsEvo.tools.min.js"></script>
<script src="/theme-panel/assets/fonts/LivIconsEvo/js/LivIconsEvo.defaults.js"></script>
<script src="/theme-panel/assets/fonts/LivIconsEvo/js/LivIconsEvo.min.js"></script>
<!-- BEGIN Vendor JS-->

<!-- BEGIN: Page Vendor JS-->
<script src="/theme-panel/assets/vendors/js/charts/apexcharts.min.js"></script>
<script src="/theme-panel/assets/vendors/js/extensions/swiper.min.js"></script>
<!-- END: Page Vendor JS-->

<!-- BEGIN: Theme JS-->
<script src="/theme-panel/assets/js/scripts/configs/vertical-menu-light.js"></script>
<script src="/theme-panel/assets/js/core/app-menu.js"></script>
<script src="/theme-panel/assets/js/core/app.js"></script>
<script src="/theme-panel/assets/js/scripts/components.js"></script>
<script src="/theme-panel/assets/js/scripts/footer.js"></script>
<script src="/theme-panel/assets/vendors/js/forms/validation/jqBootstrapValidation.js"></script>
<!--customizer.js => SideMenu Customizer Theme Color & Size & mode -->
<script src="/theme-panel/assets/js/scripts/customizer.js"></script>
<!-- END: Theme JS-->

<script src="/theme-panel/assets/js/scripts/forms/validation/form-validation.js"></script>

ممنون میشم اگه جوابتون مثبته
نمونه کد برای mix بگید
@mohaligateway


moha li
تخصص : توسعه دهنده لاراول و Vue
@mohaligateway 3 سال پیش مطرح شد
0

شما jquery رو به چه شکلی لود می کنید. در فایل بالا جی کوئری وجود نداره ؟
@m.akhondi68


M Akhondi
@m.akhondi68 3 سال پیش آپدیت شد
0

اگه بگم هیچ کجا ، دعوا نمی کنی 😃
به اطلاعاتی که در مطلب شروع نوشتم همه چیز و حتی jquery کار میکنه
ولی زمانی که vue و تگ شو اضافه می کنم .
Vue اجرا نمیشه ، افزونه vueDevTools هم نشون نمیده که vue وجود داره
@mohaligateway


moha li
تخصص : توسعه دهنده لاراول و Vue
@mohaligateway 3 سال پیش مطرح شد
0

اگه بگم هیچ کجا ، دعوا نمی کنی 😃

بالاخره کاره دیگه پیش میاد 🤣
شما فایل jquery رو به صورت جداگانه minimize کن یا حتی دانلود کن و توی پوشه public بارگذاری کن. فایل و محتویات vue رو بالاتر از jquery لود کن. البته vue و component های اون رو داخل یک فایل لود کن.
بعد از npm run production زدن vueDevTools دیگه vue رو نمی تونه بخونه به خاطر همین نشون نمیده.
@m.akhondi68


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام