عدم استفاده از 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>
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
پیشنهاد خاصی برای مسئله تون ندارم متاسفانه. فقط بصورت کلی استفاده همزمان از 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 کار میکنه
ولی زمانی که vue و تگ شو اضافه می کنم .
Vue اجرا نمیشه ، افزونه vueDevTools هم نشون نمیده که vue وجود داره
@mohaligateway
اگه بگم هیچ کجا ، دعوا نمی کنی 😃
بالاخره کاره دیگه پیش میاد 🤣
شما فایل jquery رو به صورت جداگانه minimize کن یا حتی دانلود کن و توی پوشه public بارگذاری کن. فایل و محتویات vue رو بالاتر از jquery لود کن. البته vue و component های اون رو داخل یک فایل لود کن.
بعد از npm run production زدن vueDevTools دیگه vue رو نمی تونه بخونه به خاطر همین نشون نمیده.
@m.akhondi68