1. 安装依赖
npm i @ztree/ztree_v3
npm i jquery@1.12.4
2. 导入插件
// main.js
import $ from 'jquery'
import '@ztree/ztree_v3/js/jquery.ztree.core.js'
import '@ztree/ztree_v3/css/zTreeStyle/zTreeStyle.css'3. 尝试启动项目
在终端执行
npm run dev
启动项目，打开浏览器，很不幸，页面报错了：
Uncaught ReferenceError: jquery.ztree.core.js:1986 Uncaught ReferenceError: jQuery is not defined
at Object../node_modules/@ztree/ztree_v3/js/jquery.ztree.core.js (jquery.ztree.core.js:1986)
at __webpack_require__ (bootstrap:723)
at fn (bootstrap:100)
at Object../src/main.js (main.js:47)
at __webpack_require__ (bootstrap:723)
at fn (bootstrap:100)
at Object.1 (index.vue?bc88:1)
at __webpack_require__ (bootstrap:723)
at bootstrap:790
at bootstrap:790
找不到
jQuery
了，什么回事呢？
原来呀，以前是使用
<script>
标签来加载 jquery 的，并且会将其挂载到全局中，所以在执行 jquery.ztree.core.js 时能正常地获取到
jQuery
。而在 vue 项目中，经过 webpack 打包后，在 main.js 中导入的
$
和 jquery.ztree.core.js 是各自处在不同的上下文环境的，自然就不能找到
jQuery
了。
4. 修改 webpack 配置
// 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 模块。
同时，你也不需要再在项目中显式地导入 jquery 了，也就是说你可以将 main.js 中的 import $ from 'jquery' 删掉了。
重新启动项目，页面没有报错。
5. 赶紧写个 demo 看一哈~
<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>
编译出错了：
Module Warning (from ./node_modules/eslint-loader/index.js):
error: '$' is not defined (no-undef) at src\views\ztree\index.vue:14:5:
12 | name: 'ZTree',
13 | mounted() {
> 14 | $.fn.zTree.init($('#treeDemo'), {}, [
| ^
15 | {
16 | name: 'test1',
17 | open: true,
这是 eslint 的 no-undef 规则导致的，这条规则禁用未声明的变量，怎么办呢？
6. 修改 eslint 配置
// .eslintrc.js
module.exports = {
env: {
jquery: true