纲要Vibe Coding工作流项目结构重构策略HTML/CSS/JavaScript前端项目目录规范页面路由与跳转逻辑本地开发服务器Live Server的配置与使用旧原型文件清理与PRD文档整合移动端与平板端响应式适配项目背景与优化目标在典型的Vibe Coding流程中通过自然语言与AI协同时初始生成的代码往往侧重于功能实现而非项目结构的规范性。上一阶段的产物是一个基于StitchAI设计稿生成工具的圆形界面原型该原型包含多个独立的页面文件但存在以下核心问题目录结构扁平化所有页面、脚本、样式资源散落在同一层级缺乏逻辑分组。维护性差文件间依赖关系模糊不利于后续迭代。可读性低新加入的开发者或AI难以快速定位核心业务模块。交互缺失页面间缺乏统一的跳转逻辑仅作为静态设计稿存在。本次优化的目标是通过Vibe Coding交互对现有项目进行结构性重构在不改变核心视觉风格的前提下建立清晰的前端开发规范并实现完整的页面路由与跳转功能。项目结构重构原始目录结构分析优化前项目目录包含了多个由Stitch自动生成的设计稿文件夹命名随意且存在冗余。通过AI助手查看目录结构后发现存在大量类似addrecord、login的独立文件夹且每个文件夹内包含独立的HTML文件缺乏统一的资源管理。重构后的目录规范AI根据当前主流前端开发规范对项目进行了重组。最终确立的目录结构如下front/ ├── index.html # 项目入口文件原为登录页后续调整 ├── README.md # 项目说明文档 ├── design/ # 设计规范与PRD文档 │ └── 财务管家_v1.0.1.md ├── pages/ # 业务页面目录 │ ├── login.html # 登录页 │ ├── register.html # 注册页 │ ├── dashboard.html # 控制台首页 │ ├── record.html # 记账页 │ ├── statistics.html # 统计页 │ ├── settings.html # 设置页 │ └── profile.html # 个人中心 ├── styles/ # 全局样式资源 │ ├── main.css │ └── theme.css ├── scripts/ # JavaScript 脚本目录 │ └── app.js # 路由控制、存储与工具函数 ├── components/ # 可复用UI组件 │ ├── footer.js │ └── header.js └── assets/ # 静态资源图片/音频/视频 └── (空)关键目录说明pages/核心业务视图的存放位置每个文件代表一个独立的可访问页面。这剥离了之前设计稿文件混杂的状态使关注点分离。scripts/app.js作为单页应用SPA或传统多页跳转的逻辑枢纽负责处理客户端的路由映射、本地存储读写localStorage以及工具函数。components/封装了底部导航TabBar等通用UI模块避免在多个页面中重复编写相同的HTML结构提高了代码复用率。页面跳转逻辑实现为了实现页面间的相互跳转原有的HTML文件需要进行两方面的调整链接地址修正与脚本控制。链接地址规范化在重构后的目录结构中所有页面均位于pages/子目录下而入口文件位于根目录。因此页面间的超链接必须使用相对于根目录或当前文件的正确路径。示例首页中的导航链接!-- 位于 pages/dashboard.html 中 --ahrefrecord.html记账/aahrefstatistics.html统计/aahrefsettings.html设置/aahrefprofile.html我的/a路由与页面跳转在传统的多页应用MPA模式中页面跳转依赖浏览器原生href属性。为了使项目结构更加健壮app.js中实现了一个轻量级的路由拦截或跳转辅助函数用于处理登录状态校验、页面传参等逻辑。app.js核心跳转逻辑示例// front/scripts/app.js// 版本: ES6// 功能: 页面导航与状态管理// 存储当前用户信息模拟varSTORAGE_KEYfinance_user;// 跳转函数支持路径拼接与状态提示functionnavigateTo(page,params){paramsparams||{};// 如果是登录页不需要校验直接跳转if(page.includes(login)||page.includes(register)){window.location.href../pages/page;return;}// 校验登录状态varuserlocalStorage.getItem(STORAGE_KEY);if(!user){alert(请先登录);window.location.href../pages/login.html;return;}// 构建跳转路径varurl../pages/page;// 简单的参数拼接若需要varqueryStringObject.keys(params).map(function(key){returnencodeURIComponent(key)encodeURIComponent(params[key]);}).join();if(queryString){urlurl?queryString;}window.location.hrefurl;}// 页面加载时自动执行的初始化函数functioninitApp(){console.log(财务管家 App 初始化完成);// 在这里可以绑定全局导航事件}// 暴露部分函数到全局作用域便于内联调用window.navigateTonavigateTo;window.initAppinitApp;代码说明登录校验拦截在跳转到除登录/注册外的任何页面时都会先检查localStorage中是否存在用户信息若无则强制退回登录页。统一跳转入口通过封装navigateTo避免在HTML中硬编码大量路径便于后期维护例如当pages目录更名时仅需修改此函数。参数传递支持预留了params对象参数允许在页面跳转时通过URL查询字符串传递数据。旧原型文件清理由于重构后的新项目结构已整合了所有必要页面旧的Stitch生成文件如/addrecord、/home等独立文件夹已不再需要。为了避免混淆并节省空间通过AI执行了精准的删除操作。该过程严格遵循了以下流程风险评估AI 首先列出了所有拟删除的文件夹列表并请求用户确认ask before模式。安全执行用户确认后AI 通过终端执行rm -rf命令移除指定目录。保留核心保留了重构后的pages、scripts、styles目录以及README.md文档。此步骤确保了代码仓库的整洁性避免了遗留文件对新开发工作的干扰。本地开发环境与调试问题分析在优化过程中发现直接双击HTML文件通过file://协议打开时页面存在严重的样式丢失CSS 未加载且动态交互JavaScript失效。这是因为浏览器的安全策略限制了本地文件的跨域请求以及部分模块化脚本的执行。解决方案Live Server为了模拟生产环境必须在本地启动一个基于HTTP协议的开发服务器。推荐使用VS Code插件Live Server。配置与使用步骤在VS Code扩展商店搜索并安装Live Server。重启VS Code以激活插件。在项目根目录front/下右键单击index.html选择“Open with Live Server”。浏览器将自动打开http://127.0.0.1:5500此时页面样式和脚本均能正确加载。运行效果登录页login.html与注册页register.html可相互跳转。控制台dashboard.html、记账record.html、统计statistics.html、设置settings.html和个人中心profile.html均可通过底部导航或功能按钮进行切换。后续优化方向虽然项目结构已大幅优化但当前界面UI仍存在以下待改进点计划在下一迭代中处理样式精细化部分页面存在中英文混杂的占位文本需统一为中文配色方案需对照设计稿进行校准去除生硬的默认浏览器样式。二级菜单交互settings.html页面中的二级菜单项点击尚未绑定对应逻辑。退出登录逻辑已成功将退出按钮重定向至login.html但注销操作应同时清除本地存储的Token或用户信息。参考文档官方文档Live Server 扩展文档VS Code MarketplaceMDN Web DocsHTML/CSS/JavaScript 标准参考localStorage APIMDN参考链接Stitch 设计稿生成工具官方指南前端项目目录结构最佳实践参考文章Vibe Coding 自然语言编程实践总结本次优化通过Vibe Coding的方式将一个松散的设计稿集合转化为一个符合前端工程化标准的项目雏形。核心工作包括基于语义化的目录重组、基于localStorage的简单路由拦截、以及基于Live Server的本地调试环境搭建。重构后的项目结构清晰、页面跳转流畅为后续的功能迭代与视觉打磨奠定了坚实基础。