如何将 jQuery 库导入 Vue.js [重复]答案

【问题标题】：How do I import a jQuery library into Vue.js [duplicate]如何将 jQuery 库导入 Vue.js [重复]
【发布时间】：2019-06-29 04:42:15
【问题描述】：

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

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

和Table是一样的

                    <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 时

我包含的文件要求（'../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; }
        });

}

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

非常感谢大家

【问题讨论】：

这个问题不重复。我在问如何包含 jQuery 库而不是 jQuery。

标签： javascript vue.js

【解决方案1】：

你需要跑 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'
    })
  ]
  ...
}

【讨论】：

如何添加自定义库并调用其函数？

【解决方案2】：

使用 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'
  })
]

【讨论】：

jquery 可用，但该库未初始化且无法正常工作
似乎 Jquery 在 Vusjs 渲染之前完成了它的执行。试试 Vue.NextTick 它让 Dom 准备好了。
vuejs.org/v2/api/#Vue-nextTick
不工作我试过 => jQuery('#progress-1').LineProgressbar({ percent: 25 }); console.log('Vue 很棒'); this.msg = 'VUE 很棒'; });