VUE中使用 zTree -- jQuery 树插件 及 使用时报错 jQuery is not defined 的问题解决

使用需求

时隔两年多，再次使用到了 ztree ，这次是在vue中引入使用，并遇到了一些小问题，在这里把经验和解决办法给大家分享下，共勉。
ztree： zTree -- jQuery 树插件 官网简介 zTree v3.5 Demo 演示
有关ztree的使用，之前整理过两篇在jquery中使用的方法，大家参考下：
zTree -- jQuery 树插件 使用方法与例子
zTree -- jQuery 树插件 构造treeNode JSON 数据对象
zTree v3.5 Demo 演示 OutLook 样式的左侧菜单

在vue中使用zTree

首先，需要安装插件：

npm install ztree

然后，使用ztree

具体相关的代码如下：

<ul id="ztree" class="ztree"></ul>

提示：zTree 的容器 className 别忘了设置为 "ztree"！！！

import 'jquery'





import  'ztree'





import 'ztree/css/metroStyle/'

data () {



    return {



      treeNodes: '',



      selectNode: '',



      selectTreeSetting: {



        view: {



          showIcon: true,



          showLine: true,



          dblClickExpand: false




        },



        async: {



          enable: true,



          type: 'get',



          dataType: 'json',



          url: '/xxxx/',



          autoParam: ['id=parentId'],



          dataFilter: 



        },



        data: {



          simpleData: {



            enable: true,



            idKey: 'id',



            pIdKey: 'parentId'




          }



        },



        callback: {



          onClick: 



        }



      }



 



    }



  },



  mounted () {



    ($('#station'))



  },



  methods: {



    initStationSelectTree (anchor) {



      this.$get('/xxxxx/', {}, response => { //此处是使用的封装过的



         = $.(anchor, , response.data)



      })



    },



    filter (treeId, parentNode, childNodes) {



      if (!childNodes) return null




      for (var i = 0, l = childNodes.length; i < l; i++) {



        if (childNodes[i].parentId === 'super') childNodes[i].open = true




      }



      curChildNodes = childNodes



      return childNodes



    },



    zTreeOnClick: function (event, treeId, treeNode) {



      // (treeNode);点击树节点获取当前节点  等，编写需要的逻辑即可



    }



  }

效果如图：

报错jQuery is not defined的解决

注意，在ztree中会使用到jQuery ，可能会报错jQuery is not defined,一开始参考vue ztree 结合使用中的办法：

项目build的时候自动加载jquery，并且输出到jQuery中

    new webpack.ProvidePlugin({



      jQuery:'jquery',



      $:'jquery',



    })

在 npm run dev 之前，先build一下，解决了报错 jQuery is not defined 的问题。

但是，重点来了，本地没问题，打包发布到正式环境依然报错jQuery is not defined，这就奇怪了，于是搜了很多解决报错jQuery is not defined的文章，各种方法试了很多，依然是报错，最后，其中一篇Webpack引入jquery及其插件的几种方法中的第四种方案，终于能成功解决了，本地运行和发布到正式环境都没再报错了。
这里贴一下解决方案：

此方法只依赖于自己，完全不需要任何其他插件与加载器，创建jquery的包装对象



 



import $ from 'jquery'




window.$ = $



 = $



export default $



 



以后引用jquery时指向



 



import $ from '../assets/'




import 'jquery-ui'





//  此时UI的方法全部可用，如果需要引用bootstrap，可参照此方法



 



为了调用方便，可在webpack配置文件中创建的别名



 



alias: {



    jquery        : 'src/assets/' //    将其指向所在位置



}   



--------------------- 



作者：蚁方阵 



来源：**** 



原文：https:///yiifaa/article/details/51916560 



版权声明：本文为博主原创文章，转载请附上博文链接！

相关参考

vue ztree 结合使用
Webpack引入jquery及其插件的几种方法
“jQuery/$ is not defined” 解决方法