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/metroStyle.css'

data () {
    return {
      treeNodes: '',
      selectNode: '',
      selectTreeSetting: {
        view: {
          showIcon: true,
          showLine: true,
          dblClickExpand: false
        },
        async: {
          enable: true,
          type: 'get',
          dataType: 'json',
          url: '/xxxx/list.json',
          autoParam: ['id=parentId'],
          dataFilter: this.filter
        },
        data: {
          simpleData: {
            enable: true,
            idKey: 'id',
            pIdKey: 'parentId'
          }
        },
        callback: {
          onClick: this.zTreeOnClick
        }
      }

    }
  },
  mounted () {
    this.initStationSelectTree($('#station'))
  },
  methods: {
    initStationSelectTree (anchor) {
      this.$get('/xxxxx/list.json', {}, response => { //此處是使用的封裝過的
        this.treeNodes = $.fn.zTree.init(anchor, this.selectTreeSetting, 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) {
      // console.log(treeNode);點擊樹節點獲取當前節點 treeNode.name 等，編寫須要的邏輯便可
    }
  }

效果如圖：

報錯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的包裝對象jquery-vendor.js

import $ from 'jquery'
window.$ = $
window.jQuery = $
export default $

之後引用jquery時指向jquery-vendor.js

import $ from '../assets/jquery-vendor.js'
import 'jquery-ui'
//  此時UI的方法所有可用，若是須要引用bootstrap，可參照此方法

爲了調用方便，可在webpack配置文件中建立jquery-vendor.js的別名

alias: {
    jquery        : 'src/assets/jquery-vendor.js' //    將其指向jquery-vendor.js所在位置
}   
--------------------- 
做者：蟻方陣 
來源：CSDN 
原文：https://blog.csdn.net/yiifaa/article/details/51916560 
版權聲明：本文爲博主原創文章，轉載請附上博文連接！

相關參考

vue ztree 結合使用
Webpack引入jquery及其插件的幾種方法
「jQuery/$ is not defined」 解決方法