看别人博客跟着敲代码的时候会发现，突然冒出来了文件，不知道冒出来的文件博主放在哪个目录下面。自己写博客的时候也会发现描述起来很困难，一般都会直接截编辑器上项目的图片，这样就可以看到整个项目架构了。但是如果一个项目文件非常多，截图的话就非常不方便了！

在网上找了两张截图，如下：

[使用 Weex 和 Vue 开发原生应用] 7 完整项目目录详解

从上图可以看到项目目录结构非常清晰！

那么我们怎么做到类似的效果呢？
直接在markdown中一个一个敲入吗?项目文档少的话，好像还好！如果多呢？能保证不出错吗？不累吗？可能还没开始进入博客正文就歇菜了！

网上找了一些方法，有window系统的，Linux系统的。这里因为用的是Win10，它有系统自带的生成目录树命令。不过好像达不到上面那种效果。

因为电脑上安装了windows版的Git，试着输入命令tree，显示bash: tree: command not found，如下：

开始想把Windows下的tree命令添加到Git下面，后面搜索发现有针对Windows版本下和Linux类似效果的方法。

下面先介绍Windows下的Git和Linux类似方法，再介绍Windows下自带的方法。
先生成一个项目，如vue init webpack vuedemo，项目完成后将modules删除，目录示意图：

下面两种方法都以这个项目为例，进行操作

下面介绍两种方法可以生成项目目录树：

一、 Windows仿Linux命令

三个的官方网站分别是：
// minGW给那些习惯于再Linux上开发的人员，在windows上提供了一套类似的工具集
minGW：http://www.mingw.org    

// cygwin主要是对于再Linux的程序，无需改动代码即可移植到windows上
cygwin:  http://www.cygwin.com   

// GnuWin32主要是对习惯linux工具的人员，在windows上提供一套类似的命令
gnuwin32:http://gnuwin32.sourceforge.net   

这里用到的是第三个GnuWin32， 此次用到的命令为tree-1.5.2.2-setup.exe，我们在Windows中将tree命令加入git-bash中

进入网站，下载tree，解压后，将tree.exe放入git安装目录的git\usr\bin中
Tree for Windows

测试tree命令

tree --help // 查看关于tree命令的帮助信息
tree // 以树形的形式列出当前目录的文件和文件夹，不加任何参数，它会自动列表当前目录下面所有深度级别的文件和目录
tree -L 1 // 只查看当前第一级的目录和文件
tree -L 2 // 只查看当前第二级的目录和文件
tree -L N // 只查看当前第N级的目录和文件
tree -L 2 > tree.txt // 将当前文件的第二级子目录的目录结构信息输入保存到tree.txt文件

// tree.txt

.
|-- README.md
|-- build
|   |-- build.js
|   |-- check-versions.js
|   |-- logo.png
|   |-- utils.js
|   |-- vue-loader.conf.js
|   |-- webpack.base.conf.js
|   |-- webpack.dev.conf.js
|   `-- webpack.prod.conf.js
|-- config
|   |-- dev.env.js
|   |-- index.js
|   `-- prod.env.js
|-- file_tree.txt
|-- index.html
|-- package-lock.json
|-- package.json
|-- src
|   |-- App.vue
|   |-- assets
|   |-- components
|   |-- main.js
|   `-- router
|-- static
`-- tree.txt

7 directories, 19 files

---

二、Windows自带的tree命令

Windows有自带的tree命令

// windows下tree命令列出文件[path]路径下的文件目录树，[path]为空的话，默认在当前命令路径目录下
tree [path]  /f

// 将vuedemo目录下所有目录及子目录下的文件都打印出来
G:\vuedemo>tree /f

// 将G:\vuedemo目录下所有目录及子目录下的文件都打印出来并重定向到一个文件中
G:\vuedemo>tree /f file_tree.txt

// file_tree.txt

卷 Document 的文件夹 PATH 列表
卷序列号为 0FD7-12D9
G:.
│  .babelrc
│  .editorconfig
│  .gitignore
│  .postcssrc.js
│  file_tree.txt
│  index.html
│  package-lock.json
│  package.json
│  README.md
│  
├─build
│      build.js
│      check-versions.js
│      logo.png
│      utils.js
│      vue-loader.conf.js
│      webpack.base.conf.js
│      webpack.dev.conf.js
│      webpack.prod.conf.js
│      
├─config
│      dev.env.js
│      index.js
│      prod.env.js
│      
├─src
│  │  App.vue
│  │  main.js
│  │  
│  ├─assets
│  │      logo.png
│  │      
│  ├─components
│  │      HelloWorld.vue
│  │      
│  └─router
│          index.js
│          
└─static
        .gitkeep

---

参考文章：

gnuwin32
linux tree命令以树形结构显示文件目录结构
生成目录结构树 tree
在windows中将tree命令加入git-bash中