tree命令用于以树状图直观展示目录结构，推荐用tree -L 3 -I "node_modules|.git|dist"查看前三层并过滤干扰目录，未安装时可依系统用apt/brew/choco安装。

网页开发实战中，你经常需要快速查看文件结构、检查网络请求、启动本地服务、排查端口冲突、复制配置文件或清理构建产物——这些操作在图形界面里点十几次不如终端里敲一行命令高效。

快速查看项目目录树形结构

方法一：用 tree 命令（推荐）
执行 tree -L 3 -I "node_modules|.git|dist"，只显示前三层，并自动过滤掉体积大、干扰多的目录。【不加 -I 过滤，tree 可能卡死或输出上万行】 如果提示 command not found，在 Windows 上用 Chocolatey 安装：choco install tree；macOS 用 brew install tree；Linux 用 sudo apt install tree。

方法二：纯 shell 替代方案
执行 find . -maxdepth 3 -type d | sed 's/[^-][^\/]*\// |/g; s/|\([^ ]\)/|-\1/'，无需安装额外工具，但可读性略差，适合临时应急。

本地服务启动与端口冲突排查

第一步：启动开发服务器
进入项目根目录后，运行 npm run dev 或 python3 -m http.server 8080（静态资源），确保服务已监听。

第二步：确认端口是否被占用
Windows 执行：netstat -ano | findstr :3000 → 记下 PID → 再执行 tasklist | findstr "12345"（把 12345 换成实际 PID）查进程名。
macOS/Linux 执行：lsof -i :3000 或更精准的 lsof -ti:3000 | xargs kill -9 直接强杀（慎用）。

第三步：一键释放端口（仅 Linux/macOS）
kill $(lsof -t -i:3000) —— 这条命令会直接终止所有占用 3000 端口的进程，【执行前务必确认端口无关键服务在运行】。

快速复制/备份核心配置文件

用 cp + 时间戳生成带日期的备份：cp vite.config.js vite.config.js.bak.$(date +%Y%m%d)，这样每次备份都自带日期后缀，不会覆盖旧版。
Windows CMD 用户请改用：copy vite.config.js vite.config.js.bak.%date:~0,4%%date:~5,2%%date:~8,2%（注意去除空格和斜杠）。

批量复制多个配置到新目录：cp package.json tsconfig.json eslint.config.js ./deploy/，路径末尾斜杠可省略，但目标目录必须已存在。

清除构建产物并验证残留

执行 rm -rf dist build .next .nuxt 删除常见构建目录。
接着立刻验证是否清干净：ls -d */ | grep -E "^(dist|build|.next|.nuxt)$"，如果无输出，说明删除成功；若有输出，说明某个目录没删掉或名字有细微差异（比如 .next_ 多了个下划线）。

Windows 用户请改用：rd /s /q dist build && rd /s /q .next && rd /s /q .nuxt，注意 && 表示前一条成功才执行下一条。