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

Posted 2023-02-22

【中文标题】如何将 jQuery 库导入 Vue.js [重复]

【英文标题】：How do I import a jQuery library into Vue.js [duplicate]

【发布时间】：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。

【参考方案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 很棒'; );