vue组件中如何使用jquery写的插件

Question

插件是用jquery写的

我是不得已才使用jquery插件的，按照下面这样引入好像不行

有没有这样用过jquery插件的兄弟，请教一下！

Answer 1

要解决四个问题：

1. jQuery 的引入和初始化问题， 引入后貌似不会自动挂载到 window，所以需要引入后挂载一下，另外其库路径是'jQuery/dist/jquery.js（不同安装方法来的文件路径可能不一样，自己在 node_module/ 下找找），所以要这样初始化：

   import jQuery from 'jQuery/dist/jquery.js';
   window.$ = window.jQuery = jQuery;

2. 所用插件的引入问题，像这种写在一个 IIFE 里的，直接引入没有问题，不行就打印看看引入的是什么东西，是个函数就执行它；
3. 所用插件的实例的初始化问题，jQuery 插件通常在 $(function(){...})或者 $(document).ready(function(){...})中初始化，把写在这些地方的初始化代码搬到 Vue 配置项的 .mounted 生命周期函数里；
4. Vue对DOM的修改对插件实例造成的副作用，通常的也是最好的解决方案是不让 Vue 在初始化完成后对插件所需 DOM 造成任何影响（比如用 v-if、v-for 等指令控制其渲染），如果影响无法避免，那么需要在修改数据的同时销毁插件实例（如能销毁的话），并在 $nextTick 里重新初始化一个插件实例。