Vue项目中使用 zTree

简介

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

安装

ztree安装

npm install ztree
        或
yarn add ztree

由于 ztree 依赖 jQuery ，所以要安装 jQuery框架。

jQuery 安装

npm install jquery 
        或
yarn add jquery 

引入

在 main.js中引入插件

import $ from "jquery";
import "ztree";
import "ztree/css/metroStyle/metroStyle.css";

遇到问题

项目启动后出现错误：jQuery is not defined

jQuery is not defined

因为以前使用

'$' is not defined

这是 eslint 的 no-undef 规则导致的，这条规则禁用未声明的变量

修改 eslint 配置

找到 .eslintrc.js 文件，在 env 选项中添加 jquery:true。

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

env 选项定义了预定义的全局变量，添加了上述代码，那么 eslint 就会认为 jquery 是全局变量而不是一个未定义的变量了。
再次重新启动项目，就可以看到正常加载的 zTree 树形组件了