Node 项目引入Ztree

1.引入ztree依赖

npm install @ztree/ztree_v3

2.main.js 引入ztree

import '@ztree/ztree_v3/js/jquery.ztree.core.js'
import '@ztree/ztree_v3/css/zTreeStyle/zTreeStyle.css'

3.vue.config.js 配置jquery

var webpack = require('webpack')
plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    jquery: 'jquery',
    'window.jQuery': 'jquery',
    jQuery: 'jquery'
  })
]

4.修改 eslint 配置,否则$有警告标识

// .eslintrc.js
module.exports = {
  env: {
    jquery: true
  }
}

5.写个demo测试

<template>
  <div class="app-container">
    <ul id="treeDemo" class="ztree" />
  </div>
</template>

<script>

export default {
  name: 'Menu',
  data() {
    return {
      
    }
  },
  created() {
    this.creatTree()
  },
  methods: {
    creatTree() {
      var setting = {	}
      var nodes = [
        { name: '父节点1', children: [
          { name: '子节点1' },
          { name: '子节点2' }
        ] }
      ]
      $(document).ready(function() {
        $.fn.zTree.init($('#treeDemo'), setting, nodes)
      })
    }
  }
}
</script>