在vue-cli项目中使用ztree，并实现ztree的模糊搜索高亮

网上许多关于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.conf.js文件中，找到并注释，如下：

	// ...(config.dev.useEslint ? [createLintingRule()] : [])

(3）下载ztree的插件包
可到官网下载，项目中只用引入js和css文件即可。把zTree的插件代码放在assets目录下：

（4）在mian.js中导入zTree的js文件和css文件

	import './assets/zTree/css/metroStyle/metroStyle.css'
	import './assets/zTree/js/jquery-1.4.4.min.js'
	import './assets/zTree/js/jquery.ztree.all.js'
	import './assets/zTree/js/jquery.ztree.exhide.js'

4.代码实现

我这里作为demo就直接写在App.vue中，读者可根据自己项目需求写入其他vue文件中

App.vue

    import { data } from './utils/ztreeData.json'

其中的数据是从本地新建的文件夹utils中的json文件获取的。
数据太多，这里不展示，可以参考其他博主的 博客

5.参考资料

1. 使用于ztree的中国省市县区json数据
2. zTree实现树形图模糊搜索