当前位置: 首页 > news >正文

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

安装依赖失败的情形

权限不足导致

在这里插入图片描述

相关文章:

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

文章底部有个人公众号:热爱技术的小郑。主要分享开发知识、有兴趣的可以关注一手。 前言 项目的目录结构清晰、可以帮助我们更快理顺项目的整体构成。在写文档之类的时候也比较方便。生成树形目录的方式有多种,我这里简单介绍其中一种较为简单的实现 过…...

postgresql四种逻辑复制的状态

准备 CreateCheckpoint,或者bgwriter启动时,或者创建logicalreplicationslot时都会调用LogStandbySnapshot 记录一个XLOG_RUNNING_XACTS类型的日志。日志中记录了所有提交的事务的xid(HistoricSnapshot) 启动(SNAPBUILD_BUILDING_SNAPSHOT&…...

梯度下降法和牛顿法

梯度下降法和牛顿法都是优化方法。 梯度下降法 梯度下降法和相关知识可以参考导数、偏导数、梯度、方向导数、梯度下降、二阶导数、二阶方向导数一文。梯度下降法是一种迭代地每次沿着与梯度相反方向前进的不断降低损失函数的优化方法。梯度下降只用到一阶导数的信息&#xf…...

elment-ui的侧边栏 开关及窗口联动

<template><div class"asders"><el-aside width"200px"><div class"boxbody"><div>源码外卖</div><el-switch v-model"isCollapse" :active-value"true" :inactive-value"fals…...

【从零开始学习JAVA | 第三十二篇】 异常(下)新手必学!

目录 前言&#xff1a; Exceptions&#xff08;异常&#xff09;&#xff1a; 异常的两大作用&#xff1a; 异常的处理方式&#xff1a; 1.JVM默认处理 2.自己捕获异常 3.抛出处理 自定义异常&#xff1a; 异常的优点&#xff1a; 总结&#xff1a; 前言&#xff1a; 前…...

onnxruntime (C++/CUDA) 编译安装

一、克隆及编译 git clone --recursive https://github.com/Microsoft/onnxruntime cd onnxruntime/ git checkout v1.8.0如果克隆的时候报错&#xff1a; 执行以下&#xff1a; apt-get install gnutls-bin git config --global http.sslVerify false git config --global h…...

第三篇-Tesla P40+CentOS-7+CUDA 11.7 部署实践

第一篇-ChatGLM-webui-Windows安装部署-CPU版 第二篇-二手工作站配置 第三篇-Tesla P40CentOS-7CUDA 11.7 部署实践 硬件环境 系统&#xff1a;CentOS-7 CPU: 14C28T 显卡&#xff1a;Tesla P40 24G 准备安装 驱动: 515 CUDA: 11.7 cuDNN: 8.9.2.26 安装依赖 yum clean al…...

Unity游戏源码分享-ARPG游戏Darklight.rar

Unity游戏源码分享-ARPG游戏Darklight.rar 玩法 项目地址&#xff1a;https://download.csdn.net/download/Highning0007/88105464...

类型转换运算符

当我们想要将自定义类的对象转换为目标类型时&#xff0c;我们可以通过重载类型转换运算符&#xff08;conversion operator&#xff09;来实现。 以下是一个示例代码&#xff0c;展示了如何在 C 中定义一个自定义类&#xff0c;并重载类型转换运算符将对象转换为目标类型&…...

Kafka 入门到起飞系列 - 消费者组管理、位移管理

消费者组 - Consumer Group 上文我们已经讲过消费者组了&#xff0c;我们知道消费组的存在可以保证一个主题下一个分区的消息只会被组内一个消费者消费&#xff0c;从而避免了消息的重复消费 什么是消费组 - Consumer Group&#xff1f; 消费者组是Kafka 提供的可扩展且具有容…...

SpringBoot——数据层三组件之间的关系

简单介绍 在之前的文章中&#xff0c;我们介绍了一下SpringBoot中内置的几种数据层的解决方案&#xff0c;在数据层由三部分组成&#xff0c;分别是数据库&#xff0c;持久化技术以及数据源&#xff0c;但是我今天写着写着&#xff0c;突然就想不起来这三部分到底是干什么的了…...

LeetCode647.Palindromic-Substrings<回文子串>

题目&#xff1a; 思路&#xff1a; 错误代码&#xff1a;&#xff08;缺少部分判断&#xff09; 使用的是寻找回文子串的方法。以一个点为中心向两边扫描。但是有一点小问题。 因为回文子串是分奇偶的&#xff0c;所以需要两种判断方式。 看了下答案后发现我的代码距离答案一…...

React的hooks---useContext

Context 提供了一个无需为每层组件手动添加 props &#xff0c;就能在组件树间进行数据传递的方法&#xff0c;useContext 用于函数组件中订阅上层 context 的变更&#xff0c;可以获取上层 context 传递的 value prop 值 useContext 接收一个 context 对象&#xff08;React.…...

【Terraform学习】TerraformCloud入门介绍(快速入门)

TerraformCloud入门介绍 什么是 TerraformCloud&#xff1f; Terraform Cloud是Hashicorp Terraform的SaaS版本。 免费版功能 免费版功能包括版本控制集成、远程计划和实施远程计划和实施、通知及webhook、全http API驱动、状态管理、模拟计划、私有化模块注册器以及全HTTP界…...

linux实现运行java分包部署

1.打好包之后 找到bin文件夹下的 startup.sh文件 2.cd 进入bin文件夹下 3.执行 sh startup.sh 运行命令 4.如果出现此错误 是Windows和Linux的.sh脚本文件格式不同&#xff0c;如果在脚本中有空行&#xff0c;脚本是在Windows下进行编辑之后上传到linux上去执行的话&#xff0c…...

数据安全之全景图系列——数据分类分级落地实践

1、数据分类分级现状 我们正处于一个数据爆炸式增长的时代&#xff0c;随着产业数字化转型升级的推进&#xff0c;数据已被国家层面纳入生产要素&#xff0c;并且成为企业、社会和国家层面重要的战略资源。数据分类分级管理不仅是加强数据交换共享、提升数据资源价值的前提条件…...

C++实现MySQL数据库连接池

C实现MySQL数据库连接池 涉及技术 MySQL数据库编程、单例模式、STL容器、C11多线程&#xff08;线程互斥、线程互斥、线程同步通信和unique_lock&#xff09;、智能指针shared_ptr、lambda表达式、生产者-消费者线程模型。 项目背景 为了提升MySQL数据库&#xff08;基于C/…...

day4 驱动开发 c语言学习

不利用系统提供的register_chrdev&#xff0c;自己实现字符设备的注册 底层代码 led.c #include <linux/init.h> #include <linux/module.h> #include <linux/fs.h> #include <linux/uaccess.h> #include <linux/io.h> #include "head.h…...

history命令:显示命令执行时间

1.修改配置文件 vim /etc/profile 添加内容 export HISTTIMEFORMAT"%Y-%m-%d %H:%M:%S " ​ #注意&#xff1a;在末尾的“引号”与“S”之间&#xff0c;加入一位空格&#xff0c;将日期时间和历史命令用空格相隔开来。 你也可以换一种清晰的形式&#xff0c;效果…...

Django接口返回JSON格式数据报文

目录 遇到问题 Django返回json结构报文 不可行方式python json 可行方式JsonResponseQuerySet.values()。 python的两个web框架&#xff0c;flask和django&#xff0c;两者都具有view 模板的章节&#xff0c;但是当前开发一个应用&#xff0c;大部分采用前后端分离的合作方式。…...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

适应性Java用于现代 API:REST、GraphQL 和事件驱动

在快速发展的软件开发领域&#xff0c;REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名&#xff0c;不断适应这些现代范式的需求。随着不断发展的生态系统&#xff0c;Java 在现代 API 方…...

智能职业发展系统:AI驱动的职业规划平台技术解析

智能职业发展系统&#xff1a;AI驱动的职业规划平台技术解析 引言&#xff1a;数字时代的职业革命 在当今瞬息万变的就业市场中&#xff0c;传统的职业规划方法已无法满足个人和企业的需求。据统计&#xff0c;全球每年有超过2亿人面临职业转型困境&#xff0c;而企业也因此遭…...

从零开始了解数据采集(二十八)——制造业数字孪生

近年来&#xff0c;我国的工业领域正经历一场前所未有的数字化变革&#xff0c;从“双碳目标”到工业互联网平台的推广&#xff0c;国家政策和市场需求共同推动了制造业的升级。在这场变革中&#xff0c;数字孪生技术成为备受关注的关键工具&#xff0c;它不仅让企业“看见”设…...

webpack面试题

面试题&#xff1a;webpack介绍和简单使用 一、webpack&#xff08;模块化打包工具&#xff09;1. webpack是把项目当作一个整体&#xff0c;通过给定的一个主文件&#xff0c;webpack将从这个主文件开始找到你项目当中的所有依赖文件&#xff0c;使用loaders来处理它们&#x…...

欢乐熊大话蓝牙知识17:多连接 BLE 怎么设计服务不会乱?分层思维来救场!

多连接 BLE 怎么设计服务不会乱&#xff1f;分层思维来救场&#xff01; 作者按&#xff1a; 你是不是也遇到过 BLE 多连接时&#xff0c;调试现场像网吧“掉线风暴”&#xff1f; 温度传感器连上了&#xff0c;心率带丢了&#xff1b;一边 OTA 更新&#xff0c;一边通知卡壳。…...

【Java】Ajax 技术详解

文章目录 1. Filter 过滤器1.1 Filter 概述1.2 Filter 快速入门开发步骤:1.3 Filter 执行流程1.4 Filter 拦截路径配置1.5 过滤器链2. Listener 监听器2.1 Listener 概述2.2 ServletContextListener3. Ajax 技术3.1 Ajax 概述3.2 Ajax 快速入门服务端实现:客户端实现:4. Axi…...

OpenGL-什么是软OpenGL/软渲染/软光栅?

‌软OpenGL&#xff08;Software OpenGL&#xff09;‌或者软渲染指完全通过CPU模拟实现的OpenGL渲染方式&#xff08;包括几何处理、光栅化、着色等&#xff09;&#xff0c;不依赖GPU硬件加速。这种模式通常性能较低&#xff0c;但兼容性极强&#xff0c;常用于不支持硬件加速…...

aurora与pcie的数据高速传输

设备&#xff1a;zynq7100&#xff1b; 开发环境&#xff1a;window&#xff1b; vivado版本&#xff1a;2021.1&#xff1b; 引言 之前在前面两章已经介绍了aurora读写DDR,xdma读写ddr实验。这次我们做一个大工程&#xff0c;pc通过pcie传输给fpga&#xff0c;fpga再通过aur…...

Oracle实用参考(13)——Oracle for Linux物理DG环境搭建(2)

13.2. Oracle for Linux物理DG环境搭建 Oracle 数据库的DataGuard技术方案,业界也称为DG,其在数据库高可用、容灾及负载分离等方面,都有着非常广泛的应用,对此,前面相关章节已做过较为详尽的讲解,此处不再赘述。 需要说明的是, DG方案又分为物理DG和逻辑DG,两者的搭建…...