عدم استفاده از 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>
پاسخها
7
پیشنهاد خاصی برای مسئله تون ندارم متاسفانه. فقط بصورت کلی استفاده همزمان از Vue.js و JQuery خیلی راهکار خوبی نیست تا جایی که میدونم و تجربه کردم و باعث میشه در ادامه هم با مسائل مختلفی روبرو بشوید.
@mhyeganeh
یعنی قالب مثل اینو چطور بایستی استفاده کنم
http://www.rtl-theme.com/theme-demo/145777
گفتگوهای مرتبط
شاید پاسخ شما همینجا باشد
سلام
من توی چندتا قالب استفاده کردم مشکل خاصی نداشتم. هر دو فایل را توی یک فایل mix می کنید ؟
@m.akhondi68
یعنی همه این فایلها رو باید 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
شما jquery رو به چه شکلی لود می کنید. در فایل بالا جی کوئری وجود نداره ؟
@m.akhondi68
اگه بگم هیچ کجا ، دعوا نمی کنی 😃
به اطلاعاتی که در مطلب شروع نوشتم همه چیز و حتی jquery کار میکنه
ولی زمانی که vue و تگ شو اضافه می کنم .
Vue اجرا نمیشه ، افزونه vueDevTools هم نشون نمیده که vue وجود داره
@mohaligateway
اگه بگم هیچ کجا ، دعوا نمی کنی 😃
بالاخره کاره دیگه پیش میاد 🤣
شما فایل jquery رو به صورت جداگانه minimize کن یا حتی دانلود کن و توی پوشه public بارگذاری کن. فایل و محتویات vue رو بالاتر از jquery لود کن. البته vue و component های اون رو داخل یک فایل لود کن.
بعد از npm run production زدن vueDevTools دیگه vue رو نمی تونه بخونه به خاطر همین نشون نمیده.
@m.akhondi68