0
In Laravel SPA, wenn ich die DataTables, die von jQuery abhängt, wenn ich Verwenden Sie die vue-Komponente von laravel, vue benötigen auch jquery, damit die DataTables nicht korrekt geladen werden können, weil jquery zweimal geladen wird. was soll ich machen?In Laravel SPA, benutze ich die DataTables, wenn ich laravel die vue-Komponente verwenden, vue erfordern auch jquery, so dass die DataTables nicht korrekt geladen werden können
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>控制台 | {{ config('webbackend.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/datatables.net/js/jquery.dataTables.min.js"></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="{{ asset('js/main.js') }}"></script>
<!-- Custom Theme Scripts -->
{{--<script src="/assets/admin/gentelella/build/js/custom.min.js"></script>--}}
</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');