In laravel SPA, When I use the DataTables which depends on jQuery, when I use laravel's vue component，vue also require jquery, so the DataTables can't be load correctly， because loading jquery twice. what should I do?
index.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>控制台 | </title>
<!-- Bootstrap -->
<link href="/assets/admin/gentelella/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- ...some css... -->
<!-- Datatables -->
<link href="/assets/admin/gentelella/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="/assets/admin/gentelella/vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
<link href="/assets/admin/gentelella/vendors/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css" rel="stylesheet">
<link href="/assets/admin/gentelella/vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet">
<link href="/assets/admin/gentelella/vendors/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="/assets/admin/gentelella/build/css/custom.min.css" rel="stylesheet">
</head>
<body class="nav-md">
<div id="app"></div>
<!-- load jQuery first-->
<script src="/assets/admin/gentelella/vendors/jquery/dist/jquery.min.js"></script>
<!-- here is some plugins, they maybe dependent on jquery,so I can't delete previous line -->
<!-- FastClick -->
<script src="/assets/admin/gentelella/vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="/assets/admin/gentelella/vendors/nprogress/nprogress.js"></script>
<!-- Datatables -->
<script src="/assets/admin/gentelella/vendors/http://ift.tt/2nKzIVG"></script>
<script src="/assets/admin/gentelella/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="/assets/admin/gentelella/vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="/assets/admin/gentelella/vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
<script src="/assets/admin/gentelella/vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="/assets/admin/gentelella/vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="/assets/admin/gentelella/vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="/assets/admin/gentelella/vendors/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script>
<script src="/assets/admin/gentelella/vendors/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
<script src="/assets/admin/gentelella/vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="/assets/admin/gentelella/vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script>
<script src="/assets/admin/gentelella/vendors/datatables.net-scroller/js/dataTables.scroller.min.js"></script>
<!-- main.js loaded jQuery already -->
<script src=""></script>
<!-- Custom Theme Scripts -->
</body>
</html>
bootstrap.js
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire