当前位置: 首页 > 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;大部分采用前后端分离的合作方式。…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

聊聊 Pulsar:Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

云原生玩法三问:构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分,它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构: use strict;/…...