在vue-cli项目中使用ztree，并实现ztree的模糊搜索高亮_vue 中使用ztree的模糊搜索-优快云博客

本文介绍了如何在Vue-cli项目中使用Ztree并实现模糊搜索高亮功能，无需借助jQuery。首先展示效果图，然后通过vue-cli创建项目，接着引入Ztree和jQuery，调整Webpack配置以避免eslint错误。详细步骤包括下载jQuery模块，关闭eslint，下载ztree插件包，以及在main.js中导入zTree的js和css文件。最后，提供代码实现和参考资料。

vue-cli项目中使用zTree，并实现zTree的模糊搜索高亮文本

1.效果图
2.创建项目 ztree-search
3. 引入zTree
4.代码实现
5.参考资料

网上许多关于zTree模糊搜索高亮文本的都是jq写的，但是笔者有点强迫症很想用vue来实现，不想在vue的项目中写jq代码，所以自己参考别的高手的方法做了修改，具体如下。

1.效果图

在这里插入图片描述

2.创建项目 ztree-search

	关于使用vue-cli创建项目，vue-cli安装步骤等读者可以从网上查阅，这里仅从初始化项目开始。

（1）打开命令窗口，输入命令

	vue init webpack ztree-search

vue-cli会自动下载模板，一路回车即可，如下：
在这里插入图片描述
下载模板的过程中会出现警告，并不会影响项目，可忽略。

（2）创建好的项目结构如下：
在这里插入图片描述
（3）进入ztree-search目录，运行项目：

	cd ztree-search		//进入目录

	npm run dev		//运行项目

运行后可访问 http://localhost:8080/#/ ，打开项目看到默认的模板界面
在这里插入图片描述

3. 引入zTree

（1）zTree是基于jquery的插件，在使用ztree之前要先把jqeury导入到项目中

下载jqeury模块

	npm install jquery --save

修改webpack的配置文件webpack.base.conf.js

	module.exports = {
		plugins: [
		    new webpack.ProvidePlugin({
		      $: 'jquery',
		      'jQuery': 'jquery'
		    })
		]
 	 }

（2）关闭项目的eslint，也可在下载模板的时候就不使用eslint，否则引入zTree的js文件后会报上万条格式错误。。。

同样在webpack.base.co