Question

我正在从HTML模板使用Laravel转换为vue js应用程序就像有拖放表的功能

 src="assets/js/jquery.dataTables.min.js">
 src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js">

表就像

                    <table class="table exampleleft tble-dsg tables_ui t_draggable sourcetable">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Lead Source</th>
                                <th>Value</th>
                                <th>&nbsp;</th>
                            </tr>
                        </thead>
                        <tbody class="t_sortable">
                            <tr>
                                <td>lOREM IPSUM</td>
                                <td>Website</td>
                                <td> $ 750,000.00</td>
                                <td> <div class="btn-group justify-content-center">

                            </div>
                        </div></td>
                            </tr>
                            </tbody>
                            <table>






$(document).ready(function() {
  var $tabs = $('.t_draggable')
  $("tbody.t_sortable").sortable({
    connectWith: ".t_sortable",
    //items: "> tr:not(:first)",
    appendTo: $tabs,
    helper:"clone",
    zIndex: 999990
  }).disableSelection();

  var $tab_items = $(".nav-tabs > li", $tabs).droppable({
    accept: ".t_sortable tr",
    hoverClass: "ui-state-hover",
    drop: function( event, ui ) { return false; }
  });
});

现在，当我尝试使用vue js

我包含的文件 require（'../ jquery.dataTables.min.js'）; 比

mounted: function() {
        console.log('initilizede -adfg');
        var $tabs = $('.t_draggable')
        $("tbody.t_sortable").sortable({
            connectWith: ".t_sortable",
            //items: "> tr:not(:first)",
            appendTo: $tabs,
            helper:"clone",
            zIndex: 999990
        }).disableSelection();

        var $tab_items = $(".nav-tabs > li", $tabs).droppable({
            accept: ".t_sortable tr",
            hoverClass: "ui-state-hover",
            drop: function( event, ui ) { return false; }
        });

}

所以什么也没发生如果有人可以提供帮助，我们如何在Larue中使用Vue js中的Jquery库

我非常感谢所有人

Answer 1

使用 ProvidePlugin

将ProvidePlugin添加到build/webpack.dev.conf.js和build/webpack.prod.conf.js的plugins数组中，以便jQuery对您的所有模块全局可用：

plugins: [


  new webpack.ProvidePlugin({
    $: 'jquery',
    jquery: 'jquery',
    'window.jQuery': 'jquery',
    jQuery: 'jquery'
  })
]

Answer 2

您需要运行 npm install jquery --save

打开文件build/webpack.base.conf.js并添加plugins：

添加：

const webpack = require('webpack')

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jquery: 'jquery',
      'window.jQuery': 'jquery',
      jQuery: 'jquery'
    })
  ]
  ...
}

如何将jQuery库导入Vue.js

2 个答案: