vue中使用zTree插件

马尔科~

已于 2022-07-07 16:14:08 修改

阅读量6k

点赞数 3

分类专栏： vue使用ztree 文章标签： jquery webpack es6

于 2021-08-14 09:51:02 首次发布

本文链接：https://blog.csdn.net/zsszyrf/article/details/119696667

版权

本文介绍了在Vue项目中使用zTree插件的步骤，包括下载jQuery和zTree核心文件，解决$未定义问题，以及在main.js中初始化配置。同时，提到了在Vue组件模板中显示zTree的注意事项，以及如何参照官方文档进行设置。

摘要由CSDN通过智能技术生成

在vue中使用zTree 首先需要下载

jQuery，建议从官方网站下载，zTree上的版本有点老，听说有些项目已经不支持；

两个zTree核心包，就是官网提供的下载地址中的文件，我们下载下来找到这两个文件，放到我们的项目文件夹中；

官网地址：http://www.treejs.cn

如果zTree 和jquery都下载完成后

如果出现$未定义需要在 build/webpack.base.conf.js文件中

module——exports里面加入这一一端代码

详情如下

module.exports = {
  context: path.resolve(__dirname, '../'),
  plugins: [
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery"
    })
  ],

然后在main.js引入

import $ from 'jquery'
import '@ztree/ztree_v3/js/jquery.ztree.core.min.js'
import '@ztree/ztree_v3/js/jquery.ztree.excheck.min.js'
import '@ztree/ztree_v3/css/metroStyle/metroStyle.css'

使用demo对象树结构