文章/答案/技术大牛

发布

社区首页 >问答首页 >在laravel中，我使用DataTables，当我使用laravel组件时，vue也需要jquery，因此不能正确加载DataTables

问在laravel中，我使用DataTables，当我使用laravel组件时，vue也需要jquery，因此不能正确加载DataTables
EN

Stack Overflow用户

提问于 2017-04-01 09:10:08

回答 1查看 301关注 0票数 0

在laravel中的，当我使用依赖于jquery的DataTables时，当我使用laravel的vue组件时，vue也需要jQuery，所以DataTables不能正确加载，因为加载了jquery两次。我该怎么办？

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');

jquery

laravel

laravel-5

datatables

vuejs2

回答 1

Stack Overflow用户

发布于 2017-04-01 13:15:35

验证jQuery是否在VueJ之前加载。

能传递一些main.js的片段吗？请。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43154904

复制

相似问题

问在laravel中，我使用DataTables，当我使用laravel组件时，vue也需要jquery，因此不能正确加载DataTables
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在laravel中，我使用DataTables，当我使用laravel组件时，vue也需要jquery，因此不能正确加载DataTablesEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在laravel中，我使用DataTables，当我使用laravel组件时，vue也需要jquery，因此不能正确加载DataTables
EN