Vue项目如何生成树形目录结构

文章底部有个人公众号：热爱技术的小郑。主要分享开发知识、有兴趣的可以关注一手。

前言

项目的目录结构清晰、可以帮助我们更快理顺项目的整体构成。在写文档之类的时候也比较方便。生成树形目录的方式有多种，我这里简单介绍其中一种较为简单的实现

过程

1、安装依赖

建议使用管理员命令窗口执行该命令

npm install mddir -g

2、使用生成目录

在项目根目录下执行 mddir, 然后项目根目录下就会多出一个directoryList.md 的文件。这个就是生成的树形目录。

3、生成树形内容展示

|-- undefined
    |-- .babelrc
    |-- .editorconfig
    |-- .eslintignore
    |-- .eslintrc.js
    |-- .gitignore
    |-- .postcssrc.js
    |-- index.html
    |-- md.text
    |-- npminstall-debug.log
    |-- 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
    |   |   |-- address.vue
    |   |   |-- ElseIf.vue
    |   |   |-- ForAndIf.vue
    |   |   |-- HelloWorld.vue
    |   |   |-- ShowAndIf.vue
    |   |   |-- TheItem.vue
    |   |-- router
    |   |   |-- index.js
    |   |-- standard-js-lib
    |   |   |-- business
    |   |       |-- abc
    |   |       |-- common
    |   |           |-- test.js
    |   |-- views
    |       |-- index.vue
    |       |-- Demo1
    |       |   |-- Demo1Page.vue
    |       |   |-- HomePage.vue
    |       |-- Demo2
    |       |   |-- BoxModelDemo.vue
    |       |   |-- FlexibleBoxDemo.vue
    |       |   |-- SwitchComponents.vue
    |       |-- Demo3
    |           |-- ArraysAndObjects.vue
    |           |-- PDF.vue
    |           |-- PDFList.vue
    |-- static
        |-- .gitkeep
        |-- print.rar
        |-- print
            |-- api
            |   |-- print-out-api.js
            |-- plugin
                |-- hiprint
                    |-- hi.png
                    |-- hiprint.bundle.js
                    |-- polyfill.min.js
                    |-- css
                    |   |-- hiprint.css
                    |   |-- print-lock.css
                    |   |-- image
                    |       |-- jquery.minicolors.png
                    |-- custom_test
                    |   |-- print-data.js
                    |-- plugins
                        |-- jquery.hiwprint.js
                        |-- JsBarcode.all.min.js
                        |-- qrcode.js
                        |-- socket.io.js
                        |-- jspdf
                            |-- canvas2image.js
                            |-- canvg.min.js
                            |-- html2canvas.min.js
                            |-- jspdf.min.js

安装依赖失败的情形

权限不足导致