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

因为以前使用 <script> 标签来加载 jquery 的，并且会将其挂载到全局中，所以在执行 jquery.ztree.core.js 时能正常地获取到 jQuery 。而在 vue 项目中，经过 webpack 打包后，在 main.js 中导入的 $ 和 jquery.ztree.core.js 是各自处在不同的上下文环境的，所以就不能找到 jQuery 了。

修改 webpack 配置

创建 vue.config.js 配置文件

// vue.config.js
const webpack = require('webpack')
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        jQuery: 'jquery'
      })
    ]
  },
}

上面代码使用了 webpack 的 ProvidePlugin 插件，这个插件在加载某个模块时，如果遇到了未定义的并且在配置文件中配置了的变量，比如上面代码看到的 $、jquery、jQuery、window.jQuery，就会自动导入对应的依赖项，比如上面代码中的 jquery 模块。
同时，也不需要再在 main.js 中引入jquery 了。
重新启动项目后，jQuery is not defined 错误消失。

遇到新的问题

写个demo运行后，编译出错：'$' is not defined

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

<script>
export default {
  name: 'ZTree',
  mounted() {
    $.fn.zTree.init($('#treeDemo'), {}, [
      {
        name: 'test1',
        open: true,
        children: [{ name: 'test1_1' }, { name: 'test1_2' }]
      },
      {
        name: 'test2',
        open: true,
        children: [{ name: 'test2_1' }, { name: 'test2_2' }]
      }
    ])
  }
}
</script>

'$' is not defined

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

修改 eslint 配置

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

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

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