ztree在Vue2.5.2下面的运用实战

最近有兴研究了Vue2中应用ztree插件。方便大家参考。

一. 关于Vue创建项目大家可以网上找下。

首先要安装node环境，和cnpm镜像，这样可以更快下载相关文件(npm可以替换成cnpm进行相关下载)。

1.npm install vue

2.npm install -g vue-cli  全局安装下命令行工具cli，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

3.vue init webpack my-project     //创建一个基于webpack模板的新项目

4.cd my-project   //进入新建的项目目录下

5.npm install    //安装项目所需要的依耐

6.npm run dev  //运行此命令就可以在浏览器运行查看效果

二.新建项目之后请看下面

1.新建项目之后请看下面，新建一个文件夹plugins，下面放所需要的ztree插件和ztree所依耐的jQuery文件。

2.在components文件下新建一个zTree.vue组件

3.在index.html里面引用ztree样式文件zTreeStyle.css（前面的图标可以自定义可以参考官网）

4.加入项目所引用的ztree的js文件。两种方式第一在main.js里面，第二在zTree.vue组件中单独加入

main.js中代码：

import $ from "jquery"
import "../plugins/jquery.3.2.1.js"
import "../plugins/ztree/js/jquery.ztree.core.min.js"
import "../plugins/ztree/js/jquery.ztree.excheck.min.js"

zTree.vue文件中代码（其实就是路径不同）

  import "../../plugins/jquery.3.2.1.js"
  import "../../plugins/ztree/js/jquery.ztree.core.min.js"
  import "../../plugins/ztree/js/jquery.ztree.excheck.min.js"

三。组件模板应用

在hello.vue中引入ztree的组件

整个文件代码如下：

四。路由配置router里面index.js

完整代码：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import zTree from '@/components/zTree'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },{
      path: '/',
      name: 'zTree',
      component: zTree
    }
  ]
})

五. ztree.vue文件完整代码

值得注意的是这里的回调函数里面的ztree的id名字必须对应（$.fn.zTree.getZTreeObj("treeDemo");treeDemo对应于id名）

最后差不多整理完了，整理博客还是蛮耗功夫的。end。