添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

1. 安装依赖

npm i @ztree/ztree_v3
npm i [email protected]

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 插件,这个插件在加载某个模块时,如果遇到了未定义的并且在配置文件中配置了的变量,比如上面代码看到的 $jqueryjQuerywindow.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