简介

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">
      id="treeDemo"
      class="ztree"
</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>