一、概述

​ 不知道经常写技术文档或博客的小伙伴有没有显示文件夹目录树的需求。比如要介绍一下某个项目的工程结构的时候，或许会用到，例如vue项目结构：

vue-text-project   //项目名称
 ├── config
 │   ├── dev.env.js
 │   ├── index.js
 │   └── prod.env.js
 ├── index.html
 ├── LICENSE
 ├── package-lock.json
 ├── package.json
 ├── README.md
 ├── src
 │   ├── App.vue
 │   ├── assets
 │   │   ├── location.png
 │   │   └── logo.png
 │   ├── components
 │   │   ├── Echarts.vue
 │   │   ├── HelloWorld.vue
 │   │   └── XYZmap.vue
 │   ├── main.js
 │   └── router
 │       └── index.js
 └── static

接下来介绍这种文件夹目录树结构的生成方法。

二、utools工具安装

​ 这种目录树结构可以通过utools的一个插件来生成。关于该工具，可以去 这里 ↓ 了解和下载安装

三、插件安装和使用

安装并启动utools工具。在插件中心搜索“文件夹”，然后安装序号③所示插件。

安装后，在“已安装” 下启动该插件。

按照上述步骤，即可根据需求生成文件夹目录树。