在vue中使用zTree 首先需要下载

jQuery，建议从官方网站下载，zTree上的版本有点老，听说有些项目已经不支持；

两个zTree核心包，就是官网提供的下载地址中的文件，我们下载下来找到这两个文件，放到我们的项目文件夹中；

官网地址：http://www.treejs.cn

如果zTree  和jquery都下载完成后  

如果出现$未定义 需要在   build/webpack.base.conf.js文件中

module——exports里面  加入这一一端代码

详情如下

module.exports = {
  context: path.resolve(__dirname, '../'),
  plugins: [
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery"
    })
  ],

然后在main.js引入

import $ from 'jquery'
import '@ztree/ztree_v3/js/jquery.ztree.core.min.js'
import '@ztree/ztree_v3/js/jquery.ztree.excheck.min.js'
import '@ztree/ztree_v3/css/metroStyle/metroStyle.css'

使用demo对象  树结构

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

设置  树结构

setting:{
  check:{
    chkboxType:{"Y":"ps","N":"ps"},//勾选checkbox对于父子节点的关联关系
    chkStyle:"checkbox",
    enable : true   //是否复选框
  },
  data:{
    key:{
      //key 的菜单名字
      name:"mname"
    },
    simpleData: {
   
      enable: true,
      //一级菜单id
      idKey: "mid",
      //二级菜单id
      pIdKey: "pid"
    }
  }
}

//初始化   第一个参数是demo对象   第二个参数是他设置的结构  第三个则是数据   第二个是否全部展开

$.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes).expandAll(true);

//然后  点击选中的权限

//得到demo对象

var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
//得到所有被选中的子节点
var nodes = treeObj.getCheckedNodes(true);
var ids = "";
//将所有子节点  存放到集合里面
for(var i=0;i<nodes.length;i++){//1,2,3,4,5,
  ids+=nodes[i].mid+",";
}

最后，如果项目不能正常显示，检查一下是否jQuery没有安装，百度一下jQuery的安装

请各位大神多多指正！

1、如何下载、引入zTree到本项目中

下载ztree插件
npm install @ztree/ztree_v3    
下载jquery
npm install jquery --save-dev    

2、在vue项目中，组件的模版应该怎么写，才能正常显示我们的tree

3、官方文档里面提到的设置，我们如何跟着做

4、vue普通的html有一定的差异，这里提供了基础但可用的模板