Ztree is introduced in the Node project

1. Introduce ztree dependencies

npm install @ztree/ztree_v3
Copy the code

2. Main. Js introducing ztree

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

3. Vue. Config. Js jquery configuration

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

4. Modify the ESLint configuration, otherwise $has a warning flag

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

Write a demo test

<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: 'parent node 1', children: [{name:' child node 1'}, {name: 'child node 1'}, {name: 'child node 2}}]] $(document). Ready (function () {$. Fn. ZTree. Init ($(' # treeDemo), setting, nodes)})}}} < / script >Copy the code