H5W3
当前位置:H5W3 > JavaScript > 正文

vue中使用zTree实践笔记

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 插件,这个插件在加载某个模块时,如果遇到了未定义的并且在配置文件中配置了的变量,比如上面代码看到的 $jqueryjQuerywindow.jQuery,就会自动导入对应的依赖项,比如上面代码中的 jquery 模块。

同时,你也不需要再在项目中显式地导入 jquery 了,也就是说你可以将 main.js 中的 import $ from 'jquery' 删掉了。

重新启动项目,页面没有报错。

5. 赶紧写个 demo 看一哈~

<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>

淦~

编译出错了:

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
  }
}

env 选项定义了预定义的全局变量,添加了上述代码,那么 eslint 就会认为 jquery 是全局变量而不是一个未定义的变量了。

再次重新启动项目,就可以看到正常加载的 zTree 树形组件了~

本文地址:H5W3 » vue中使用zTree实践笔记